<template>
    <v-card
        :width="width"
        :height="height"
    >
        <v-card-title class="pa-1">
            <v-toolbar-items>
                <v-img 
                    :src="$url + 'imgs/icons/' + icon + '.png'"
                    height="44"
                    width="44"
                >
                </v-img>
            </v-toolbar-items>

           {{ __(':title. Proprietăți', {title}) }}

            <v-spacer></v-spacer>

            <cs-btn 
                icon="mdi-close"
                :click="() => $emit('close')"
            />
        </v-card-title>

        <v-sheet
            :height="height - 52 - 38"
            width="100%"
            class="overflow-x-hidden overflow-y-auto"
        >
            <v-card-text class="px-2 py-1">
                <cs-record-attribute 
                    :item="file"
                    caption="Denumire"
                    :attribute="item => item.file_original_name"
                    justify="center"
                    :htmlClass="htmlClass"
                    :widths="widths"
                    class="mb-2"
                />

                <cs-record-attribute 
                    :item="file"
                    caption="Client"
                    attribute="file-customer"
                    justify="center"
                    :htmlClass="htmlClass"
                    :widths="widths"
                    class="mb-2"
                />

                <cs-record-attribute 
                    :item="file"
                    caption="Tip"
                    attribute="file-type"
                    justify="center"
                    :htmlClass="htmlClass"
                    :widths="widths"
                    class="mb-2"
                />

                <cs-record-attribute 
                    :item="file"
                    caption="Creat"
                    attribute="file-created"
                    justify="center"
                    :htmlClass="htmlClass"
                    :widths="widths"
                    class="mb-2"
                />

                <cs-record-attribute 
                    :item="file"
                    caption="Status"
                    attribute="file-status"
                    justify="center"
                    :htmlClass="htmlClass"
                    :widths="widths"
                    class="mb-2"
                />

                <cs-record-attribute 
                    v-if="false"
                    :item="file"
                    caption="URL"
                    :attribute="item => item.url"
                    justify="center"
                    :htmlClass="htmlClass"
                    :widths="widths"
                    class="mb-2"
                />
                
            </v-card-text>
        </v-sheet>
        
        <v-divider></v-divider>

        <v-card-actions class="pa-1 justify-center">
            <cs-btn 
                caption="OK"
                outlined
                :click="() => $emit('close')"
            />
        </v-card-actions>
    </v-card>
</template>

<script>
    export default {
        props: {
            app: {required: true},
            width: {default: 640},
            height: {default: 400},
            htmlClass: {default: () => ['text-right px-1', 'px-1 text-left']},
            widths: {default: () => ['35%', '65%']},
        },

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

            file() {
                return this.uploader.activeFileManager.selectedFile;
            },

            icon() {
                if(this.uploader.type == 'documente')
                {
                    return 'document';
                }

                if(this.uploader.type == 'studiicaz')
                {
                    return 'studii-de-caz';
                }

                if(this.uploader.type == 'sfaturidpo')
                {
                    return 'sfaturile-dpo';
                }

                if(this.uploader.type == 'infografice')
                {
                    return 'infografice';
                }
            },

            title() {
                if(this.uploader.type == 'documente')
                {
                    return 'Documente și proceduri';
                }

                if(this.uploader.type == 'studiicaz')
                {
                    return 'Studii de caz';
                }

                if(this.uploader.type == 'sfaturidpo')
                {
                    return 'Sfaturile DPO';
                }

                if(this.uploader.type == 'infografice')
                {
                    return 'Infografice';
                }
            }
        },

        components: {
            CsBtn: require('@CsVueComp/buttons/CsBtn').default,
            CsRecordAttribute: require('@CsVueComp/sheets/CsRecordAttribute').default,
        },
        
        name: 'FileProperties',
    }
</script>