<template>
    <div>
        <el-dialog
            width="800px"
            :title="'选择' + title"
            :visible.sync="dialogVisible"
            v-bind="attrs"
            v-on="on"
        >
            <ul class="wrapper" :class="{ group: /group|class/.test(mode) }">
                <li>
                    <tree-list
                        :mode="mode"
                        :select-list.sync="selectList"
                        :checked-list.sync="checkedList"
                        @add="$refs.select.scrollBottom()"
                        ref="tree"
                    ></tree-list>
                </li>
                <li v-if="/teacher|student/.test(mode)">
                    <select-list
                        :mode="mode"
                        :select-list="selectList"
                        :check-list.sync="checkList"
                        :checked-list.sync="checkedList"
                        ref="select"
                        @add="$refs.checked.scrollBottom()"
                    ></select-list>
                </li>
                <li>
                    <checked-list
                        :mode="mode"
                        :check-list="checkList"
                        :checked-list="checkedList"
                        ref="checked"
                        @clear="$refs.tree.clear()"
                        @delTree="$refs.tree.delTree()"
                    ></checked-list>
                </li>
            </ul>

            <template slot="footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script>
export default {
    components: {
        TreeList: () => import('./components/TreeList'),
        SelectList: () => import('./components/SelectList'),
        CheckedList: () => import('./components/CheckedList')
    },
    props: {
        visible: { type: Boolean, default: false }, // 是否展示弹窗
        sync: { type: Boolean, default: true }, // 是否同步 list 的值
        list: { type: Array, default: () => [] }, // 初始选中的人员或部门
        mode: { type: String, default: 'teacherCheckbox' }, // 选人模式：
        // 教师多选 teacherCheckbox 、教师单选 teacherRadio 、部门多选 groupCheckbox 、部门单选 groupRadio
        // 学生多选 studentCheckbox 、学生单选 studentRadio 、班级多选 classCheckbox 、班级单选 classRadio
        clear: { type: Boolean, default: true }, // 多选或单选模式下每次关闭是否清空已勾选的组织架构和中间的用户列表
        empty: { type: Boolean, default: false }, // 是否在点击确定时选择的数据可以为空
        attrs: { type: Object, default: () => ({}) }, // 传递给 el-dialog 的属性
        on: { type: Object, default: () => ({}) } // 监听 el-dialog 的事件
    },
    data () {
        return {
            selectList: [], // 可选择的用户列表
            checkList: [], // 可选择的用户列表中选中的值
            checkedList: [] // 选中的用户列表
        }
    },
    computed: {
        // title
        title: vm => /teacher/.test(vm.mode) ? '教师'
            : /group/.test(vm.mode) ? '部门'
                : /student/.test(vm.mode) ? '学生' : '班级',
        // 代理同步 props 的 visible
        dialogVisible: {
            get () {
                return this.visible
            },
            set (value) {
                this.$emit('update:visible', value)
            }
        }
    },
    watch: {
        // 显示时初始化选中的列表
        visible (value) {
            if (value) {
                // 如果单选模式下选中的用户列表大于 1 则截断
                if (/radio/i.test(this.mode) && this.list.length > 1) this.list.splice(1, this.list.length - 1)
                // 初始化选中的列表
                this.checkedList = JSON.parse(JSON.stringify(this.list))
                ;/teacher|student/.test(this.mode)
                    ? this.checkList = this.checkedList.map(item => item.id)
                    : this.$refs.tree && setTimeout(() => this.$refs.tree.initTree())
            } else if (this.clear) {
                // 清除勾选的用户列表
                this.$refs.tree.clear()
            }
        }
    },
    methods: {
        // 返回数据
        submit () {
            this.empty
                ? this.emit()
                : this.checkedList.length
                    ? this.emit()
                    : this.$message.warning('请至少选择一个' + this.title)
        },
        // 返回数据
        emit () {
            this.dialogVisible = false
            this.$emit('submit', this.checkedList)
            if (this.sync) this.list.splice(0, this.list.length, ...this.checkedList)
        }
    }
}
</script>

<style lang="less" scoped>
/deep/ .el-dialog__body {
    padding: 10px 20px;
}
ul.wrapper {
    display: flex;
    margin: 0 -5px;
    &.group li {
        width: 50%;
    }
    li {
        width: 33.3333%;
        height: 500px;
        padding: 0 5px;
        & > div {
            height: 100%;
        }
        /deep/ .title {
            height: 40px;
            line-height: 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        /deep/ .box {
            height: calc(100% - 40px);
            padding: 10px;
            overflow-y: auto;
            border-radius: 4px;
            background-color: #F2F6FC;
            border: 1px solid #DCDFE6;
            &.h100p {
                height: 100%;
            }
            .custom {
                display: block;
                .el-checkbox, .el-radio {
                    display: flex;
                    align-items: center;
                    margin-right: 0;
                    padding: 3px 10px;
                    &:hover {
                        background-color: #DCDFE6;
                    }
                    .el-checkbox__label, .el-radio__label {
                        flex-grow: 1;
                        display: flex;
                        justify-content: space-between;
                    }
                }
            }
        }
    }
}
/deep/ .el-tree-node__content:hover {
    background-color: #DCDFE6;
}
</style>
