<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="width"
            :height="height"
        >
            <v-card-title>
                {{ __('Schimbare status fișiere selectate') }}
                <v-spacer></v-spacer>

                <cs-btn 
                    icon="mdi-close"
                    :click="() => menu.visible = false"
                />
            </v-card-title>

            <v-card-text>
                <v-radio-group
                    v-model="newStatus"
                    dense
                    hide-details
                    class="ma-0"
                    :label="__('Alegeți statusul pentru cele :x fișiere selectate', {
                        x: selectedFiles.length,
                    })"
                >
                    <v-radio
                        v-for="(status, index) in fileStatuses"
                        :key="'index-' + index"
                        :label="status.text"
                        :value="status.value"
                    >
                    </v-radio>
                </v-radio-group>
            </v-card-text>
   
            <v-divider></v-divider>

            <v-card-actions>
                <cs-btn 
                    color="bg-dark-blue"
                    caption="Schimbă"
                    outlined
                    :click="OnClickChange"
                    :disabled="! newStatus"
                />

                <v-spacer></v-spacer>
                
                <cs-btn-cancel 
                    :click="() => menu.visible = false"
                />
            </v-card-actions>
        </v-card>
                
    </v-menu>
</template>

<script>
    export default {
        props: {
            app: {required: true},
            menu: {required: true},
            width: {default: 420},
            height: {default: 215},
        },

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

        computed: {

            uploader() {
                return this.app.classes.Customeruploader;
            },

            customer() {
                return this.uploader.customer;
            },
            
            selectedFiles() {
                return this.uploader.selectedFilesManager.selectedFiles;
            },

            request() {
                return this.app.requests.Changefilestatus;
            },

            dataprovider() {
                return this.app.dataSession.Customerfolders;
            },

            fileStatuses() {
                let r = _.filter(this.$config.material_statuses, item => item.at_documente);
                return _.map(r, item => {
                    return {
                        value: item.slug,
                        text: item.name
                    }
                })
            }
        },

        methods: {
            OnClickChange() {
                let data = {
                    files: this.selectedFiles,
                    status: this.newStatus,
                }
                this.request
                    .ResetData()
                    .SetData(data)
                    .Post([
                        response => {                            
                            this.menu.visible = false;
                            this.app.formproviders.Files.RefreshFolder(this.uploader.activeFolderManager.selectedFolder.id)
                        }
                    ]);
            }
        },

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

        name: 'FilesChangeStatusMenu',
    }
</script>