<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>
            <v-card-title>
                {{ __('Sortarea fișierelor') }}
            </v-card-title>

            <v-card-text>
                <v-row dense>
                    <v-col cols="12">
                        <v-radio-group 
                            hide-details
                            dense
                            :row="false"
                            :label="__('Criteriul de sortare')"
                            class="my-0"
                            v-model="orderManager.orderByField"
                        >
                            <v-radio
                                v-for="(item, index) in orderByFields"
                                :key="'item-' + index"
                                :label="__(item.text)"
                                :value="item.value"
                            >
                            </v-radio>
                        </v-radio-group>
                    </v-col>

                    <v-col cols="12">
                        <v-radio-group 
                            hide-details
                            dense
                            :row="false"
                            class="my-0"
                            :label="__('Direcția de sortare')"
                            v-model="orderManager.orderByDirection"
                        >
                            <v-radio
                                v-for="(item, index) in orderByDirections"
                                :key="'item-' + index"
                                :label="__(item.text)"
                                :value="item.value"
                            >
                            </v-radio>
                        </v-radio-group>
                    </v-col>
                </v-row>
            </v-card-text>

            <v-card-actions class="justify-center">
                <cs-btn 
                    outlined
                    caption="OK"
                    :click="() => menu.visible = false"
                />
            </v-card-actions>
        </v-card>
    </v-menu>
</template>

<script>
    export default {
        props: {
            app: {required: true},
            menu: {required: true},
            disabled: {default: false},
        },

        computed: {

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

            orderManager() {
                return this.uploader.orderFilesManager;
            },

            caption() {
                return _.isFunction(this.menu.caption) ? this.menu.caption() : this.menu.caption;
            },

            orderByFields() {
                return this.orderManager.fields;
            },

            orderByDirections() {
                return this.orderManager.directions;
            }
        },

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

        name: 'FilesOrderMenu',
    }
</script>