<template>
    <v-menu
        v-model="menu.visible"
        :position-x="menu.x"
        :position-y="menu.y"
        absolute
        offset-y
        :close-on-content-click="false"
        :close-on-click="false"
    >
        <v-card
            tile
            flat
            :width="width"
        >
            <v-card-title>
                {{ __('Schimbare status') }}
            </v-card-title>

            <v-divider></v-divider>

            <v-card-text v-if="usercurs">
                <v-radio-group 
                    hide-details
                    dense
                    :row="false"
                    :disabled="false"
                    class="my-0"
                    
                    v-model="usercurs.status"
                >
                    <v-radio
                        v-for="(item, index) in statuses"
                        :key="'item-' + index"
                        :value="item.value"
                    >
                        <template #label>
                            <v-chip
                                :color="item.color"
                                small
                                outlined
                            >
                                {{__(item.text)}}
                            </v-chip>
                        </template>
                    </v-radio>
                </v-radio-group>
            </v-card-text>

            <v-divider></v-divider>

            <v-card-actions>
                <cs-btn 
                    caption="Schimbă"
                    icon="mdi-content-save"
                    color="primary"
                    @click="OnClickSave"
                />

                <v-spacer></v-spacer>

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

<script>
    export default {
        props: {
            app: {required: true},
            menu: {required: true},
            width: {default: 400},
            height: {default: 300},
            statuses: {default: () => ([
                {
                    value: 'sended',
                    text: 'Neînceput',
                    color: 'red',
                },

                {
                    value: 'started',
                    text: 'În desfășurare',
                    color: 'orange',
                },

                {
                    value: 'done',
                    text: 'Finalizat',
                    color: 'green',
                },
            ])}
        },

        computed: {
            usercurs() {
                return this.menu.curs;
            }
        },

        methods: {
            OnClickSave() {
                this.app.requests.Customercursurichangestatus.ResetData().SetData({
                    id: this.usercurs.id,
                    status: this.usercurs.status,
                }).Request([
                    response => {
                        let status = null;
                        if(this.app.classes.Cursuri.current_filter != 'all')
                        {
                            status = this.app.classes.Cursuri.current_filter;
                        }
                        this.app.classes.Cursuri.GetCustomerusercursuricounter(status);
                        this.menu.visible = false;
                        this.menu.curs = null;
                    }
                ])
            },

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

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

        name: 'CursPreviewMenu'
    }
</script>