<style>
    .choiceappoval .ApprovalProcessBg {
        background: #f8f8f8;
        max-height: 400px;
        overflow-y: auto;
    }

    .choiceappoval .Approval_yxList {
        width: 300px;
        background: #f8f8f8;
        min-height: 400px;
        max-height: 400px;
        overflow-y: auto;
    }

    .choiceappoval .Approval_yxList li {
        display: inline-block;
        width: 100%;
        line-height: 40px;
        text-indent: 15px;
        border-bottom: 1px dotted #eee;
    }
</style>

<template>
    <div>
        <q-dialog v-model="IsShow" persistent>
            <q-card style="width: 700px; max-width: 80vw;" class="choiceappoval">
                <q-card-section class="row items-center q-pb-none ">
                    <div class="text-h6">选择企业成员</div>
                    <q-space />
                    <q-btn icon="close" flat round dense v-close-popup @click="closeEditOrder" />
                </q-card-section>
                <q-separator />
                <q-card-section class="q-pt-none" style="padding: 20px 0;">
                    <div style="display: flex;align-items: flex-start;justify-content: space-between;">
                        <div style="width: 300px; margin: 0 20px;">
                            <p style="margin: 0 0 10px 0;display: flex;align-items: center;">选择：<el-input
                                    style="width: 200px;" placeholder="输入关键字进行过滤" v-model="filterText">
                                </el-input>
                            </p>
                            <el-tree class='ApprovalProcessBg' :filter-node-method="filterNode" :data="memberList"
                                show-checkbox ref="treeUser" :props="defaultProps" :render-after-expand="false"
                                node-key="DeptId" @check-change="handleNodeChange" @check='btncheck'>
                                <span class="custom-tree-node" slot-scope="{ node, data }">
                                    <span>
                                        <i class="el-icon-folder" v-if="data.DataType==1"  style="margin-right: 3px;color: var(--q-color-primary)!important;"></i>
                                        <i class="el-icon-user-solid" v-if="data.DataType==2"  style="margin-right: 3px;color: var(--q-color-primary)!important;"></i>
                                        {{ node.label }}
                                    </span>              
                                </span>
                            </el-tree>
                        </div>
                        <div style="width: 300px; margin: 0 20px;">
                            <p style="margin: 0 0 20px 0;">已选：</p>
                            <div class="Approval_yxList">
                                <li v-for="item in newList">
                                    <i v-if="item.DataType==1" class="el-icon-folder" style="margin-right: 3px;color: var(--q-color-primary)!important;"></i>
                                    <i v-if="item.DataType==2" class="el-icon-user-solid" style="margin-right: 3px;color: var(--q-color-primary)!important;"></i>
                                    {{item.DeptName}}
                                    <i @click="mySetCheckedKeys(item)"
                                        class="el-icon-circle-close showMemberIcon"></i>
                                </li>
                            </div>
                        </div>
                    </div>

                </q-card-section>

                <q-separator />
                <q-card-actions align="right" class="bg-white">
                    <q-btn class="q-mr-md" label="取消" @click="closeEditOrder" />
                    <q-btn color="accent" class="q-mr-md" label="确定" @click="saveOrderInfo()" />
                </q-card-actions>
            </q-card>
        </q-dialog>

    </div>

</template>
<script>
    import {
        getEmployeeAddrBook
    } from '../../../../../api/users/user'

    export default {

        props: {
            outerindex: {
                type: String,
                default: '',
            },
            // byval: {
            //     type: Array,
            //     default: [],
            // },
            cptype: {//1是列表上使用2 新增使用
                type: String,
                default: '1',
            },
            list:{
                type: Array,
                default: [],
            },

        },

        data() {
            return {
                IsShow: true,
                memberList: [],
                filterText: "",
                defaultProps: {
                    children: 'ChildList',
                    label: 'DeptName',
                },
                userList: [],
                showMember: [],
                memberSetCheckedKeys: [],
                sysUserKeys: [],
                newList: [],
                rightobj:[],
            }
        },
        created() {
            this.IsShow = true
           
            // if (this.byval.length > 0) {
            //     this.memberSetCheckedKeys = [];
            //     this.showMember = JSON.parse(JSON.stringify(this.byval))                
            //     this.byval.forEach(x => {
            //         this.memberSetCheckedKeys.push(x.DeptId)
            //     })
            // }
            this.getMember()//部门下面选择员工
        },
        mounted() {

        },
        watch: {
            filterText(val) {
                this.$refs.treeUser.filter(val);
            },
        },
        methods: {
            huoqucheckedkey(){//根据传过来的list 数据处理
                let newList = this.newList;
                this.memberList.forEach(x=>{
                    newList.forEach(z=>{
                        if(x.DeptId == z.DeptId){
                            this.memberSetCheckedKeys.push(x.DeptId)
                            this.showMember.push(x)
                           if(x.ChildList && x.ChildList.length>0){
                                x.ChildList.forEach(j => {
                                    this.memberSetCheckedKeys.push(j.DeptId)
                                    this.showMember.push(j)
                                    if(j.ChildList && j.ChildList.length>0){
                                        this.huoqucheckedkey_yes(j.ChildList)
                                    }
                                })
                           }
                            
                        }else{
                            this.huoqucheckedkey_no(x.ChildList,z.DeptId)
                        }
                    })
                    
                })
            },
            huoqucheckedkey_no(ChildList,id){
                if(ChildList && ChildList.length>0){
                    ChildList.forEach(x=>{
                        if(x.DeptId == id){
                            this.memberSetCheckedKeys.push(x.DeptId)
                            this.showMember.push(x)
                            if (x.ChildList && x.ChildList.length > 0) {
                                x.ChildList.forEach(j => {
                                    this.memberSetCheckedKeys.push(j.DeptId)
                                    this.showMember.push(j)
                                    if(j.ChildList && j.ChildList.length>0){
                                        this.huoqucheckedkey_yes(j.ChildList)
                                    }
                                })
                                
                            }
                        }else{
                            this.huoqucheckedkey_no(x.ChildList,id)
                        }
                    })
                }
                
            },
            huoqucheckedkey_yes(ChildList){
                ChildList.forEach(j => {
                    this.memberSetCheckedKeys.push(j.DeptId)
                    this.showMember.push(j)
                    if(j.ChildList && j.ChildList.length>0){
                        this.huoqucheckedkey_yes(j.ChildList)
                    }
                })
            },
            getMember() {
               
                getEmployeeAddrBook({}).then(res => {
                    if (res.Code == 1) {
                        this.memberList = res.Data
                        let _this = this;
                        if(this.list.length>0){
                            this.memberSetCheckedKeys = [];
                            this.showMember = []
                            this.newList = JSON.parse(JSON.stringify(this.list))
                            this.huoqucheckedkey()
                        }
                        let _arr = this.sysUserKeys.concat(this.memberSetCheckedKeys)
                        _this.$refs.treeUser.setCheckedKeys(_arr);
                    }
                }).catch(() => {

                })
            },

            filterNode(value, data) {
                if (!value) return true;
                return data.DeptName.indexOf(value) !== -1;
            },

            handleNodeChange(data, checked) {
                data.IsCheck = checked;
                if(checked){
                    if (this.memberSetCheckedKeys.findIndex(item => item === data.DeptId) == -1) {
                        this.memberSetCheckedKeys.push(data.DeptId)
                        this.showMember.push(data)
                    }
                  
                }else{
                    if(this.showMember.findIndex(item => item.DeptId === data.DeptId) != -1){
                        this.showMember.splice(this.showMember.findIndex(item => item.DeptId === data.DeptId), 1)
                        this.memberSetCheckedKeys.splice(this.memberSetCheckedKeys.findIndex(item => item === data.DeptId), 1)
                    }
                }
            },
            compare(property){
                return function(a,b){
                var value1 = a[property];
                var value2 = b[property];
                return value1 - value2;
                }
            },
            btncheck() {//对数据的处理
                let data = JSON.parse(JSON.stringify(this.memberSetCheckedKeys))
                this.newList = []
                this.memberList.forEach(x => {
                    let isyes = false
                    for(var i=0;i<data.length;i++){
                        let j = data[i]
                        if(x.DeptId==j){
                            this.newList.push(x)
                            isyes = true
                            break
                        }else{
                           
                        }
                    }
                    if(isyes==false){
                        this.getChildList(x.ChildList,data)
                    }
                })
                this.newList =   this.newList.sort(this.compare('DataType'))//数组进行排序
            },
            getChildList(ChildList,data) {
                ChildList.forEach(x => {
                    let isyes = false
                    for(var i=0;i<data.length;i++){
                        let j = data[i]
                        if(x.DeptId==j){
                            this.newList.push(x)
                            isyes = true
                            break
                        }else{
                           
                        }
                    }
                    if(isyes==false){
                        this.getChildList(x.ChildList,data)
                    }
                })
            },
            arrayUnique(arr, id) {//数组去重
                var hash = {};
                return arr.reduce(function (item, next) {
                    hash[next[id]] ? '' : hash[next[id]] = true && item.push(next);
                    return item;
                }, []);

            },
            handleshowMember(ChildList){//右边删除部门的情况 也删除他的子级
                ChildList.forEach(x=>{
                    this.showMember.splice(this.showMember.findIndex(j => j.DeptId === x.DeptId), 1)
                    if(x.ChildList && x.ChildList.length>0){
                    this.handleshowMember(x.ChildList)
               }
                })
            },
            mySetCheckedKeys(item) {
                let id  = item.DeptId
                if (this.memberSetCheckedKeys.length == 0)
                    return
                if (id == -1) {
                    this.$refs.treeUser.setCheckedKeys(this.memberSetCheckedKeys)
                    return
                }
               
                this.showMember.splice(this.showMember.findIndex(x => x.DeptId === id), 1)
               if(item.ChildList && item.ChildList.length>0){
                    this.handleshowMember(item.ChildList)
               }
             

                this.memberSetCheckedKeys.splice(this.memberSetCheckedKeys.findIndex(x => x === id), 1)
                this.qudiaoziji(id)
                this.newList.splice(this.newList.findIndex(x => x.DeptId === id), 1)
                this.$refs.treeUser.setCheckedKeys(this.memberSetCheckedKeys);
            },
            qudiaoziji(id) {
                this.rightobj = []
                this.memberList.forEach(x => {
                    if (x.DeptId == id) {
                        
                        if (x.ChildList && x.ChildList.length > 0) {
                            x.ChildList.forEach(j => {
                                this.rightobj.push(j.DeptId)
                                if(j.ChildList && j.ChildList.length>0){
                                    this.qudiaoziji_t(j.ChildList)
                                }
                            })
                            
                        }

                    }else{
                        
                        this.qudiaoziji2(x.ChildList,id)
                        
                        
                    }
                })
                
                this.memberSetCheckedKeys = this.arrayWeightRemoval(this.memberSetCheckedKeys,this.rightobj)
            },
            qudiaoziji_t(ChildList) {
                ChildList.forEach(j => {
                    this.rightobj.push(j.DeptId)
                    if(j.ChildList && j.ChildList.length>0){
                        this.qudiaoziji_t(j.ChildList)
                    }
                })
            },
            qudiaoziji2(ChildList,id){
                if(ChildList && ChildList.length>0){
                    ChildList.forEach(x=>{
                        if(x.DeptId == id){
                            if (x.ChildList && x.ChildList.length > 0) {
                                x.ChildList.forEach(j => {
                                    this.rightobj.push(j.DeptId)
                                    if(j.ChildList && j.ChildList.length>0){
                                        this.qudiaoziji_t(j.ChildList)
                                    }
                                })
                                
                            }
                        }else{
                            this.qudiaoziji2(x.ChildList,id)
                        }
                    })
                }
                
            },
            arrayWeightRemoval(array1,array2) {
                //临时数组存放
                var tempArray1 = [];//临时数组1
                var tempArray2 = [];//临时数组2

                for (var i = 0; i < array2.length; i++) {
                    tempArray1[array2[i]] = true;//将数array2 中的元素值作为tempArray1 中的键，值为true；
                }

                for (var i = 0; i < array1.length; i++) {
                    if (!tempArray1[array1[i]]) {
                        tempArray2.push(array1[i]);//过滤array1 中与array2 相同的元素；
                    }
                }
                return tempArray2;
            },

           
            //关闭弹窗
            closeEditOrder() {
                this.$emit('close')
            },
            saveOrderInfo() {
                this.$emit('success', this.newList)

            }

        }
    }

</script>