<template>
    <div class="flex">
        <div
            ref="sideBar"
            class="aside-wrapper"
            :class="{ 'collapse': !collapse }"
            :style="{ height }"
            v-if="showSideBar"
        >
            <template v-if="!isCustom">
                <div class="tree-title" @click="handleCollapseClick">
                    <span v-show="collapse">{{ title }}</span>
                    <span class="icon-box">
                        <i :class="collapse ? 'el-icon-caret-left' : 'el-icon-caret-right'"></i>
                    </span>
                </div>
                <component
                    v-show="collapse"
                    :is="currentComponent"
                    :default-checked="defaultChecked"
                    @hasGetGroup="handleGetClassGroup"
                    @nodeClick="handleNodeClick"
                    :node-click-all="nodeClickAll"
                    :node-click-grade="nodeClickGrade"
                    :is-select-all="isSelectAll"
                    :is-response-tree="isResponseTree"
                    :role-code="roleCode"
                ></component>
            </template>
            <template v-else>
                <slot name="aside"></slot>
            </template>
        </div>
        <div class="layout-bd flex-1" ref="main" :style="{ height }">
            <slot name="content"></slot>
        </div>
    </div>
</template>
<script>
import classSelectorMixin from './components/classSelectorMixin'
const modes = [
    { label: '', value: '' },
    { label: '班级名称', value: 'ClassSelector' },
    { label: '教师列表', value: 'TeacherSelector' },
    { label: '自定义', value: '' },
    { label: '部门列表', value: 'OrganizeSelector' },
    { label: '年级列表', value: 'GradesSelector' }
]
export default {
    name: 'ClassLayoutIndex',
    props: {
        // mode 1- 班级选择组件  2- 教师选择选择组件 3- 自定义内容 4- 组织架构选择组件 5- 年级选择组件
        mode: {
            type: Number,
            default: 1
        },
        // 是否显示侧边栏
        showSideBar: {
            type: Boolean,
            default: true
        },
        // 除了头部组件外，还有其他的组件（手动传入）
        extraHeight: {
            type: Number,
            default: 0
        }
    },
    mixins: [classSelectorMixin],
    components: {
        ClassSelector: () => import('./components/ClassSelector'),
        TeacherSelector: () => import('./components/TeacherSelector'),
        OrganizeSelector: () => import('./components/OrganizeSelector'),
        GradesSelector: () => import('./components/GradesSelector')
    },
    data () {
        return {
            collapse: true, // 是否显示bar
            height: ''
            // mainHeight: 0
        }
    },
    computed: {
        currentComponent () {
            let { mode } = this
            return modes[mode].value
            // switch (mode) {
            // case 1:
            //     return 'ClassSelector'
            // case 2:
            //     return 'TeacherSelector'
            // case 3:
            //     return ''
            // case 4:
            //     return 'OrganizeSelector'
            // case 5:
            //     return 'GradesSelector'
            // }
        },
        title () {
            let { mode } = this
            return modes[mode].label
            // switch (mode) {
            // case 1:
            //     return '班级名称'
            // case 2:
            //     return '教师列表'
            // case 3:
            //     return ''
            // case 4:
            //     return '部门列表'
            // case 5:
            //     return '年级列表'
            // }
        },
        isCustom () {
            return this.mode === 3
        }
    },
    watch: {
        // mainHeight () {
        //     this.resetHeight()
        // }
    },
    mounted () {
        this.$nextTick(() => {
            // this.mainHeight = this.$refs['main'].scrollHeight
            this.resetHeight()
        })
    },
    methods: {
        // 显示隐藏bar
        handleCollapseClick () {
            this.collapse = !this.collapse
        },
        handleGetClassGroup (data) {
            this.$emit('hasGetGroup', data)
        },
        handleNodeClick (data) {
            this.$emit('nodeClick', data)
        },
        resetHeight () {
            this.$nextTick(() => {
                let { extraHeight } = this
                // let height = document.body.offsetHeight - 82 - extraHeight
                // this.height = `${height > mainHeight ? height : mainHeight}px`
                this.height = `${document.body.offsetHeight - 82 - extraHeight}px`
                // document.body.style = 'overflow-y: hidden'
            })
        }
    }
}
</script>
<style lang="less" scoped>
.aside-wrapper {
    padding: 10px;
    width: 180px;
    transition: all 0.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);
    overflow-y: auto;
}
</style>
