<template>
    <div class="main">
        <div class="headerNav">
            <div class="leftNav">
                <span class="type-title">类型:</span>
                <el-radio-group v-model="folderType" size="small" @change="folderTypeChange">
                    <el-radio-button :label="0">全部</el-radio-button>
                    <el-radio-button :label="1">我收藏的</el-radio-button>
                    <el-radio-button :label="2">我分享的</el-radio-button>
                    <el-radio-button :label="3">分享给我的</el-radio-button>
                </el-radio-group>
            </div>
            <div class="rightNav">
                <el-select class="timer-select" v-model="timeSelect" placeholder="请选择">
                    <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
                <search></search>
            </div>
        </div>

        <div class="folderCtn">
            <div class="smallCtn">
                <small-folder
                    :file-list="currentFileList"
                    :mode="'favor'"
                    @showMenu="showMenu"
                    @tableIntoFile="intoFolder">
                </small-folder>
            </div>
        </div>

        <favorshare-ctx-menu
            :menuVisible="menuVisible"
            :rightMenuData="rightMenuData"
            :coordinate="coordinate"
            :menuMode="menuMode"
            @menuOpenFile="intoFolder">
        </favorshare-ctx-menu>

        <!-- 侧滑块查看普通文档 -->
        <el-drawer
            title="查看"
            :visible.sync="documentDrawer"
            :size="'60%'">
            <span>文档内容</span>
        </el-drawer>
    </div>
</template>

<script>

export default {
    name: 'FavorShare',
    components: {
        Search: () => import('./components/Search'),
        SmallFolder: () => import('./components/SmallFolder'),
        FavorshareCtxMenu: () => import('./components/FavorshareCtxMenu')
    },
    data () {
        return {
            folderType: 0, // 文件类型（文件类型（0: 全部，1: 我收藏的，2: 我分享的, 3: 分享给我的 ））
            timeSelect: 'allItem', // 学期选择框数据
            menuMode: '', // 菜单根据模式显示对于内容
            menuVisible: false, // 右键菜单栏
            rightMenuData: {}, // 右键选中文件夹或文件数据
            documentDrawer: false, // 查看文档抽屉
            coordinate: { // 菜单栏坐标
                menuX: '0px',
                menuY: '0px'
            },
            options: [{
                value: 'allItem',
                label: '全部学期'
            }],
            currentFileList: [],
            fileListData: []
            // {
            //     id: 1201,
            //     name: '我收藏的.docx',
            //     typeName: '我收藏的',
            //     type: 'myFavor',
            //     icon: 'el-icon-document',
            //     descript: '我上传了10个文档',
            //     isFocus: false,
            //     isFolder: false,
            //     nextIsFolder: false,
            //     uploadCount: '10',
            //     author: '张三',
            //     updateTime: '2020-08-22 12:00'
            // },
            // {
            //     id: 1202,
            //     name: '我分享的.docx',
            //     typeName: '我分享的',
            //     type: 'myShare',
            //     icon: 'el-icon-document',
            //     descript: '我上传了10个文档',
            //     isFocus: false,
            //     isFolder: false,
            //     nextIsFolder: false,
            //     uploadCount: '10',
            //     author: '张三',
            //     updateTime: '2020-08-22 12:00'
            // },
            // {
            //     id: 1203,
            //     name: '分享给我的.docx',
            //     typeName: '分享给我的',
            //     type: 'shareMe',
            //     icon: 'el-icon-document',
            //     descript: '我上传了10个文档',
            //     isFocus: false,
            //     isFolder: false,
            //     nextIsFolder: false,
            //     uploadCount: '10',
            //     author: '张三',
            //     updateTime: '2020-08-22 12:00'
            // }

        }
    },
    mounted () {
        this.folderType = 0
        // this.currentFileList = this.fileListData
        this.getFileList(this.folderType)
    },
    methods: {
        getFileList (folderType) {
            /* 获取文档列表 */
            let data = {
                data: { sel_type: folderType },
                PageSize: 50,
                PageNumber: 1
            }
            this.$api.schoolBasedResourcesApi.GetCollectShareList(data).then(res => {
                this.$handleResponse(res).then(data => {
                    this.currentFileList = data.Data
                })
            })
        },
        folderTypeChange (value) {
            this.getFileList(value)
            // if (value === 'all') {
            //     this.currentFileList = this.fileListData
            // } else {
            //     let fileList = []
            //     for (let i = 0; i < this.fileListData.length; i++) {
            //         if (this.fileListData[i].type === value) {
            //             fileList.push(this.fileListData[i])
            //         }
            //     }
            //     this.currentFileList = fileList
            // }
        },
        intoFolder (file) {
            /* 打开文件 */
            this.documentDrawer = true
        },
        showMenu (MouseEvent, type, row) {
            /* 右键文件夹或文件时触发 */
            this.menuMode = type
            this.rightMenuData = row
            this.menuVisible = false
            this.menuVisible = true
            let coordinate = this.coordinate
            coordinate.menuX = MouseEvent.pageX + 5 + 'px'
            coordinate.menuY = MouseEvent.pageY + 'px'
            document.addEventListener('click', this.foo) // 给整个document添加监听鼠标事件，点击任何位置执行foo方法
        },
        foo () {
            /* 取消鼠标监听事件 菜单栏 */
            this.menuVisible = false
            this.uploadVisible = false
            document.removeEventListener('click', this.foo) // 关掉监听
        }
    }
}
</script>

<style lang="less" scoped>
.main {
    min-height: 100%;

    .headerNav {
        display: flex;
        justify-content: space-between;
        height: 45px;
        line-height: 45px;
        background: #e7e7e7;

        /deep/ .leftNav {
            padding: 0 20px;
            font-size: 18px;

            .type-title {
                color: rgb(48, 48, 48);
            }

            .el-radio-group {
                vertical-align: middle;
                margin-bottom: 3px;

                .el-radio-button {
                    margin: 0 5px;

                    .el-radio-button__inner {
                        border-radius: 25px;
                    }
                }
            }
        }

        /deep/ .rightNav {
            padding: 0 30px;
            display: flex;
            .timer-select{
                padding-top: 1px;
                margin-right: 15px;
            }
        }
    }
}

</style>
