<style scoped>
    .addDistributionRules .add-tit {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 20px;
    }

    .addDistributionRules .add-tit p {
        display: flex;
        align-items: center;
        font-weight: bold;
        color: rgba(17, 17, 17, 1);
        font-size: 14px;
    }

    .addDistributionRules .add-tit p span {
        display: inline-block;
        width: 6px;
        height: 6px;
        background: rgba(13, 36, 129, 1);
        border-radius: 50%;
        margin-right: 10px;
    }

    .addDistributionRules .el-dialog__header {
        padding: 15px 20px;
        background: rgba(255, 255, 255, 1);
    }

    .add_box {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .addSearch {
        display: flex;
        flex-direction: column;

    }

    .addSearch-left {
        height: 40px;
        flex: 1;
        display: flex;
        align-items: center;
    }

    .addSearch-left span {
        flex-shrink: 0;
    }

    .addSearch-s {
        height: 40px;
        line-height: 4px;
        display: flex;
        align-items: center;
    }

    .addCenter {
        margin-left: 20px;
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .addCenter-left,
    .addCenter-right {
        flex: 1;
        margin-top: 20px;
        background-color: #fff;
        padding: 10px;
    }

    .addCenter-left,
    .addCenter-right {
        min-height: 400px;
        max-height: 400px;
        overflow: hidden;
    }

    .addCenter-right-box {
        width: 50%;
        float: left;
        margin-bottom: 10px;
    }

    .addCenter-hidden {
        min-height: 400px;
        max-height: 400px;
        overflow: scroll;
    }
</style>
<template>
    <el-dialog @closed="closedDialog" :modal="false" :visible.sync="dialogTableVisible" width="600px"
        :close-on-click-modal="false" class="addCustomer">
        <div class="add-tit" slot="title">
            <p><span></span>分配规则</p>
            <span icon="el-icon-close"></span>
        </div>
        <div class="add_box">
            <div class="addSearch">
                <div class="addSearch-left">
                    <span>选择：</span>
                    <el-input placeholder="关键词进行过滤" v-model="filterText" />
                </div>
                <div class="addCenter-left">
                    <div class="addCenter-hidden">
                        <el-tree v-loading="loading" class='ApprovalProcessBg' :data="memberList" show-checkbox
                            :filter-node-method="filterNode" :default-checked-keys="memberSetCheckedUserKeys" ref="tree"
                            :props="defaultProps" :render-after-expand="false" node-key="DepartmentId"
                            @check-change="handleNodeChange">
                        </el-tree>
                    </div>
                </div>
            </div>
            <div class="addCenter">
                <div class="addSearch-s">
                    <span>已选:</span>
                </div>
                <div class="addCenter-right">
                    <div class="addCenter-hidden">
                        <div class="addCenter-right-box" v-for="(item,index) in showMember" :key="index">
                            <el-tag closable @close="mySetCheckedKeys(item.EmployeeId)">
                                {{item.EmName}}
                            </el-tag>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" class="add_box-btn" @click="clickSure">确 定</el-button>
            <el-button class="add_box-btn add_box-cancel" @click="dialogTableVisible = false">取 消</el-button>
        </div>
    </el-dialog>
</template>
<script>
    export default {
        props: {
            obj: Object
        },
        data() {
            return {
                loading: false,
                filterText: "",
                memberSetCheckedUserKeys: [],
                showMember: [],
                defaultProps: {
                    children: 'ChildList',
                    label: 'DepartmentName',
                },
                memberList: [],
                dialogTableVisible: false,

            };
        },
        watch: {
            filterText(val) {
                this.$refs.tree.filter(val);
            }
        },
        created() {
            this.getMember()
        },
        mounted() {
            if (this.obj.EmpList) {
                this.showMember = this.obj.EmpList
                this.showMember.forEach(item => {
                    this.memberSetCheckedUserKeys.push(item.EmployeeId)
                })
            }
            let $this = this
            setTimeout(() => {
                $this.dialogTableVisible = true
            }, 50)
        },
        methods: {
            // 获取部门成员列表
            getMember() {
                this.loading = true
                this.apipost2('WorkFlow_get_GetTempLateDepartMentEmployee', {}, res => {
                    this.memberList = res.data.data
                    this.loading = false
                }, err => {})
            },
            // 删除指定人员
            mySetCheckedKeys(id) {
                if (this.memberSetCheckedUserKeys.length == 0) return
                this.showMember.splice(this.showMember.findIndex(item => item.EmployeeId === id), 1)
                this.memberSetCheckedUserKeys.splice(this.memberSetCheckedUserKeys.findIndex(item => item === id), 1)
                this.$refs.tree.setCheckedKeys(this.memberSetCheckedUserKeys);
            },
            filterNode(value, data) {
                if (!value) return true;
                return data.DepartmentName.indexOf(value) !== -1;
            },
            handleNodeChange(data, checked) { //操作选中
                data.IsCheck = checked;
                if (data.Type == 2 && data.IsCheck) { //是员工且选中
                    let isExsit = false
                    this.showMember.forEach(x => {
                        if (x.EmployeeId == data.DepartmentId) {
                            isExsit = true
                            return false
                        }
                    })
                    if (!isExsit) {
                        this.showMember.push({
                            EmName: data.DepartmentName,
                            EmployeeId: data.DepartmentId,
                            Sort: this.showMember.length + 1
                        })
                        this.memberSetCheckedUserKeys.push(data.DepartmentId)
                    }
                } else if (data.Type == 2 && !data.IsCheck) {
                    if (this.showMember.findIndex(item => item.EmployeeId === data.DepartmentId) != -1) {
                        this.showMember.splice(this.showMember.findIndex(item => item.EmployeeId === data.DepartmentId),
                            1)
                        this.memberSetCheckedUserKeys.splice(this.memberSetCheckedUserKeys.findIndex(item => item ===
                            data.DepartmentId), 1)
                        if (this.showMember.findIndex(item => item.EmployeeId === data.ParentId) != -1) {
                            this.memberSetCheckedUserKeys.splice(this.memberSetCheckedUserKeys.findIndex(item =>
                                item === data.ParentId), 1)
                        }
                    }
                }
                if (data.Type != 2 && data.IsCheck) {
                    if (this.memberSetCheckedUserKeys.findIndex(item => item === data.DepartmentId) == -1) {
                        this.memberSetCheckedUserKeys.push(data.DepartmentId)
                    }
                } else if (data.Type == 2 && !data.IsCheck) {
                    if (this.memberSetCheckedUserKeys.findIndex(item => item === data.DepartmentId) != -1) {
                        this.memberSetCheckedUserKeys.splice(this.memberSetCheckedUserKeys.findIndex(item => item ===
                            data.DepartmentId), 1)
                        if (this.showMember.findIndex(item => item.EmployeeId === data.ParentId) != -1) {
                            this.memberSetCheckedUserKeys.splice(this.memberSetCheckedUserKeys.findIndex(item =>
                                item === data.ParentId), 1)
                        }
                    }
                }
            },
            closedDialog() {
                this.MsgBus.$emit('closeaaddDistributionRules')
            },
            clickSure() {
                this.dialogTableVisible = false
            },
        }
    }
</script>