<template>
    <div class="container">
        <v-header :title="'校本资源设置'" :is-show-prev-page="false"></v-header>
        <div class="headerNav">
            <div class="leftNav">
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item
                        v-for="(breadcrumbItem, index) of breadcrumb"
                        :key="index"
                        @click.native="backCrumb(index)">
                            {{ breadcrumbItem.label }}
                    </el-breadcrumb-item>
                </el-breadcrumb>
            </div>
        </div>

        <div class="folderCtn" @contextmenu.prevent="showMenu">
            <div class="smallCtn">
                <small-folder
                    :file-list="currentFileList"
                    :currentIsFiLe="currentIsFiLe"
                    :manage-mode="true"
                    :mode="'school'"
                    @showMenu="showMenu"
                    @tableIntoFile="intoFolder">
                </small-folder>
            </div>
        </div>

        <!-- 右键菜单栏 -->
        <manage-ctx-menu
            ref="contextMenu"
            :menuVisible="menuVisible"
            :rightMenuData="rightMenuData"
            :currentIsFiLe="currentIsFiLe"
            :coordinate="coordinate"
            :menuMode="menuMode"
            @menuOpenFile="intoFolder"
            @createOrUpdateFolder="createOrUpdateFolder"
            @handleDeleteFolder="handleDeleteSchoolFolder">
        </manage-ctx-menu>

        <!-- 侧滑块查看普通文档 -->
        <el-drawer
            title="查看"
            :visible.sync="documentDrawer"
            :size="'80%'">
            <iframe :src="documentUrl" width="100%" height= "100%" name="topFrame" noresize="noresize" frameborder="0" id="topFrame"></iframe>
        </el-drawer>
        <button v-show="false" ref="btn" @click="currentIsFiLe = true">设置当前页面为文件模式</button>
    </div>
</template>

<script>
export default {
    name: 'Index',
    components: {
        SmallFolder: () => import('./../myResources/components/SmallFolder'),
        ManageCtxMenu: () => import('./components/ManageCtxMenu'),
        VHeader: () => import('@/common/header/VHeader')
    },
    data () {
        return {
            menuVisible: false, // 右键菜单栏
            menuMode: '', // 菜单根据模式显示对于内容
            rightMenuData: {}, // 右键选中文件夹或文件数据
            currentIsFiLe: false, // 当前层次是否为文档列表
            coordinate: { // 菜单栏坐标
                menuX: '0px',
                menuY: '0px'
            },
            breadcrumb: [],
            currentFileList: [],
            documentUrl: '', // 文档在线地址
            documentDrawer: false, // 查看文档抽屉
            paginationQuery: { // 分页信息
                amount: 0,
                pageSize: 50,
                pageIndex: 1
            }
        }
    },
    mounted () {
        this.getFolderList()
    },
    methods: {
        getFolderList () {
            this.$api.schoolBasedResourcesApi.GetSchoolFolderList().then(res => {
                this.$handleResponse(res).then(data => {
                    this.initFromBreadcrumb(data)
                })
            })
        },
        initFromBreadcrumb (data) {
            /* 通过面包屑初始化数据 */
            this.currentIsFile = false
            let breadcrumb = this.breadcrumb
            if (breadcrumb.length <= 1) {
                this.breadcrumb = [{ label: '首页', listData: data, parent: { b_id: '0', parent_id: '0' }, currentIsFiLe: false }]
                this.currentFileList = data
            } else {
                let newBreadcrumb = [{ label: '首页', listData: data, parent: { b_id: '0', parent_id: '0' }, currentIsFiLe: false }]
                let currentList = data
                for (let i = 1; i < breadcrumb.length; i++) {
                    let hasThisFile = false
                    for (let j = 0; j < currentList.length; j++) {
                        if (currentList[j].b_id === breadcrumb[i].parent.b_id) {
                            let isFile = (!currentList[j].children || currentList[j].children.length === 0) && currentList[j].file_count > 0
                            this.currentIsFile = isFile
                            this.addCrumb(newBreadcrumb, currentList[j], isFile)
                            if (isFile) {
                                this.getFileList(currentList[j])
                            } else {
                                currentList = currentList[j].children
                            }
                            hasThisFile = true
                            break
                        }
                    }
                    if (hasThisFile === false) {
                        break
                    }
                }
                this.breadcrumb = newBreadcrumb
                if (!this.currentIsFile) {
                    this.currentFileList = currentList
                }
            }
        },
        getFileList (file) {
            /* 根据文件夹ID获取对应文件列表 */
            this.$refs.btn.click()
            const folderId = file.b_id
            const selType = file.folder_type
            let data = {
                data: { folder_id: folderId, sel_type: selType },
                PageSize: this.paginationQuery.pageSize,
                PageNumber: this.paginationQuery.pageIndex
            }
            this.$api.schoolBasedResourcesApi.GetFileList(data).then(res => {
                this.$handleResponse(res).then(data => {
                    this.currentFileList = data.Data
                    this.paginationQuery.amount = data.TotalRecords
                })
            })
        },
        backCrumb (index) {
            /* 点击面包屑返回前几级 */
            let breadcrumb = this.breadcrumb
            let item = breadcrumb[index]
            this.currentIsFiLe = false
            if (index < breadcrumb.length - 1) {
                this.currentFileList = item.listData
                this.breadcrumb = breadcrumb.slice(0, index + 1)
            }
        },
        addCrumb (breadcrumb, file, currentIsFiLe) {
            /* 添加面包屑 */
            breadcrumb.push({ label: file.folder_name, listData: file.children, parent: file, currentIsFiLe })
        },
        intoFolder (file) {
            /* 进入下一级文件夹 */
            if ((file.children && file.children.length > 0 && this.currentIsFiLe === false) || (file.file_count === 0 && this.breadcrumb.length < 3)) {
                // 进入文件夹
                this.currentIsFiLe = false
                this.addCrumb(this.breadcrumb, file, this.currentIsFiLe)
                this.currentFileList = file.children || []
            } else {
                // 获取当前文件夹的文档列表
                if (this.currentIsFiLe === false) {
                    this.currentIsFiLe = true
                    this.addCrumb(this.breadcrumb, file, this.currentIsFiLe)
                    this.getFileList(file)
                } else {
                    let url = 'https://onlinepreview.vschool100.cn/onlinePreview?url=' + encodeURIComponent(file.file_path)
                    this.documentUrl = url
                    this.documentDrawer = true
                }
            }
        },
        createOrUpdateFolder (params) {
            /* 新增编辑学校文件夹 */
            this.$api.schoolBasedResourcesApi.createOrUpdateSchool(params).then(res => {
                if (res.data.Status === true) {
                    this.$message({
                        message: '操作成功',
                        type: 'success'
                    })
                    this.$refs.contextMenu.newFolderVisible = false
                    this.getFolderList()
                } else {
                    this.$message({
                        message: res.data.ResponseError.LongMessage,
                        type: 'error'
                    })
                }
            })
        },
        handleDeleteSchoolFolder (params) {
            this.$api.schoolBasedResourcesApi.deleteSchoolFolder(params).then(res => {
                if (res.data.Status === true) {
                    this.$message({
                        message: '删除成功',
                        type: 'success'
                    })
                    this.$refs.contextMenu.deleteVisible = false
                    this.getFolderList()
                } else {
                    this.$message({
                        message: res.data.ResponseError.LongMessage,
                        type: 'error'
                    })
                }
            })
        },
        showMenu (MouseEvent, currentIsFiLe, row) {
            /* 右键文件夹或文件时触发 */
            if (row) {
                // 右键文件夹或者文件
                if (currentIsFiLe) {
                    this.menuMode = ''
                } else {
                    this.menuMode = 'personal'
                }
                this.rightMenuData = row
                console.log(111111111111, this.rightMenuData)
                // this.rightMenuFolder = []
            } else {
                // 右键空白处
                this.menuMode = 'blank'
                this.rightMenuData = this.breadcrumb[this.breadcrumb.length - 1].parent
                console.log(22222222, this.rightMenuData)
            }
            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>
.container {
    .headerNav {
        display: flex;
        justify-content: space-between;
        height: 45px;
        line-height: 45px;
        background: #e7e7e7;

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

            .el-breadcrumb {
                font-size: 18px;
                line-height: 45px;
                .el-breadcrumb__item {
                    &:not(:last-child) .el-breadcrumb__inner{
                        cursor: pointer;
                        &:hover {
                            color: #1890FF;
                        }
                    }

                    &:last-child .el-breadcrumb__inner{
                        color: black;
                    }
                }

            }
        }
    }

    .folderCtn{
        min-height: 500px;
    }
}

</style>
