<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 />
                </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">
                            </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 showMember">{{item.DeptName}}
                                    <i @click="mySetCheckedKeys(item.DeptId)"
                                        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'
    import selectMaterial from "./selectMaterial"

    export default {

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

        },

        data() {
            return {
                IsShow: true,
                memberList: [],
                filterText: "",
                defaultProps: {
                    children: 'ChildList',
                    label: 'DeptName',
                },
                userList: [],
                showMember: [],
                memberSetCheckedKeys: [],
                sysUserKeys: [],
            }
        },
        created() {
            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: {
            getMember() {
                let _arr = this.sysUserKeys.concat(this.memberSetCheckedKeys)
                getEmployeeAddrBook({}).then(res => {
                    if (res.Code == 1) {
                        this.memberList = res.Data
                        let _this = this;
                        _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 (data.DataType == 2 && data.IsCheck) { //是员工且选中
                    let isExsit = false
                    this.showMember.forEach(x => {
                        if (x.DeptId == data.DeptId) {
                            isExsit = true
                            return false
                        }
                    })
                    if (!isExsit) {
                        this.showMember.push({
                            DeptName: data.DeptName,
                            DeptId: data.DeptId
                        })
                        this.memberSetCheckedKeys.push(data.DeptId)
                    }
                } else if (data.DataType == 2 && !data.IsCheck) {
                    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)
                        if (this.showMember.findIndex(item => item.DeptId === data.ParentId) != -1) {
                            this.memberSetCheckedKeys.splice(this.memberSetCheckedKeys.findIndex(item => item === data.ParentId), 1)
                        }
                    }
                }
                if (data.DataType != 2 && data.IsCheck) {
                    if (this.memberSetCheckedKeys.findIndex(item => item === data.DeptId) == -1) {
                        this.memberSetCheckedKeys.push(data.DeptId)
                    }
                } else if (data.DataType == 2 && !data.IsCheck) {
                    if (this.memberSetCheckedKeys.findIndex(item => item === data.DeptId) != -1) {
                        this.memberSetCheckedKeys.splice(this.memberSetCheckedKeys.findIndex(item => item === data.DeptId), 1)
                        if (this.showMember.findIndex(item => item.DeptId === data.ParentId) != -1) {
                            this.memberSetCheckedKeys.splice(this.memberSetCheckedKeys.findIndex(item => item === data.ParentId), 1)
                        }
                    }
                }
            },
            mySetCheckedKeys(id) {
                if (this.memberSetCheckedKeys.length == 0)
                    return
                if (id == -1) {
                    this.$refs.treeUser.setCheckedKeys(this.memberSetCheckedKeys)
                    return
                }
                this.showMember.splice(this.showMember.findIndex(item => item.DeptId === id), 1)
                this.memberSetCheckedKeys.splice(this.memberSetCheckedKeys.findIndex(item => item === id), 1)
                this.$refs.treeUser.setCheckedKeys(this.memberSetCheckedKeys);
            },
            //关闭弹窗
            closeEditOrder() {
                this.$emit('close')
            },
            saveOrderInfo() {
                this.$emit('success',this.showMember,this.cptype)
                
            }

        }
    }

</script>