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

{% block content %}

  <div class="container-fluid">
    
        {# 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>

        {# Módulos #}
        <base-card 
          class="padding-large bottom-margin-large"
          v-if="configurations.special_module.length"
          v-for="(module, moduleIndex) in configurations.special_module"
          :key="moduleIndex">

            <div class="row small-space-xs bottom-xs">

              {# Promoções #}
              <validation-provider :name=`special_module[${moduleIndex}][order_promotion_id]`
                tag="div"
                class="col-xs-12 col-md"
                rules=""
                v-slot="{ errors, valid }">
                  <base-select :name=`special_module[${moduleIndex}][order_promotion_id]`
                    :label="entry_special_action"
                    v-model="module.order_promotion_id"
                    :valid="valid"
                    :disabled="disableForm"
                    :error="errors[0]">
                    <option :value="Type_DefaultValues.Tp_PromocaoGeral">Geral</option>
                    <option
                        v-for="(value, key) in special_action"
                        :value="value.order_promotion_id">{ value.description }
                    </option>
                  </base-select>
              </validation-provider>

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

              {# Exibir em Grade #}
              <validation-provider :name=`special_module[${moduleIndex}][entry_type]`
                  tag="div"
                  class="col-xs-12 col-md"
                  rules="" 
                  v-slot="{ errors, valid }">
                  <base-select :name=`special_module[${moduleIndex}][entry_type]`
                      :label="entry_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 :name=`special_module[${moduleIndex}][limit]`
                  tag="div"
                  class="col-xs-12 col-md-1"
                  :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=`special_module[${moduleIndex}][limit]`
                      v-model="module.limit"
                      mask="positiveInteger"
                      maxlength="2"
                      required
                      :valid="valid"
                      :error="errors[0]"
                      :disabled="module.entry_type != Type_DsimDnao.Tp_Sim && module.position != Type_ModulePosition.Tp_ColumnLeft ? true : disableForm">
                  </base-input>
              </validation-provider>

              {# Layout: #}
              <validation-provider :name=`special_module[${moduleIndex}][layout_id]`
                  tag="div"
                  class="col-xs-12 col-md"
                  rules="required"
                  v-slot="{ errors, valid }">
                  <base-select
                      :name=`special_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>

              {# Cronômetro #}
              <validation-provider :name=`special_module[${moduleIndex}][cronometer]`
                  tag="div"
                  class="col-xs-12 col-md"
                  rules=""
                  v-slot="{ errors, valid }">
                  <base-select
                      :name=`special_module[${moduleIndex}][cronometer]`
                      :label="entry_cronometer"
                      v-model="module.cronometer"
                      :valid="valid"
                      :disabled="disableForm">
                      <option
                          v-for="(value, key) in Type_DsimDnao.getEnumList(true)"
                          :value="key">{ value }
                      </option>
                  </base-select>
              </validation-provider>

              {# Status modulo  #}
              <validation-provider :name=`special_module[${moduleIndex}][status]`
                  tag="div"
                  class="col-xs-12 col-md"
                  rules=""
                  v-slot="{ errors, valid }">
                  <base-select
                      :name=`special_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>

              {# Input ordenação #}
              <validation-provider :name=`special_module[${moduleIndex}][sort_order]`
                  tag="div"
                  class="col-xs-12 col-md-1"
                  rules="required"
                  v-slot="{ errors, valid }">
                  <base-input
                      :label="entry_sort_order"
                      :name=`special_module[${moduleIndex}][sort_order]`
                      mask="positiveInteger"
                      v-model="module.sort_order"
                      :valid="valid"
                      :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
                      @click.native="() => onRemoveModule(moduleIndex)">
                      <i class="fas fa-trash"></i>
                  </base-button>
              </div>

            </div>
        </base-card>

    </div>

{% endblock %}
