<template>
  <div class="container">
        <div id="drop_area" class="file-item" v-for="file of fileList" :key="file.id">
            <div
                tabindex="0" hidefocus="true"
                class="folderCtn" @contextmenu.prevent.stop="contextMenu($event,file)"
                @dblclick="intoFolder(file)"
                @dragenter.stop.prevent="borderHover = true"
                @dragleave.stop.prevent="borderHover = false"
                @dragover.stop.prevent="borderHover = true"
                @drop.stop.prevent="fileDrop($event,file)">
                    <div class="types">{{ foderTypeOptions[file.folder_type]}}</div>
                    <i :class="fileIcon" class="file-icon"></i>
                    <h4 class="folder-name">{{ file.folder_name }}</h4>
                    <h6 class="descript" v-if="descriptType === 1">{{ '我管理的：共有' + file.file_count + '个文档' }}</h6>
                    <h6 class="descript" v-else>{{ '我上传了' + file.file_count + '个文档' }}</h6>
            </div>
        </div>
  </div>
</template>

<script>
export default {
    name: 'BigFolder',
    props: {
        fileList: {
            type: Array,
            default: () => {
                return []
            }
        },
        foderType: {
            type: Number,
            default: 1
        },
        fileIcon: {
            type: String,
            default: 'el-icon-folder'
        },
        descriptType: { // 文件描述用那种类型
            type: Number,
            default: 1
        }
    },
    computed: {
        foderTypeOptions () {
            /* 根据foderType来判断显示哪种options */
            const schoolType = { 1: '学校文件夹', 2: '个人文件夹' }
            const taskType = { 1: '常规文件夹', 2: '任务文件夹' }
            return this.foderType === 1 ? schoolType : taskType
        }
    },
    data () {
        return {
            borderHover: false // 拖拽区域显示样式
        }
    },
    mounted () {
    },
    methods: {
        contextMenu (MouseEvent, file) {
            let type = file.type
            let row = file
            this.$emit('showMenu', MouseEvent, type, row)
        },
        intoFolder (file) {
            this.$emit('intoFolder', file)
        },
        fileDrop (event, file) {
            this.borderHover = false
            let fileData = event.dataTransfer.files
            let row = file
            this.$emit('dragUploadFile', fileData, row)
        }
    }
}
</script>

<style lang="less" scoped>
.container {
    display: flex;
    flex-wrap: wrap;
    padding: 15px;
    .file-item {
        .folderCtn {
            position: relative;
            text-align: center;
            width: 260px;
            height: 200px;
            margin: 10px;
            border: 1px solid #D7D7D7;
            cursor: pointer;
            &:hover {
                border: 1px solid #1890FF;
            }
            &:focus {
                border: 1px solid #1890FF;
            }
            &:active {
                opacity: 0.7;
            }

            .types {
                position: absolute;
                top: 0;
                left: 0;
                background: #F2F2F2;
                color: #7F7F7F;
                font-size: 5px;
                padding: 2px 4px;
            }

            .file-icon {
                font-size: 80px;
                margin-top: 30px;
            }

            .folder-name {
                font-size: 17px;
                color: #333333;
                margin-bottom: 7px;
            }

            .descript {
                font-size: 11px;
                color: #7F7F7F;
            }
        }

    }
}
</style>
