<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="300">
            <v-card-title>
                {{ __('Vizibilitate rând') }}
            </v-card-title>

            <v-divider></v-divider>

            <v-card-text class="my-2">
                <v-alert type="info" outlined>
                    {{ __('Setați vizibilitatea rândului') }}
                </v-alert>

                <v-row dense>
                    <v-col cols="12">
                        <v-radio-group
                            dense
                            hide-details
                            outlined
                            v-model="status"
                        >
                            <v-radio
                                v-for="(option, index) in items"
                                :key="'option-' + index"
                                :value="option.value"
                                :label="option.text"
                            >
                            </v-radio>
                            
                        </v-radio-group>
                    </v-col>
                </v-row>
            </v-card-text>

            <v-divider></v-divider>

            <v-card-actions>
                <cs-btn 
                    caption="Salvează"
                    icon="mdi-content-save"
                    color="primary"
                    outlined
                    tooltip="Confirmă salvarea"
                    :loading="app.requests.Rowchangestatus.processing"
                    :disabled="app.requests.Rowchangestatus.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},
            items: {default: () => ([
                {
                    text: 'Public',
                    value: 'public',
                },
                {
                    text: 'Privat',
                    value: 'protected',
                }
            ])},
        },

        data: () => ({
            status: null,
        }),

        methods: {
            OnClickSave() {
                this.app.requests.Rowchangestatus.ResetData().SetData(
                    {
                        row_id: this.menu.row_id,
                        status: this.status,
                    }
                ).Request([
                    response => {

                        let registru = {...this.app.classes.Customerregistru.activeRegistru};

                        this.app.dataSession.Registrelemele.GetByCustomerIdAndRegistruId(this.app.payload.customer_id, this.app.payload.registru_id);

                        let i = setInterval( () => {

                            if(! this.app.dataSession.Registrelemele.processing )
                            {
                                clearInterval(i);

                                let item = _.find(this.app.dataSession.Registrelemele.items, item => item.id == registru.id);
                                this.app.classes.Customerregistru.activeRegistru = item;

                                this.OnClickCancel();
                            }
                        }, 350);
                        
                    }
                ])
            },

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

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

        created() {
            this.status = this.menu.status;
        },

        name: 'ChangeRowStatus',
    }
</script>