<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 width="640">
            <v-card-title>
                {{ __('Copiere/Duplicare registru') }}
            </v-card-title>

            <v-divider></v-divider>
            
            <v-card-text class="my-2">
                
                <v-row dense>
                    <v-col cols="6">
                        <v-row dense>
                            <v-col cols="12">
                                <v-autocomplete dense hide-details outlined
                                    :items="customers"
                                    :label="__('Selectați clientul')"
                                    v-model="activeRecord.customer_id"
                                >
                                </v-autocomplete>
                            </v-col>
                        </v-row>

                        <v-row dense>
                            <v-col cols="6">
                                <cs-text-box 
                                    :control="controls.number"
                                    :errors="errorsManager.ByField('number')"
                                    v-model="activeRecord.number"
                                    @focus="errorsManager.ResetField('number')"
                                    @blur="errorsManager.Validate('number')"
                                />
                            </v-col>

                            <v-col cols="6">
                                <cs-date-box 
                                    :control="controls.date"
                                    :errors="errorsManager.ByField('date')"
                                    v-model="activeRecord.date"
                                    @focus="errorsManager.ResetField('date')"
                                    @blur="errorsManager.Validate('date')"
                                />
                            </v-col>
                            
                            <v-col cols="6">
                                <cs-text-box 
                                    :control="controls.responsabil_nume"
                                    :errors="errorsManager.ByField('responsabil_nume')"
                                    v-model="activeRecord.responsabil_nume"
                                    @focus="errorsManager.ResetField('responsabil_nume')"
                                    @blur="errorsManager.Validate('responsabil_nume')"
                                />
                            </v-col>

                            <v-col cols="6">
                                <cs-text-box 
                                    :control="controls.responsabil_functie"
                                    :errors="errorsManager.ByField('responsabil_functie')"
                                    v-model="activeRecord.responsabil_functie"
                                    @focus="errorsManager.ResetField('responsabil_functie')"
                                    @blur="errorsManager.Validate('responsabil_functie')"
                                />
                            </v-col>

                            <v-col cols="12">
                                <departament-autocomplete-selector 
                                    :customer_id="activeRecord.customer_id"
                                    :disabled="! activeRecord.customer_id"
                                    :errors="errorsManager.ByField('departament_id')"
                                    :departmentForm="null"
                                    
                                    :app="app"

                                    @focus="errorsManager.ResetField('departament_id')"
                                    @blur="errorsManager.Validate('departament_id')"
                                    v-model="activeRecord.departament_id"
                                />
                            </v-col>

                            <v-col cold="12">
                                <v-radio-group
                                    dense
                                    hide-details
                                    outlined
                                    class="mt-0"
                                    row
                                    :disabled="app.platform == 'b2b'"
                                    v-model="activeRecord.status"
                                >
                                    <template v-slot:label>
                                        <div class="text-body-2 font-weight-bold mb-1" v-html="__('Status')">
                                        </div>
                                    </template>

                                    <v-radio
                                        v-for="(option, index) in statuses"
                                        :key="'option-' + index"
                                        :value="option.value"
                                        :label="option.text"
                                    >
                                    </v-radio>
                                    
                                </v-radio-group>
                            </v-col>

                        </v-row>
                    </v-col>

                    <v-col cols="6">
                        <v-sheet height="400" width="100%" class="overflow-y-auto">
                            <v-treeview
                                dense
                                selectable
                                open-all
                                :items="[{
                                    id: -1,
                                    name: __('Selectați departamentele de exportat'),
                                    children: departamente
                                }]"
                                ref="DepartamenteTree"
                                v-model="selectedDepartamente"
                            >
                            </v-treeview>
                        </v-sheet>
                    </v-col>
                </v-row>
            </v-card-text>
            

            <v-divider></v-divider>

            <v-card-actions>
                <cs-btn 
                    caption="Copiază"
                    icon="mdi-content-copy"
                    color="primary"
                    outlined
                    tooltip="Confirmă copierea"
                    :loading="app.requests.Registercopy.processing"
                    :disabled="app.requests.Registercopy.processing"
                    @click="OnClickSave"
                />

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

<script>
    export default {
        props: {
            app: {required: true},
            menu: {required: true},
            statuses: {default: () => ([
                {
                    text: 'Public',
                    value: 'public',
                },

                {
                    text: 'Privat',
                    value: 'protected',
                }
            ])},
        },

        data: () => ({
            selectedDepartamente: [],
        }),

        computed: {

            customers() {
                return _.map(this.app.dataSession.Allcustomers.items, item => ({
                    text: item.name,
                    value: item.id,
                }));
            },

            form() {
                return this.app.forms.Registrelemelecopy;
            },

            departamente() {
                return _.map(this.app.dataSession.Departamente.items, item => ({
                    name: item.departament,
                    id: item.id,
                }))
            }
        },

        watch: {
            'activeRecord.customer_id': function(newValue, oldValue) {
                if(newValue)
                {   
                    this.Init();
                }
            }
        },

        methods: {
            OnClickSave() {
                this.app.requests.Registercopy.ResetData().SetData(
                    {
                        
                        ...this.activeRecord,
                        selectedDepartamente: this.selectedDepartamente,
                        register_id: this.menu.registru.id,
                    }
                ).Request([
                    response => {
                        this.form.formprovider.AfterAction('insert', response);
                        this.OnClickCancel();
                    }
                ])
            },

            OnClickCancel() {
                this.menu.visible = false;
                this.form.Hide(true);
            },

            GetNextNumber() {
                if(this.action == 'insert') 
                {
                    this.app.requests.Getnextnumber.ResetData().SetData({
                        customer_id: this.activeRecord.customer_id,
                        register_id: this.app.payload.registru_id,
                    }).Request([
                        response => {
                            this.activeRecord.number = response.payload;
                        }
                    ]);
                }
            },

            Init() {
                this.GetNextNumber();
                
                this.activeRecord.date = moment().format('YYYY-MM-DD');

                let i = setInterval(() => {
                    if(! this.app.dataSession.Departamente.processing )
                    {
                        clearInterval(i);
                        this.selectedDepartamente = _.map(this.departamente, item => item.id);
                        this.$refs.DepartamenteTree.updateAll(true);
                    }
                }, 350)
            }
        },

        created() {
            this.form.Show(null, 'insert', null);

            this.activeRecord.customer_id = 1 * this.app.payload.customer_id;
        },

        components: {
            CsTextBox: require('@CsVueComp/controls/texts/CsTextBox').default, 
            CsDateBox: require('@CsVueComp/controls/dates/CsDateBox').default, 
            CsBtn: require('@CsVueComp/buttons/CsBtn').default,
        },

        mixins: [
            require('@CsVueMix/Forminput/Forminput')
        ],

        name: 'CustomerRegisterCopy',
    }
</script>