{% 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="{
                    required: true,
                    module_is_duplicated: {
                        data: configurations.special_module,
                        index: moduleIndex,
                        keys: ['order_promotion_id']
                    }
                }"
                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="{
                        required: true,
                        module_is_duplicated: {
                            data: configurations.special_module,
                            index: moduleIndex,
                            keys: ['order_promotion_id']
                        }
                    }"
                    v-slot="{ errors, valid }">
                    <base-select :name=`special_module[${moduleIndex}][position]`
                        :label="entry_position"
                        v-model="module.position"
                        :valid="valid"
                        :error="errors[0]"
                        :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: true,
                    module_is_duplicated: {
                        data: configurations.special_module,
                        index: moduleIndex,
                        keys: ['order_promotion_id']
                    }
                }"
                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 %}
