<template>
    <v-menu
        v-model="menu.visible"
        :position-x="menu.x"
        :position-y="menu.y"
        absolute
        offset-y
        right
        :close-on-content-click="false"
        :close-on-click="false"
    >
        <v-card tile flat width="480">
            <v-card-title>
                <span class="text-dark-blue">{{ formcaption }}</span>
            </v-card-title>

            <v-divider></v-divider>

            <v-card-text>

                <template v-if="menu.action != 'delete'">
                    <v-row dense>
                        <v-col cols="12">
                            <v-radio-group
                                dense
                                row
                                hide-details
                                :disabled="menu.action != 'insert' || !! menu.activeRecord.group_id || menu.activeRecord.type == 'status' || menu.activeRecord.type == 'departament'"
                                v-model="menu.activeRecord.column_type"
                            >
                                <v-radio
                                    v-for="(option, index) in columnTypes"
                                    :key="'option-' + index"
                                    :value="option.value"
                                    :label="option.text"
                                >
                                </v-radio>
                            </v-radio-group>
                        </v-col>

                        <v-col cols="12">
                            <v-text-field
                                :label="__('Header coloană')"
                                dense
                                outlined
                                v-model="menu.activeRecord.caption"
                            >
                            </v-text-field>
                        </v-col>
                    </v-row>

                    <v-row dense v-if="menu.activeRecord.column_type == 'group'">
                    </v-row>

                    <v-row dense v-else-if="menu.activeRecord.column_type == 'single'">
                        <v-col cols="4">
                            <v-text-field
                                :label="__('Lățime coloană')"
                                dense
                                outlined
                                type="number"
                                v-model="menu.activeRecord.width"
                            >
                            </v-text-field>
                        </v-col>

                        <v-col cols="8">
                            <v-select
                                dense
                                outlined
                                :label="__('Tip coloană')"
                                :items="columnTypeItems"
                                :disabled="menu.activeRecord.type == 'status' || menu.activeRecord.type == 'departament'"
                                v-model="menu.activeRecord.type"
                            >
                            </v-select>
                        </v-col>

                        <v-col cols="12" v-if="menu.activeRecord.type == 'O'">
                            <column-options-list 
                                v-model="menu.activeRecord.props"
                            />
                        </v-col>
                    </v-row>
                </template>

                <template v-else>
                    <v-alert type="error" outlined>
                        {{ __('Sunteți sigur că vreți să ștergeți coloana :caption', {caption: menu.activeRecord.caption}) }}
                    </v-alert>
                </template>

            </v-card-text>

            <v-divider></v-divider>

            <v-card-actions>
                <cs-btn 
                    :icon="menu.action == 'delete' ? 'mdi-delete' : 'mdi-content-save'"
                    :caption="menu.action == 'delete' ? 'Șterge' : 'Salvează'"
                    :class="isValid ? (menu.action == 'delete' ? 'red white--text' : 'bg-dark-blue white--text') : null"
                    outlined
                    :disabled="! isValid"
                    :loading="app.requests.Actioncolumnregistru.processing"
                    @click="controller.Save()"
                />

                <v-spacer></v-spacer>

                <cs-btn 
                    icon="mdi-close"
                    caption="Renunță"
                    outlined
                    @click="menu.visible = false"
                />
            </v-card-actions>
        </v-card>
    </v-menu>
</template>

<script>
    export default {
        props: {
            app: {required: true},
            menu: {required: true},

            columnTypes: {default: () => [
                {
                    text: 'Coloana simpla',
                    value: 'single',
                },
                {
                    text: 'Grup de coloane',
                    value: 'group',
                },
            ]},

            columnTypeItems: {default: () => [
                {
                    text: 'Text scurt',
                    value: 'C',
                },
                {
                    text: 'Text lung',
                    value: 'E',
                },
                {
                    text: 'Număr',
                    value: 'N',
                },
                {
                    text: 'Dată calendaristică',
                    value: 'D',
                },
                {
                    text: 'Dată calendaristică și oră',
                    value: 'T',
                },
                {
                    text: 'Listă de opțiuni',
                    value: 'O',
                },
                // {
                //     text: 'Status',
                //     value: 'status',
                // },
                // {
                //     text: 'Departament',
                //     value: 'departament',
                // }
            ]}
        },

        computed: {
            isValid() {

                if( ! this.menu.activeRecord.caption )
                {
                    return false;
                }

                if(this.menu.activeRecord.column_type == 'single' )
                {
                    if( ! this.menu.activeRecord.width )
                    {
                        return false;
                    }

                    if( ! this.menu.activeRecord.type )
                    {
                        return false;
                    }
                }

                return true;
            },

            formcaption() {
                if(this.menu.action == 'insert')
                {
                    return 'Creare coloană';
                }
                if(this.menu.action == 'update')
                {
                    return 'Editare coloană';
                }
                if(this.menu.action == 'delete')
                {
                    return 'Ștergere coloană';
                }
                return '?';
            }
        },

        components: {
            CsBtn: require('@CsVueComp/buttons/CsBtn').default,
        },

        name: 'RegistruColumnFormMenu',
    }
</script>