<template>
    <v-sheet
        width="100%"
        class="d-flex align-center clickable transparent text-caption mb-1"
        :class="{
            'orange lighten-4 rounded': isActive
        }"
        @click="OnClickFile"
        @contextmenu="OnRightClick"
    >
        <v-sheet width="24" class="transparent">
            <file-icon 
                :file="file"
                width="24"
                :maxHeight="null"
            />
        </v-sheet>

        <v-sheet width="28" class="transparent">
            <v-checkbox
                dense
                hide-details
                color="#0d1c45"
                :false-value="false"
                :true-value="true"
                v-model="isSelected"
                class="ma-0 pa-0"
            >
            </v-checkbox>
        </v-sheet>

        <v-sheet class="transparent" :width="nameWidth">
            {{ file.file_original_name }}
        </v-sheet>

        <v-sheet 
            v-if="uploader.panel != 'folders-panel'"
            width="240" 
            class="text-left transparent orange--text text--darken-3 d-flex align-center text-truncate" 
            :title="__(file.folder.name.trim())"
        >
            <v-icon small color="orange darken-3">
                mdi-folder-outline
            </v-icon>
            {{ __(file.folder.name.trim()) }}
        </v-sheet>

        <v-sheet width="36" class="text-left transparent">
            <file-status-menu 
                :app="app"
                :file="file"
                :disabled="! canChangeStatus"
                @status-changed="OnStatusChanged"
            />
        </v-sheet>

        <v-sheet width="140" class="text-left text-truncate transparent">
            {{ user }}
        </v-sheet>

        <v-sheet width="140" class="text-left transparent">
            {{ ToDateTime(file.updated_at ? file.updated_at : file.created_at) }}
        </v-sheet>

        <v-sheet width="90" class="text-left transparent">
            {{ app.config.platforms[file.platform] }}
        </v-sheet>

    </v-sheet>
</template>

<script>

    export default {
        props: {
            uploader: {required: true},
            file: {required: true}
        },

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

            canChangeStatus() {
                return this.app.Can(this.uploader.permission + '.files.change-status');
            },

            nameWidth() {
                let w = 24 + 28 + 36 + 140 + 140 + 90;
                if(this.uploader.panel != 'folders-panel')
                {
                    w += 240;
                }
                return 'calc(100% - ' + w + 'px)';
            },

            isSelected: {
                get: function() {
                    let r = _.find(this.selectedFiles, id => id == this.file.id);
                    return r != undefined;
                },

                set: function(checked) {
                    this.uploader.selectedFilesManager.CheckFile(this.file.id, checked);
                }
            },

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

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

            isActive() {
                return this.activeFile && (this.activeFile.id == this.file.id);
            },

            users() {
                return this.app.dataSession.Users.usersPluckById;
            },

            user() {
                let user_id = this.file.updated_by ? this.file.updated_by : this.file.created_by;
                return _.has(this.users, user_id) ? this.users[user_id].full_name : '';
            }
        },

        methods: {
            OnStatusChanged(e) {
                alert('OnStatusChanged');
                // let status = _.find(this.app.config.material_statuses, item => item.slug == e.status);
                // this.file.mystatus = {...status}
                // this.file.status = e.status;
            },

            OnRightClick(e) {
                this.app.menus.Filerightmenu.ShowRightMenu(e, this.file);
            },

            OnClickFile() {
                this.uploader.activeFileManager.SetActiveFile(this.file);
            }
        },

        name: 'FilesListFilesItem',
    }
</script>