<template>
    <div class="main">
        <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 class="rightNav">
                <el-select v-show="currentIsFiLe" class="timer-select" v-model="timeSelect" placeholder="请选择">
                    <el-option
                        v-for="item in termOptions"
                        :key="item.ID"
                        :label="item.TeamName"
                        :value="item.ID">
                    </el-option>
                </el-select>
                <search></search>
            </div>
        </div>
        <div class="folderCtn">
            <div class="smallCtn">
                <small-folder
                    :file-list="currentFileList"
                    :currentIsFiLe="currentIsFiLe"
                    :pagination-query="paginationQuery"
                    @tableIntoFile="intoFolder"
                    @getSizeChange="handleSizeChange"
                    @getCurrentPage="handleCurrentChange"
                    >
                </small-folder>
            </div>
        </div>

        <!-- 侧滑块查看普通文档 -->
        <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: 'ResourcesInSchoold',
    components: {
        Search: () => import('./../myResources/components/Search'),
        SmallFolder: () => import('./../myResources/components/SmallFolder')
    },
    data () {
        return {
            timeSelect: 'allItem', // 学期选择框数据
            termOptions: [{ // 学期选择options
                value: 'allItem',
                label: '全部学期'
            }],
            documentDrawer: false, // 查看文档抽屉
            currentIsFiLe: false, // 当前层次是否为文档列表
            currentFileList: [],
            selectFolderVisible: false, // 查看文件侧滑框
            breadcrumb: [], // 面包屑
            documentUrl: '', // 文档在线地址
            paginationQuery: { // 分页信息
                amount: 0,
                pageSize: 20,
                pageIndex: 1
            }
        }
    },
    mounted () {
        this.getFolderList()
        this.getTermList()
    },
    watch: {
    },
    methods: {
        getFolderList () {
            this.$api.schoolBasedResourcesApi.getSchoolResourceFolderList().then(res => {
                this.$handleResponse(res).then(data => {
                    this.initFromBreadcrumb(data)
                })
            })
        },
        getTermList () {
            /* 获取学期列表 */
            this.$api.commonApi.getTermInfoList().then(res => {
                this.$handleResponse(res).then(data => {
                    this.termOptions = data
                    this.timeSelect = data[0].ID
                })
            })
        },
        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) {
            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
                }
            }
        },
        handleSizeChange (val) {
            this.paginationQuery.pageSize = val
            this.getFileList(this.breadcrumb[this.breadcrumb.length - 1].parent)
        },
        handleCurrentChange (val) {
            this.paginationQuery.pageIndex = val
            this.getFileList(this.breadcrumb[this.breadcrumb.length - 1].parent)
        }
    }
}
</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;

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

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

            }
        }

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

    .folderCtn{
        min-height: 500px;

        .smallCtn {
            width: 100%;
        }
    }

}

</style>
