<template>
  <div class="col-xs-12 col-md-12">
    <div class="flex center-xs text-dark-opacity nowrap-xs text-ellipsis padding-medium">
      <span
        v-text="getLanguage('pageSecundaryImgMosaic')"
        class="align-center-xs top-margin-medium text-medium text-bold full-width text-ellipsis">
        </span>
    </div>
    <div class="row bottom-margin-large">
      <div
        class="col-xs-3 col-md-3 flex center-ms top-margin-medium"
        v-for="(imagesMosaic, imagesMosaicIndex) in mosaicStyles"
        @click.prevent="onClickSetMosaicStyle(imagesMosaic.type)">
        <img
          class="mosaic-model cursor-pointer hover:shadow-small-clean"
          :src="imagesMosaic.image"
          alt="" />
      </div>
    </div>

    <div>
      <draggable
        v-bind="dragOptions"
        :class="'grid-container grid-template-'+(mosaicSelectedIndexName)"
        v-model="imageThumb">

        <div
          v-for="(value, index) in  imageThumbGrid"
          @click.prevent="open = true; mosaicIndexTrumb = index"
          :class="'cursor-pointer relative img-box hover:shadow-small-clean border-all-gray grid-item item'+(index + 1)"
          :style="'position:relative ;background-image: url('+ validaImagem(index)+') '">
          <i
            @click.stop="removeImgBanner(index)"
            style="position: absolute"
            class=" trash btn-default padding-x-small top-margin-small btn-outline absolute fas fa-trash-alt"></i>
          <i
            @click.stop="isEdit = index; imageSelected = value"
            style="position: absolute"
            class=" edit btn-default padding-x-small top-margin-medium btn-outline absolute fas fa-edit"></i>
        </div>
      </draggable>
      <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"
          v-model="imageSelected.link"
          label="link">
        </base-input>
        <base-button
          class="top-margin-medium"
          @click.native="isEdit = -1">
          Fechar
        </base-button>
      </base-modal>
    </div>
    <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>
