<template>
  <validation-observer ref="validationObserver" v-slot="{ handleSubmit }">
    <div class=" col-xs-11 col-md-11 margin-auto">
      <div
        class="flex between-xs bottom-padding-small bottom-border-dark-gray " >

        <div class="col-xs-9 col-md-9  middle-xs text-dark-opacity nowrap-xs text-ellipsis padding-medium row">
          <div @click.prevent="onClickBackToHomePage('HomePage')">
            <base-button
              apperance="white"
              class="right-margin-small"
              square
              size="small" >
              <template #icon>
                <i class="text-dark-opacity fas fa-arrow-left"></i>
              </template>
            </base-button>
          </div>
          <span class="text-small text-bold text-ellipsis"  v-text="getLanguage('pageConfigPrincpalImgNew')"></span>
        </div>

        <div class="flex end-xs">
          <div @click.prevent="setTypeUseWithFlagDetails(handleSubmit)">
            <base-button
              apperance="primary"
              square
              size="small"
              v-text="getLanguage('button_add_alter')">
            </base-button>
          </div>

        </div>
      </div>

      <div class="flex center-xs">
        <div class="flex around-xs col-xs-10 col-md-10">
          <div class="flex center-xs col-xs-6 col-md-6">
            <h1 class="text-small" v-text="getLanguage('label_imgMaior')"></h1>

            <br />
            <div
              class="image-background align-image top-margin-large">

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

              <img
                @click.prevent="open = true"
                :src="thumbLargeImage !== ''? thumbLargeImage: notImage"
                style="width: 80%; height: 80%; object-fit: contain;"
                class="image-selected no_image"
                alt=""
              />
              <div
                @click.prevent="open = true"
                class="button-edit shadow-small hover:shadow-small-clean">
                <i class="fa-solid fa-images icon-template"></i>
              </div>

            </div>
          </div>

          <div class="flex center-xs col-xs-6 col-md-6">
            <h1 class="text-small" v-text="getLanguage('label_imgMenores')"></h1>
            <br />
            <div
              class="image-background align-image top-margin-large">
              <file-manager
                v-if="openResp"
                @close="openResp = false"
                @file="onSelectedFileResp"
                @icon="onSelectedIconResp">
              </file-manager>
              <img
                @click.prevent="openResp = true"
                :src="thumbResponsive !== ''? thumbResponsive: notImage"
                style="width: 80%; height: 80%; object-fit: contain;"
                class="image-selected no_image"
                alt=""/>
              <div
                @click.prevent="openResp = true"
                class="button-edit shadow-small hover:shadow-small-clean">
                <i class="fa-solid fa-images icon-template"></i>
              </div>
            </div>
          </div>
        </div>

        <div class="col-xs-12 col-md-12 left-no-padding right-no-padding">
          <validation-provider
            tag="div"
            rules="required"
            name="title"
            v-slot="{ errors, valid }">
            <base-input
              :label="getLanguage('label_tituloImg')"
              v-model="titleBannerImage"
              type="text"
              maxlength="80"
              mask="alphanumeric"
              name="title"
              :error="errors[0]"
              :valid="valid">
            </base-input>
          </validation-provider>
        </div>

        <div class="col-xs-12 col-md-12 left-no-padding right-no-padding">
          <div class="row">
            <div class="col-xs-6 col-md-6">
              <validation-provider
                tag="div"
                :rules="analyze === '1'? 'required': ''"
                name="titleBannerImage"
                v-slot="{ errors, valid }">
                  <base-input
                    :label="getLanguage('label_link')"
                    maxlength="255"
                    :error="errors[0]"
                    :valid="valid"
                    type="text"
                    name="link"
                    mask="link"
                    v-model="link"
                  ></base-input>
              </validation-provider>
            </div>
            <div class="col-xs-6 col-md-6">
              <validation-provider
                tag="div"
                name="target">
                <base-select
                  :label="getLanguage('label_open_link')"
                  name="target"
                  v-model="target">
                  <option
                    v-for="(value, key) in Type_OpenLink"
                    :value="key"
                    :key="key"
                    class="bottom-margin-medium">
                    {{ value }}
                  </option>
                </base-select>
              </validation-provider>
            </div>
          </div>
        </div>

        <div class="col-xs-12 col-md-12 left-no-padding right-no-padding">
          <div class="flex between-xs bottom-xs  bottom-border-dark-gray bottom-padding-medium">
            <span class="text-small bottom-xs text-ellipsis" v-text="getLanguage('text_advanced_setting')"></span>
          </div>
        </div>

        <div class="col-xs-12 col-md-12 left-no-padding right-no-padding">
          <div class="row">
            <div class="col-xs-4 col-md-4">
              <validation-provider
                tag="div"
                rules="date"
                v-slot="{ errors, valid }"
                name="date_initial">
                <base-input
                  :label="getLanguage('label_initial_date')"
                  format="DD/MM/YYYY"
                  type="date"
                  :error="errors[0]"
                  :valid="valid"
                  value-type="format"
                  v-model="date_initial"
                  mask="date"
                  @input="handleSetInitialDate($event)"
                  name="date_initial"
                ></base-input>
              </validation-provider>
            </div>
            <div class="col-xs-4 col-md-4 bottom-margin-large">
              <validation-provider
                tag="div"
                rules="date"
                v-slot="{ errors, valid }"
                name="date_end">
                <base-input
                  :label="getLanguage('label_final_date')"
                  format="DD/MM/YYYY"
                  v-model="date_end"
                  :error="errors[0]"
                  :valid="valid"
                  type="date"
                  :disabled-date="disabledFinalDate"
                  @input="onFinalDate"
                  value-type="format"
                  mask="date"
                  name="date_end"
                ></base-input>
              </validation-provider>
            </div>
            <div class="col-xs-4 col-md-4">
              <base-vue-toggles
                :label="getLanguage('label_follow_click')"
                :position="1"
                :width="50"
                :slider-top="true"
                name="analyze"
                col-toggles="col-xs-2",
                v-model="analyze">
              </base-vue-toggles>
              <span>
                {{ 'Quantidade: '+ quantity }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </validation-observer>
</template>

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