<template>
    <div class="select-area">
        <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">
            <li class="item person-item" v-for="(li, index) in testList" :key="index+'_'+li.employeeClerkId" v-if="index < 14">
                <img :src="li.headPic">
                <p class="name">{{li.name}}</p>
                <i class="el-icon-circle-close" @click="delCurrent(li, 'testList')"></i>
            </li>
        </ul>
        <p class="check-more" v-if="testList.length > 14">查看更多</p>
        <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">
            <li class="item person-item" v-for="(li, index) in testList" :key="index+'_'+li.employeeClerkId" v-if="index < 14">
                <img :src="li.headPic">
                <p class="name">{{index}}{{li.name}}</p>
                <i class="el-icon-circle-close" @click="delCurrent(li, 'testList')"></i>
            </li>
        </ul>
        <p class="check-more" v-if="testList.length > 14">查看更多</p>
    </div>
</template>
<script>
import { deepCopy } from '@/utils/index';
export default {
    name: "select-area",
    data() {
        return {
            testList: [
                {
                    activationStatus: 0,
                    departmentId: "8acdb364b1f649328b99cbac338098ad",
                    departmentName: "无",
                    employeeClerkId: "12a2ef3c642a412b989e8f1a29319231",
                    enterpriseId: "5cfbf45fe35d475ca9a59c41b70b114e",
                    headPic: "https://cdn-images-1.medium.com/max/1600/1*HP8l7LMMt7Sh5UoO1T-yLQ.png",
                    hireDate: null,
                    isManager: 1,
                    isManagerStr: "是",
                    name: "张0",
                    phoneNumber: "13588480000",
                    positionName: "公司老大0",
                    sort: 0,
                    userId: "2d92932d626b4058a11c8fb1b8c53956"
                },
                {
                    activationStatus: 0,
                    departmentId: "8acdb364b1f649328b99cbac338098ad",
                    departmentName: "无",
                    employeeClerkId: "12a2ef3c642a412b989e8f1a29319231",
                    enterpriseId: "5cfbf45fe35d475ca9a59c41b70b114e",
                    headPic: "https://cdn-images-1.medium.com/max/1600/1*HP8l7LMMt7Sh5UoO1T-yLQ.png",
                    hireDate: null,
                    isManager: 1,
                    isManagerStr: "是",
                    name: "张0",
                    phoneNumber: "13588480000",
                    positionName: "公司老大0",
                    sort: 0,
                    userId: "2d92932d626b4058a11c8fb1b8c53956"
                },
                {
                    activationStatus: 0,
                    departmentId: "8acdb364b1f649328b99cbac338098ad",
                    departmentName: "无",
                    employeeClerkId: "12a2ef3c642a412b989e8f1a29319231",
                    enterpriseId: "5cfbf45fe35d475ca9a59c41b70b114e",
                    headPic: "https://cdn-images-1.medium.com/max/1600/1*HP8l7LMMt7Sh5UoO1T-yLQ.png",
                    hireDate: null,
                    isManager: 1,
                    isManagerStr: "是",
                    name: "张0",
                    phoneNumber: "13588480000",
                    positionName: "公司老大0",
                    sort: 0,
                    userId: "2d92932d626b4058a11c8fb1b8c53956"
                },
                {
                    activationStatus: 0,
                    departmentId: "8acdb364b1f649328b99cbac338098ad",
                    departmentName: "无",
                    employeeClerkId: "12a2ef3c642a412b989e8f1a29319231",
                    enterpriseId: "5cfbf45fe35d475ca9a59c41b70b114e",
                    headPic: "https://cdn-images-1.medium.com/max/1600/1*HP8l7LMMt7Sh5UoO1T-yLQ.png",
                    hireDate: null,
                    isManager: 1,
                    isManagerStr: "是",
                    name: "张0",
                    phoneNumber: "13588480000",
                    positionName: "公司老大0",
                    sort: 0,
                    userId: "2d92932d626b4058a11c8fb1b8c53956"
                },
                {
                    activationStatus: 0,
                    departmentId: "8acdb364b1f649328b99cbac338098ad",
                    departmentName: "无",
                    employeeClerkId: "12a2ef3c642a412b989e8f1a29319231",
                    enterpriseId: "5cfbf45fe35d475ca9a59c41b70b114e",
                    headPic: "https://cdn-images-1.medium.com/max/1600/1*HP8l7LMMt7Sh5UoO1T-yLQ.png",
                    hireDate: null,
                    isManager: 1,
                    isManagerStr: "是",
                    name: "张0",
                    phoneNumber: "13588480000",
                    positionName: "公司老大0",
                    sort: 0,
                    userId: "2d92932d626b4058a11c8fb1b8c53956"
                },
                {
                    activationStatus: 0,
                    departmentId: "8acdb364b1f649328b99cbac338098ad",
                    departmentName: "无",
                    employeeClerkId: "12a2ef3c642a412b989e8f1a29319231",
                    enterpriseId: "5cfbf45fe35d475ca9a59c41b70b114e",
                    headPic: "https://cdn-images-1.medium.com/max/1600/1*HP8l7LMMt7Sh5UoO1T-yLQ.png",
                    hireDate: null,
                    isManager: 1,
                    isManagerStr: "是",
                    name: "张0",
                    phoneNumber: "13588480000",
                    positionName: "公司老大0",
                    sort: 0,
                    userId: "2d92932d626b4058a11c8fb1b8c53956"
                },
                {
                    activationStatus: 0,
                    departmentId: "8acdb364b1f649328b99cbac338098ad",
                    departmentName: "无",
                    employeeClerkId: "12a2ef3c642a412b989e8f1a29319231",
                    enterpriseId: "5cfbf45fe35d475ca9a59c41b70b114e",
                    headPic: "https://cdn-images-1.medium.com/max/1600/1*HP8l7LMMt7Sh5UoO1T-yLQ.png",
                    hireDate: null,
                    isManager: 1,
                    isManagerStr: "是",
                    name: "张0",
                    phoneNumber: "13588480000",
                    positionName: "公司老大0",
                    sort: 0,
                    userId: "2d92932d626b4058a11c8fb1b8c53956"
                },
                {
                    activationStatus: 0,
                    departmentId: "8acdb364b1f649328b99cbac338098ad",
                    departmentName: "无",
                    employeeClerkId: "12a2ef3c642a412b989e8f1a29319231",
                    enterpriseId: "5cfbf45fe35d475ca9a59c41b70b114e",
                    headPic: "https://cdn-images-1.medium.com/max/1600/1*HP8l7LMMt7Sh5UoO1T-yLQ.png",
                    hireDate: null,
                    isManager: 1,
                    isManagerStr: "是",
                    name: "张0",
                    phoneNumber: "13588480000",
                    positionName: "公司老大0",
                    sort: 0,
                    userId: "2d92932d626b4058a11c8fb1b8c53956"
                },
                {
                    activationStatus: 0,
                    departmentId: "8acdb364b1f649328b99cbac338098ad",
                    departmentName: "无",
                    employeeClerkId: "12a2ef3c642a412b989e8f1a29319231",
                    enterpriseId: "5cfbf45fe35d475ca9a59c41b70b114e",
                    headPic: "https://cdn-images-1.medium.com/max/1600/1*HP8l7LMMt7Sh5UoO1T-yLQ.png",
                    hireDate: null,
                    isManager: 1,
                    isManagerStr: "是",
                    name: "张0",
                    phoneNumber: "13588480000",
                    positionName: "公司老大0",
                    sort: 0,
                    userId: "2d92932d626b4058a11c8fb1b8c53956"
                },
                {
                    activationStatus: 0,
                    departmentId: "8acdb364b1f649328b99cbac338098ad",
                    departmentName: "无",
                    employeeClerkId: "12a2ef3c642a412b989e8f1a29319231",
                    enterpriseId: "5cfbf45fe35d475ca9a59c41b70b114e",
                    headPic: "https://cdn-images-1.medium.com/max/1600/1*HP8l7LMMt7Sh5UoO1T-yLQ.png",
                    hireDate: null,
                    isManager: 1,
                    isManagerStr: "是",
                    name: "张0",
                    phoneNumber: "13588480000",
                    positionName: "公司老大0",
                    sort: 0,
                    userId: "2d92932d626b4058a11c8fb1b8c53956"
                },
                {
                    activationStatus: 0,
                    departmentId: "8acdb364b1f649328b99cbac338098ad",
                    departmentName: "无",
                    employeeClerkId: "12a2ef3c642a412b989e8f1a29319231",
                    enterpriseId: "5cfbf45fe35d475ca9a59c41b70b114e",
                    headPic: "https://cdn-images-1.medium.com/max/1600/1*HP8l7LMMt7Sh5UoO1T-yLQ.png",
                    hireDate: null,
                    isManager: 1,
                    isManagerStr: "是",
                    name: "张0",
                    phoneNumber: "13588480000",
                    positionName: "公司老大0",
                    sort: 0,
                    userId: "2d92932d626b4058a11c8fb1b8c53956"
                },
                {
                    activationStatus: 0,
                    departmentId: "8acdb364b1f649328b99cbac338098ad",
                    departmentName: "无",
                    employeeClerkId: "12a2ef3c642a412b989e8f1a29319231",
                    enterpriseId: "5cfbf45fe35d475ca9a59c41b70b114e",
                    headPic: "https://cdn-images-1.medium.com/max/1600/1*HP8l7LMMt7Sh5UoO1T-yLQ.png",
                    hireDate: null,
                    isManager: 1,
                    isManagerStr: "是",
                    name: "张0",
                    phoneNumber: "13588480000",
                    positionName: "公司老大0",
                    sort: 0,
                    userId: "2d92932d626b4058a11c8fb1b8c53956"
                },
                {
                    activationStatus: 0,
                    departmentId: "8acdb364b1f649328b99cbac338098ad",
                    departmentName: "无",
                    employeeClerkId: "12a2ef3c642a412b989e8f1a29319231",
                    enterpriseId: "5cfbf45fe35d475ca9a59c41b70b114e",
                    headPic: "https://cdn-images-1.medium.com/max/1600/1*HP8l7LMMt7Sh5UoO1T-yLQ.png",
                    hireDate: null,
                    isManager: 1,
                    isManagerStr: "是",
                    name: "张0",
                    phoneNumber: "13588480000",
                    positionName: "公司老大0",
                    sort: 0,
                    userId: "2d92932d626b4058a11c8fb1b8c53956"
                },
                {
                    activationStatus: 0,
                    departmentId: "8acdb364b1f649328b99cbac338098ad",
                    departmentName: "无",
                    employeeClerkId: "12a2ef3c642a412b989e8f1a29319231",
                    enterpriseId: "5cfbf45fe35d475ca9a59c41b70b114e",
                    headPic: "https://cdn-images-1.medium.com/max/1600/1*HP8l7LMMt7Sh5UoO1T-yLQ.png",
                    hireDate: null,
                    isManager: 1,
                    isManagerStr: "是",
                    name: "张0",
                    phoneNumber: "13588480000",
                    positionName: "公司老大0",
                    sort: 0,
                    userId: "2d92932d626b4058a11c8fb1b8c53956"
                },
                {
                    activationStatus: 0,
                    departmentId: "8acdb364b1f649328b99cbac338098ad",
                    departmentName: "无",
                    employeeClerkId: "12a2ef3c642a412b989e8f1a29319231",
                    enterpriseId: "5cfbf45fe35d475ca9a59c41b70b114e",
                    headPic: "https://cdn-images-1.medium.com/max/1600/1*HP8l7LMMt7Sh5UoO1T-yLQ.png",
                    hireDate: null,
                    isManager: 1,
                    isManagerStr: "是",
                    name: "张0",
                    phoneNumber: "13588480000",
                    positionName: "公司老大0",
                    sort: 0,
                    userId: "2d92932d626b4058a11c8fb1b8c53956"
                }
            ]
        };
        
    },
    methods: {
        /**
         * 删除选中的人
         */
        delCurrent(person, listName) {
            let that = this;
            let list = that[listName];
            console.log(list.indexOf(person));
            list.splice(list.indexOf(person), 1);
        }
    }
};
</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;
            }
        }
    }
    .check-more {
        color: #409EFF;
        margin: 20px 0;
        cursor: pointer;
    }
}
</style>


