<template>
    <!-- 部门选择框 -->
    <div>
        <el-row :gutter="20" type="flex" justify="space-around">
            <el-col :span="11" :xs="24" class="depart-left">
                <div class="head-container">
                    <el-input
                        v-model="deptName"
                        placeholder="请输入部门名称"
                        clearable
                        size="small"
                        prefix-icon="el-icon-search"
                        style="margin-bottom: 20px"
                    />
                </div>

                <div class="tree-content">
                    <el-tree
                        :data="deptOptions"
                        :props="defaultProps"
                        :expand-on-click-node="false"
                        :filter-node-method="filterNode"
                        ref="tree"
                        node-key="id"
                        default-expand-all
                        highlight-current
                        @node-click="handleNodeClick"
                    />
                </div>
            </el-col>
            <el-col :span="11" :xs="24" class="depart-right">
                <div class="head-container right-header">
                    <div>
                        <span>已选</span>
                        <span
                            >{{ selDeptAmount }}/<i>{{ deptAmount }}</i></span
                        >
                    </div>

                    <el-button type="text" size="mini" @click="clearDeptList()">
                        清空
                    </el-button>
                </div>

                <ul class="right-container">
                    <li v-for="(dept, v) in selDeptList" :key="dept.id">
                        <span>{{ dept.label }}</span>
                        <el-button
                            type="text"
                            icon="el-icon-close"
                            size="mini"
                            @click="deleteDept(v)"
                        />
                    </li>
                </ul>
            </el-col>
        </el-row>

        <el-row class="footer-btn">
            <el-button size="mini" plain @click="handelCancel()"
                >取 消</el-button
            >
            <el-button size="mini" plain type="primary" @click="handelSubmit()"
                >确 定</el-button
            >
        </el-row>
    </div>
</template>

<script>
    import { deptTreeSelect } from '@/api/system/user'
    export default {
        data() {
            return {
                deptName: '',
                deptOptions: [],
                defaultProps: {
                    children: 'children',
                    label: 'label',
                },
                deptAmount: 0,
                selDeptAmount: 0,
                selDeptList: [],
            }
        },
        created() {
            this.getDeptTree()
        },
        methods: {
            /** 查询部门下拉树结构 */
            getDeptTree() {
                deptTreeSelect().then((res) => {
                    this.deptOptions = res.data
                    this.getNodeAmount(res.data)
                })
            },
            // 节点单击事件
            handleNodeClick(data) {
                if (this.selDeptList.length < 1) {
                    this.selDeptList.push(data)
                } else {
                    let temp = false
                    this.selDeptList.forEach((e) => {
                        if (e.id === data.id) {
                            temp = true
                        }
                    })

                    if (temp) {
                        this.$message.error('该单位已选择，不可重复选择')
                        return
                    } else {
                        this.selDeptList.push(data)
                    }
                }

                this.selDeptAmount++
            },
            // 筛选节点
            filterNode(value, data) {
                if (!value) return true
                return data.label.indexOf(value) !== -1
            },

            /* 递归部门获取所有数据 */
            getNodeAmount(list) {
                list.map((e) => {
                    if (e.children) {
                        this.deptAmount += e.children.length
                        this.getNodeAmount(e.children)
                    }
                })
            },
            /* 清空按钮 */
            clearDeptList() {
                this.selDeptAmount = 0
                this.selDeptList = []
            },
            /* 清除某一个 */
            deleteDept(index) {
                this.selDeptAmount -= 1
                this.selDeptList.splice(index, 1)
            },

            /* 取消按钮 */
            handelCancel() {
                this.$emit('closeDepartSel', false)
                this.selDeptList = []
                this.selDeptAmount = 0
            },
            /* 确定按钮 */
            handelSubmit() {
                this.$emit('closeDepartSel', false, this.selDeptList)
                this.selDeptList = []
                this.selDeptAmount = 0
            },
        },
        watch: {
            // 根据名称筛选部门树
            deptName(val) {
                this.$refs.tree.filter(val)
            },
        },
    }
</script>

<style scoped lang="scss">
    .depart-left {
        border: 1px solid #f2f2f2;
        padding: 0 !important;
    }
    .head-container {
        height: 60px;
        line-height: 60px;
        text-align: center;
        background-color: #f2f2f2;
    }
    ::v-deep .el-input {
        margin-bottom: 0 !important;
        width: 90%;
    }
    ::v-deep .el-input--small .el-input__inner {
        border-radius: 32px;
    }

    .tree-content {
        padding: 15px;
    }

    .depart-right {
        border: 1px solid #f2f2f2;
    }

    .right-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 15px;

        span {
            margin-left: 5px;
            letter-spacing: 1px;
        }
    }

    .right-container {
        padding: 15px;

        li {
            padding: 8px 0;
            display: flex;
            align-content: center;
            justify-content: space-between;
        }
    }

    .footer-btn {
        padding: 15px 5px 0;
        text-align: right;
    }
</style>
