<template>
 <div class="flex">
    <div class="class-tree-wrapper" :class="{ 'collapse': !collapse }">
        <div class="tree-title" @click="handleCollapseClick">
          <span v-show="collapse">班级名称</span>
          <span class="icon-box">
            <i :class="collapse ? 'el-icon-caret-left' : 'el-icon-caret-right'" ></i>
          </span>
        </div>
        <div v-show="collapse">
          <el-tree
            :data="data"
            :props="defaultProps"
             node-key="id"
            :default-expanded-keys="['']"
            :expand-on-click-node="false"
            @node-click="handleNodeClick">
          </el-tree>
        </div>
    </div>
    <div class="layout-bd flex-1">
        <slot name="content"></slot>
    </div>
 </div>
</template>
<script>
export default {
    name: 'ClassLayoutIndex',
    props: {
        // 是否可点击全校
        nodeClickAll: {
            type: Boolean,
            default: false
        },
        // 是否可点击年纪
        nodeClickGrade: {
            type: Boolean,
            default: false
        },
        isSelectAll: {
            type: Boolean,
            default: false
        },
        isResponseTree: {
            type: Boolean,
            default: true
        },
        roleCode: {
            type: Number,
            default: 8
        }
    },
    data () {
        return {
            defaultProps: {
                children: 'children',
                label: 'name'
            },
            collapse: true, // 是否显示bar
            data: []
        }
    },
    methods: {
        // 获取班级年级
        getGradeClassList () {
            let { isSelectAll, isResponseTree, roleCode } = this
            this.$api.commonApi.getCurrentUserClassInfo({
                isSelectAll,
                isResponseTree,
                roleCode
            }).then(res => {
                let data = res.data
                if (data.Status) {
                    let gradeClassList = data.Data.map(item => {
                        let obj = {}
                        obj.category = 'grade'
                        obj.id = item.GradeId
                        obj.name = item.GradeName
                        obj.children = item.ClassInfos.map(item2 => {
                            let child = {}
                            child.category = 'class'
                            child.id = item2.ClassId
                            child.name = item2.ClassName
                            return child
                        })
                        return obj
                    })
                    this.data = [{ category: 'all', id: '', name: '全校', children: gradeClassList }]
                }
                this.$emit('hasGetGroup', this.data) // 已获取班级架构
            }).catch(err => {
                console.log(err)
            })
        },
        // 点击节点
        handleNodeClick ({ id, name, category }) {
            let { nodeClickAll, nodeClickGrade } = this
            if (!nodeClickAll && category === 'all') {
                return false
            }
            if (!nodeClickGrade && category === 'grade') {
                return false
            }
            this.$emit('nodeClick', { id, name, category })
        },
        // 显示隐藏bar
        handleCollapseClick () {
            this.collapse = !this.collapse
        }
    },
    created () {
        this.getGradeClassList()
    }
}
</script>
<style lang="less" scoped>
.class-tree-wrapper {
    padding: 10px;
    width: 180px;
    transition: all .3s;
    border-right: 1px solid #EBEEF5;
    .tree-title {
        height: 35px;
        line-height: 35px;
        background-color: #e3e3e3;
        padding-left: 10px;
        position: relative;
        .icon-box {
            position: absolute;
            right: 10px;
            margin: auto;
            height: 16px;
            line-height: 16px;
            width: 20px;
            top: 0;
            bottom: 0;
            text-align: center;
            i {
                font-size: 20px;
                line-height: 16px;
                cursor: pointer;
            }
        }
    }
    /deep/.el-tree {
        .el-tree-node {
            .el-tree-node__content {
                height: 30px;
            }
        }
        .is-current>.el-tree-node__content{
            background: #F5F7FA!important;
        }
    }
    &.collapse {
        width: 60px !important;
    }
}
.layout-bd {
    width: calc(100% - 180px)
}
</style>
