{% extends 'base/module.twig' %}

{% block content %}
  <div class="container-fluid">
      <base-card
        class="padding-large bottom-margin-large">
        <div class="row small-space-xs bottom-xs">
          {#titulo #}
          <validation-provider
            tag="div"
            class="col-xs-12 col-md"
            name='bestseller_title'
            rules="required"
            v-slot="{ errors, valid }">
            <base-input
              :label="text_title"
              name='bestseller_title'
              v-model="configurations.bestseller_title"
              :required="true"
              mask="alphanumeric"
              :valid="valid"
              :error="errors[0]"
              maxlength="70"
              :disabled="disableForm">
            </base-input>
          </validation-provider>

          {#subtitulo #}
          <validation-provider
            tag="div"
            class="col-xs-12 col-md"
            name='bestseller_subtitle'
            v-slot="{ errors, valid }">
            <base-input
              :label="text_subtitle"
              name='bestseller_subtitle'
              v-model="configurations.bestseller_subtitle"
              mask="alphanumeric"
              :valid="valid"
              :error="errors[0]"
              maxlength="100"
              :disabled="disableForm">
            </base-input>
          </validation-provider>
        </div>
      </base-card>

    {# Botão adicionar modulo #}
      <div class="flex between-xs middle-xs bottom-padding-large">
        <span class="text-x-large text-dark">{{ text_module }}</span>
        <base-button
          class="btn-default btn-medium btn-primary"
          :loading="loadingBtn"
          @click.native="() => onAddModule()">
          {button_add}
        </base-button>
      </div>

      <base-card
      v-if="configurations.bestseller_module.length"
      v-for="(module, moduleIndex) in configurations.bestseller_module"
      :key="moduleIndex"
      class="padding-large bottom-margin-small">
        <div class="row small-space-xs bottom-xs">

          {# Posição modulo  #}
          <validation-provider
            tag="div"
            class="col-xs-12 col-md"
            :name=`bestseller_module[${moduleIndex}][position]`
            :rules="{
              required: true,
              module_is_duplicated: {
                  data: configurations.bestseller_module,
                  index: moduleIndex
              }
            }"
            v-slot="{ errors, valid }">
            <base-select
              :name=`bestseller_module[${moduleIndex}][position]`
              :label="entry_position"
              v-model="module.position"
              :valid="valid"
              :disabled="disableForm"
              @change="onPositionChange(moduleIndex)"
              :error="errors[0]">
              <option
                 v-for="(value, key) in Type_ModulePosition.getEnumList(true)"
                :value="key">{ value }
              </option>
            </base-select>
          </validation-provider>

           {# Exibir em grade  #}
          <validation-provider
            tag="div"
            class="col-xs-12 col-md"
            :name=`bestseller_module[${moduleIndex}][entry_type]`
            rules=""
            v-slot="{ errors, valid }">
            <base-select
              :name=`bestseller_module[${moduleIndex}][entry_type]`
              :label="text_type"
              v-model="module.entry_type"
              :valid="valid"
               @change="onTypeChange(module.entry_type, moduleIndex)"
              :disabled="module.position == Type_ModulePosition.Tp_ColumnLeft ? true : disableForm ">
              <option
                 v-for="(value, key) in Type_DsimDnao.getEnumList(true)"
                :value="key">{ value }
              </option>
            </base-select>
          </validation-provider>

          {# Limite #}
          <validation-provider
            tag="div"
            class="col-xs-12 col-md-1"
            :name=`bestseller_module[${moduleIndex}][limit]`
            :rules="module.position == Type_ModulePosition.Tp_ColumnLeft || module.position == Type_ModulePosition.Tp_AppMobile ? 'required|minmax_number:1,24' : 'required|minmax_number:1,99' "
            v-slot="{ errors, valid }">
            <base-input
              :label="entry_limit"
              :name=`bestseller_module[${moduleIndex}][limit]`
              v-model="module.limit"
              mask="positiveInteger"
              maxlength="2"
              required
              :valid="valid"
              :error="errors[0]"
              :disabled="module.entry_type == Type_DsimDnao.Tp_Nao && module.position != Type_ModulePosition.Tp_ColumnLeft  ? true : disableForm ">
            </base-input>
          </validation-provider>
          
          {# Layout #}
          <validation-provider
            tag="div"
            class="col-xs-12 col-md"
            :name=`bestseller_module[${moduleIndex}][layout_id]`
            v-slot="{ errors, valid }"
            :rules="{
              required: true,
              module_is_duplicated: {
                  data: configurations.bestseller_module,
                  index: moduleIndex
              }
            }">
            <base-select :name=`bestseller_module[${moduleIndex}][layout_id]`
              v-if="module.position === Type_ModulePosition.Tp_AppMobile"
              :label="entry_layout"
              v-model="module.layout_id"
              :valid="valid"
              :disabled="disableForm"
              :error="errors[0]">
              <option
                v-for="(value, key) in layoutsApp"
                :value="key">{ value }
              </option>
            </base-select>
            <base-select
              v-else
              :name=`bestseller_module[${moduleIndex}][layout_id]`
              :label="entry_layout"
              v-model="module.layout_id"
              :valid="valid"
              :disabled="disableForm"
              :error="errors[0]">
              <option
                v-for="(value, key) in layouts"
                :value="value.layout_id">{ value.name }
              </option>
            </base-select>
          </validation-provider>

          {# Status #}
           <validation-provider
            tag="div"
            class="col-xs-12 col-md"
            :name=`bestseller_module[${moduleIndex}][status]`
            rules=""
            v-slot="{ errors, valid }">
            <base-select
              :name=`bestseller_module[${moduleIndex}][status]`
              :label="entry_status"
              v-model="module.status"
              :valid="valid"
              :disabled="disableForm">
              <option v-for="(value, key) in Type_Status.getEnumList()" :value="key">{ value }</option>
            </base-select>
          </validation-provider>

          {#Ordem#}
          <validation-provider
            tag="div"
            class="col-xs-12 col-md-1"
            :name=`bestseller_module[${moduleIndex}][sort_order]`
            rules="required"
            v-slot="{ errors, valid }">
            <base-input
              :label="entry_sort_order"
              :name=`bestseller_module[${moduleIndex}][sort_order]`
              mask="positiveInteger"
              v-model="module.sort_order"
              :valid="valid"
              required
              :error="errors[0]"
              :disabled="disableForm"
              maxlength="2">
            </base-input>
          </validation-provider>

          {# Botão lixeira #}
          <div class="col-xs-12 col-md-width-auto">
            <base-button
              apperance="outline"
              square
              :loading="loadingBtn"
              @click.native="() => onRemoveModule(moduleIndex)">
              <i class="fas fa-trash"></i>
            </base-button>
          </div>
        </div>
      </base-card>
  </div>
{% endblock %}