<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"
            :disabled="disabled"
        >
            <v-card-title>
                {{ __('Fișiere atașate cursului') }}
            </v-card-title>

            <v-divider></v-divider>

            <v-sheet
                :height="height"
                class="overflow-y-auto"
            >
                <v-card-text class="pa-1">
                    <data-table 
                        :app="app"
                        :dataprovider="app.dataSession.Customercursurifiles"
                        :datatable="app.datatables.Cursurifiles"
                        :height="height - 8"
                        :width="width"
                        :dtWidth="app.datatables.Cursurifiles.datatableWidth"
                    />
                </v-card-text>
            </v-sheet>

            <v-divider></v-divider>

            <v-card-actions>

                <cs-btn 
                    caption="Atașează"
                    icon="mdi-upload"
                    color="primary"
                    tooltip="Atașează alte fișiere la curs"
                    @click="OnClickShowUploadForm"
                />

                <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: 800},
            height: {default: 460},
            disabled: {default: false},
        },

        watch: {
            'menu.visible': function() {
                if(this.menu.visible)
                {
                    this.LoadCursuri();
                }
            }
        },

        methods: {
            OnClickShowUploadForm(e) {
                this.app.classes.Cursuri.uploadfilemenu.x = e.clientX;
                this.app.classes.Cursuri.uploadfilemenu.y = e.clientY;
                this.app.classes.Cursuri.uploadfilemenu.visible = true;
                this.app.payload.customer_curs_id = this.menu.customercurs.id;
            },

            LoadCursuri() {
                this.app.dataSession.Customercursurifiles.GetByCustomerCursId(this.menu.customercurs.id);
            },

            OnClickCancel() {
                this.menu.visible = false;
                this.app.dataSession.Cursuriatasate.GetByCustomerId(this.app.payload.customer_id);
            }
        },

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

        name: 'CursFilesMenu'
    }
</script>