<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(breadcrumbItem, index)">
                            {{ breadcrumbItem.label }}
                    </el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <div class="rightNav" v-show="material.isMaterial">
                <el-select 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>
            </div>
        </div>

        <!-- 资料列表显示页面 -->
        <material v-if="material.isMaterial" :taskMode="material.taskMode" :list-data="material.materialData" @getMaterialFile="getMaterialFile"></material>

        <!-- 文件夹选择显示页面 -->
        <div v-else class="folder-mode">
            <big-folder
                :file-list="currentFileList"
                :foder-type="2"
                @intoFolder="intoFolder">
            </big-folder>
        </div>
    </div>
</template>

<script>

export default {
    name: 'MyManage',
    components: {
        BigFolder: () => import('./components/BigFolder'),
        Material: () => import('./components/Material')
    },
    data () {
        return {
            breadcrumb: [], // 面包屑
            // isFileMode: false, // 是否资料列表页面
            timeSelect: 'allItem', // 学期选择框数据
            termOptions: [{ // 学期选择options
                value: 'allItem',
                label: '全部学期'
            }],
            currentFileList: [],
            fileListData: [],
            material: {
                isMaterial: false, // 是否为资料页面，true为文件夹，false为资料页面
                materialData: [], // 资料列表数据
                taskMode: false, // 是否为任务夹模式, fasle为常规，true为任务
                folderId: ''
            }
        }
    },
    mounted () {
        this.getFolderList()
        this.getTermList()
    },
    watch: {
    },
    methods: {
        getFolderList () {
            this.$api.schoolBasedResourcesApi.GetMyManageFolderList().then(res => {
                this.$handleResponse(res).then(data => {
                    this.fileListData = data
                    this.currentFileList = data
                    this.breadcrumb = [{ label: '首页', listData: data, isMaterial: false }]
                })
            })
        },
        getTermList () {
            /* 获取学期列表 */
            this.$api.commonApi.getTermInfoList().then(res => {
                this.$handleResponse(res).then(data => {
                    this.termOptions = data
                    this.timeSelect = data[0].ID
                })
            })
        },
        getMeterialData (file) {
            /* 根据文件类型获取对应的资料列表 */
            let getMeterialApi
            const folderId = file.b_id
            if (file.folder_type === 1) {
                getMeterialApi = this.$api.schoolBasedResourcesApi.GetMyManageRoutineFolderList
            } else {
                getMeterialApi = this.$api.schoolBasedResourcesApi.GetMyManageTaskFolderList
            }
            let data = {
                data: { folder_id: folderId, term_id: '' },
                PageSize: 999,
                PageNumber: 1
            }
            getMeterialApi(data).then(res => {
                this.$handleResponse(res).then(data => {
                    data.Data.forEach(item => {
                        item.fileChildren = []
                    })
                    this.material.materialData = data.Data
                })
            })
        },
        getMaterialFile (index) {
            /* 获取资料列表下面某人的文件 */
            let file = this.material.materialData[index]
            let userId = file.user_id
            let folderId = this.material.folderId
            let data = { user_id: userId, folder_id: folderId }
            this.$api.schoolBasedResourcesApi.GetMyManageFileInfo(data).then(res => {
                this.$handleResponse(res).then(data => {
                    file.fileChildren = data
                })
            })
        },
        backCrumb (item, index) {
            /* 点击面包屑返回前几级 */
            let breadcrumb = this.breadcrumb
            if (index < breadcrumb.length - 1) {
                this.currentFileList = item.listData
                this.breadcrumb = breadcrumb.slice(0, index + 1)
                this.material.isMaterial = item.isMaterial
            }
        },
        addCrumb (file) {
            /* 添加面包屑 */
            this.breadcrumb.push({ label: file.folder_name, listData: file.children, isMaterial: false })
        },
        intoFolder (file) {
            /* 进入下一级文件夹 */
            if (file.children !== null) {
                // 该文件夹下一级还是文件夹
                this.addCrumb(file)
                this.currentFileList = file.children
            } else {
                this.addCrumb(file)
                this.material.isMaterial = true
                this.material.folderId = file.b_id
                if (file.folder_type === 2) {
                    this.material.taskMode = true
                } else {
                    this.material.taskMode = false
                }
                this.getMeterialData(file)
            }
        }
    }

}
</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{
        padding: 15px;
        display: flex;
        flex-wrap: wrap;
    }
}

</style>
