<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">
<!--          <base-button-->
<!--            @click.native="onClickBackToHomePage('HomePage')"-->
<!--            apperance="white"-->
<!--            square-->
<!--            size="small">-->
<!--            <template #icon>-->
<!--              <i class="fas fa-arrow-left"></i>-->
<!--            </template>-->
<!--          </base-button>-->
          <div>
            <base-button
              apperance="white"
              class="right-margin-small"
              @click.native="onClickBackToHomePage('HomePage')"
              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('pageConfigPrincpalDynamic')"></span>
        </div>

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

      <validation-observer v-slot="{ handleSubmit, validate }">
        <div class="col-xs-12 col-md-12 left-no-padding right-no-padding top-margin-medium">
          <validation-provider
            tag="div"
            rules="required"
            name="banner_dinamico_tipolista"
            v-slot="{ errors, valid }">
            <base-select
              :label="getLanguage('label_list_type')"
              :error="errors[0]"
              :valid="valid"
              v-model="banner_dinamico_tipolista"
              @change="setTypeList($event)"
              name="hide_responsive">
              <option
                v-for="(value, key) in Type_ModulesListBanner"
                :value="key">
                {{ value }}
              </option>
            </base-select>
          </validation-provider>

          <div class="row">
            <div class="col-xs-6 col-md-6">
              <validation-provider
                tag="div"
                class="top-margin-large"
                rules="required|minmax_number: 1,30"
                name="banner_dinamico_quantidade"
                v-slot="{ errors, valid }">
                <base-input
                  :label="getLanguage('label_quantity')"
                  @input="setAmount($event)"
                  :value="banner_dinamico_quantidade"
                  v-model="banner_dinamico_quantidade"
                  type="text"
                  maxlength="3"
                  name="banner_dinamico_quantidade"
                  mask="number"
                  :error="errors[0]"
                  :valid="valid">
                </base-input>
              </validation-provider>
            </div>

            <div class="col-xs-6 col-md-6">
              <validation-provider
                tag="div"
                class="top-margin-large"
                rules="required"
                name="banner_dinamico_model"
                v-slot="{ errors, valid }">
                <base-select
                  :label="getLanguage('label_model')"
                  name="banner_dinamico_model"
                  :error="errors[0]"
                  :valid="valid"
                  @change="setModel($event)"
                  v-model="banner_dinamico_model">
                  <option
                    class="bottom-margin-medium"
                    v-for="(value, key) in Type_ModelBannerProduct"
                    :value="key">
                    {{ value }}
                  </option>
                </base-select>
              </validation-provider>
            </div>
          </div>

          <div class="col-xs-12 col-md-12 no-padding top-padding-medium bottom-padding-medium">
            <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>
              <i class="outline fa fa-sliders" aria-hidden="true"></i>
            </div>
          </div>

          <div class="col-xs-12 col-md-12">
            <div class="row">
              <div class="col-xs-6 col-md-6 left-no-padding">
                <validation-provider
                  tag="div"
                  rules="date"
                  name="date_initial"
                  v-slot="{ errors, valid }">
                  <base-input
                    :error="errors[0]"
                    :valid="valid"
                    :label="getLanguage('label_initial_date')"
                    format="DD/MM/YYYY"
                    type="date"
                    value-type="format"
                    v-model="banner_dinamico_date_initial"
                    mask="date"
                    name="date_initial">
                  </base-input>
                </validation-provider>
              </div>

              <div class="col-xs-6 col-md-6 right-no-padding">
                <validation-provider
                  tag="div"
                  rules="date"
                  name="date_end"
                  v-slot="{ errors, valid }">
                  <base-input
                    :error="errors[0]"
                    :valid="valid"
                    :label="getLanguage('label_final_date')"
                    format="DD/MM/YYYY"
                    type="date"
                    :disabled-date="disabledFinalDate"
                    @input="onFinalDate"
                    value-type="format"
                    v-model="banner_dinamico_date_end"
                    mask="date"
                    name="date_end">
                  </base-input>
                </validation-provider>
              </div>
            </div>
          </div>
        </div>
      </validation-observer>
    </div>
  </validation-observer>
</template>

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