<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);
    }
 },
  mounted() {
      this.getMember()
      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>