<template>
    <div class="select-area">
        <div class="setting-name">
            个别员工不设置该权限
            <!-- <a class="J_add a-href" @click="treeSet.dialogVisible = true;"><i class="el-icon-plus"></i>添加</a>
            <a class="a-href J_check-detail">查看详情</a> -->
        </div>
        <ul class="particular-list">
            <template v-for="(li, index) in butList">
                <li class="item person-item" v-if="li.employeeClerkId" :key="index+'_'+li.employeeClerkId">
                    <img :src="li.headPic">
                    <p class="name">{{li.label}}</p>
                    <i class="el-icon-circle-close" @click="delCurrent(li, 'butList')"></i>
                </li>
                <li class="item group-item" v-else :key="index+'_'+li.groupId">
                    {{li.label}}
                    <i class="el-icon-circle-close" @click="delCurrent(li, 'butList')"></i>
                </li>
            </template>
            <li class="item J_add-btn" @click="callSelector('but', butList)"><i class="el-icon-plus"></i></li>
        </ul>
        <div class="setting-name">
            允许指定部门/人员可见
            <a class="J_add a-href"><i class="el-icon-plus"></i>添加</a>
            <a class="a-href J_check-detail">查看详情</a>
        </div>
        <ul class="particular-list">
            <template v-for="(li, index) in vipList">
                <li class="item person-item" v-if="li.employeeClerkId" :key="index+'_'+li.employeeClerkId">
                    <img :src="li.headPic">
                    <p class="name">{{li.label}}</p>
                    <i class="el-icon-circle-close" @click="delCurrent(li, 'vipList')"></i>
                </li>
                <li class="item group-item" v-else :key="index+'_'+li.groupId">
                    {{li.label}}
                    <i class="el-icon-circle-close" @click="delCurrent(li, 'vipList')"></i>
                </li>
            </template>
            <li class="item J_add-btn" @click="callSelector"><i class="el-icon-plus"></i></li>
        </ul>
        <!-- <vue-select-employee ref="butSelector" :treeSet="treeSet" @handleSelectedList="handleSelectedList" :treeData="groupData"></vue-select-employee> -->
    </div>
</template>
<script>
import { deepCopy } from '@/utils/index';
import vueSelectEmployee from "components/common/vueSelectEmployee"
export default {
    name: "select-area",
    components: {
        vueSelectEmployee
    },
    props: {
        treeData: {
            type: Object,
            default() {
                return {};
            }
        }
    },
    data() {
        return {
            testList: [],
            treeSet: {
                isSelectPerson: true,
                dialogVisible: false
            },
            butList: [],
            vipList: [],
            groupData: {}
        };
        
    },
    methods: {
        /**
         * 删除选中的人
         */
        delCurrent(person, listName) {
            let that = this;
            let list = that[listName];
            console.log(list.indexOf(person));
            list.splice(list.indexOf(person), 1);
        },
        /**
         * 处理树形控件选择的数据
         */
        handleSelectedList(list) {
            console.log(list);
            this.butList = list;
        },
        /**
         * 唤起选人插件
         */
        callSelector(type, list) {
            this.$emit("callPerSelector", type, list);
        }
    },
    watch: {
        treeData(data) {
            console.log(data);
            this.groupData = data;
        }
    }
};

       
</script>
<style lang="scss">
.select-area {
    .setting-name {
        .a-href {
            font-size: 12px;
            margin-left: 10px;
        }
    }
    .particular-list {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 30px;
        .item {
            position: relative;
            margin-right: 24px;
            margin-top: 30px;
            width:40px;
            .el-icon-circle-close {
                position: absolute;
                font-size: 16px;
                color: #808995;
                right: -8px;
                top: -8px;
                cursor: pointer;
            }
            img {
                width: 100%;
                border-radius:4px;
            }
            .name {
                font-size: 12px;
                text-align: center;
                margin-top: 20px;
            }
            &.group-item {
                padding: 0 10px;
                width: auto;
                height:30px;
                line-height: 32px;
                background:rgba(236,245,255,1);
                border:1px solid rgba(217,236,255,1);
                border-radius:4px;
                font-size:12px;
                color:rgba(64,158,255,1);
            }
            &.J_add-btn {
                height:40px;
                background:rgba(251,253,255,1);
                border:1px dashed rgba(192,204,218,1);
                border-radius:50%;
                text-align: center;
                line-height: 40px;
                font-size: 16px;
                box-sizing: border-box;
                cursor: pointer;
            }
        }
    }
    .check-more {
        color: #409EFF;
        margin: 20px 0;
        cursor: pointer;
    }
}
</style>


