<template>
  <div class="col-xs-12 col-md-12 no-padding top-margin-medium">
    <div
      class="margin-auto col-xs-12  col-md-12 no-padding">
      <div
        class="box-drag-image " style="overflow-x: scroll;padding: 5px 5px 15px 1px;">

        <draggable
          v-bind="dragOptions"
          v-model="imageThumb"
          style="display: flex; flex-wrap: wrap">
          <div
            v-for="(image, key) in imageThumb"
            :style="{ width: `${((width > 48 ? width : 50) *0.9)}px`, height: `${((height > 48? height : 50) * 0.9)}px`, display: 'flex', alignItems: 'center', overflow: 'hidden'}"
            :class="'border-radius-small grid-item relative background-white cursor-pointer hover:shadow-small-clean image-drag '+ Type_Tamanho[tamanho - 1]">
            <i
              @click="removeImgBanner(key)"
              class=" trash text-dark-opacity  btn-default padding-x-small btn-outline absolute fas fa-trash-alt"></i>
            <i
              @click="isEdit = key; imageSelected = image"
              class=" edit  btn-default padding-x-small top-margin-small btn-outline absolute fas fa-edit"></i>
            <img
              @click.prevent="open = true; mosaicIndexTrumb = key"
              style="max-width: 100%; max-height: 100%;"
              class="relative min-banner"
              :src="'../image/'+image.image"
              alt="">
          </div>
        </draggable>


      </div>
      <div
        class="col-xs-12 col-md-12">
        <base-button
          apperance="white"
          @click.native="open = true; mosaicIndexTrumb = -1"
          class="align-image">
          <i class="fa-plus fa"></i>
        </base-button>
      </div>
    </div>

    <base-modal class="padding-large" v-if="isEdit > -1">
      <base-input
        mask="alphanumeric"
        maxlength="100"
        v-model="imageSelected.banner_image_description['1'].title"
        label="Descrição">
      </base-input>
      <base-input
        mask="link"
        maxlength="500"
        v-model="imageSelected.link"
        label="link">
      </base-input>
      <base-button
        class="top-margin-medium"
        @click.native="isEdit = -1">
        Fechar
      </base-button>
    </base-modal>

    <file-manager
      v-if="open"
      @close="open = false"
      @file="onSelectedFile"
      @icon="onSelectedIcon">
    </file-manager>
  </div>
</template>

<style scoped src="./styles.css"></style>
<script src="./scripts.js"></script>
