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

{% block content %}

    <div class="container-fluid">
    
        <base-card class="padding-large bottom-margin-large">
            {# Status #}
            <validation-provider
                tag="div"
                name='product_visualized_status'
                rules="required"
                v-slot="{ errors, valid }">
                <base-select
                    :label="entry_status"
                    name='product_visualized_status'
                    v-model="configurations.product_visualized_status"
                    :valid="valid"
                    :error="errors[0]"
                    :disabled="disableForm">
                    <option v-for="(value, key) in Type_Status.getEnumList()" :value="key">{ value }</option>
                </base-select>
            </validation-provider>

            <div class="vertical-margin-medium row small-space-xs">
                {# Título #}
                <validation-provider
                    tag="div"
                    class="col-xs-12 col-md"
                    name='product_visualized_title'
                    rules="required"
                    v-slot="{ errors, valid }">
                    <base-input
                        :label="entry_title"
                        name='product_visualized_title'
                        v-model="configurations.product_visualized_title"
                        :required="true"
                        mask="alphanumeric"
                        :valid="valid"
                        :error="errors[0]"
                        maxlength="100"
                        :disabled="disableForm">
                    </base-input>
                </validation-provider>

                {# Subtítulo #}
                <validation-provider
                    tag="div"
                    class="col-xs-12 col-md"
                    name='product_visualized_subtitle'
                    v-slot="{ errors, valid }">
                    <base-input
                        :label="entry_subtitle"
                        name='product_visualized_subtitle'
                        v-model="configurations.product_visualized_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>


        {# Módulos #}
        <base-card 
          class="padding-large bottom-margin-large"
          v-if="configurations.product_visualized_module.length"
          v-for="(module, moduleIndex) in configurations.product_visualized_module"
          :key="moduleIndex">
            
            <div class="row small-space-xs bottom-xs">
    
                {# Posição modulo  #}
                <validation-provider
                    tag="div"
                    class="col-xs-12 col-md"
                    :name=`product_visualized_module[${moduleIndex}][position]`
                    rules=""
                    v-slot="{ errors, valid }">
                    <base-select
                        :name=`product_visualized_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
                    tag="div"
                    class="col-xs-12 col-md"
                    :name=`product_visualized_module[${moduleIndex}][entry_type]`
                    rules=""
                    v-slot="{ errors, valid }">
                    <base-select
                        :name=`product_visualized_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
                    tag="div"
                    class="col-xs-12 col-md-1"
                    :name=`product_visualized_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=`product_visualized_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
                    tag="div"
                    class="col-xs-12 col-md"
                    :name=`product_visualized_module[${moduleIndex}][layout_id]`
                    rules="required"
                    v-slot="{ errors, valid }">
                    <base-select
                        :name=`product_visualized_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>

                {# Input ordenação #}
                <validation-provider
                    tag="div"
                    class="col-xs-12 col-md-1"
                    :name=`product_visualized_module[${moduleIndex}][sort_order]`
                    rules="required"
                    v-slot="{ errors, valid }">
                    <base-input
                        :label="entry_sort_order"
                        :name=`product_visualized_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 %}
