<template>
    <div class="jurisdiction-setting">
        <div class="only-visivble-there permission-div">
            本部门员工仅可见本部门员工
            <el-switch
                v-model="visibleThere"
                @change="switchPermission(visibleThere, 'visibleThere', 'visibleSelf')"
                active-color="#409EFF"
                inactive-color="#DCDFE6">
            </el-switch>
            <div class="particular-setting" v-if="visibleThere">
                <!-- <div>
                    <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 visibleApartList" :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, 'vaList')"></i>
                        </li>
                    </ul>
                    <p class="check-more" v-if="vsList.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 visibleSpecialLsit" :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, 'vsList')"></i>
                        </li>
                    </ul>
                    <p class="check-more" v-if="vsList.length > 14">查看更多</p>
                </div> -->
                <select-area></select-area>
            </div>
        </div>
        <div class="only-visivble-self permission-div">
            本部门员工仅可见自己
            <el-switch
                v-model="visibleSelf"
                @change="switchPermission(visibleSelf, 'visibleSelf', 'visibleThere')"
                active-color="#409EFF"
                inactive-color="#DCDFE6">
            </el-switch>
        </div>
    </div>
</template>
<script>
    import selectArea from "components/contacts/permissionSet/selectArea";
    export default {
        name: "permissionSetting",
        components: {
            selectArea
        },
        props: {
            visibleApartList: {
                type: Array,
                default() {
                    return [];
                }
            },
            visibleSpecialLsit: {
                type: Array,
                default() {
                    return [];
                }
            },
            onlySelfApartList: {
                type: Array,
                default() {
                    return [];
                }
            }
        },
        data() {
            return {
                visibleThere: false,
                visibleSelf: false
            };
        },
        methods: {
            /**
             * 切换权限设置
             */
            switchPermission(val, _this, _there) {
                val && (this[_there] = !val);
            }
        },
        computed: {
            vaList() {
                return this.visibleApartList;
            },
            vsList() {
                return this.visibleSpecialLsit;
            },
            osaList() {
                return this.onlySelfApartList;
            }
        }
    };
</script>
<style lang="scss">
.jurisdiction-setting {
    padding: 36px 32px 55px;
    .permission-div {
        margin-bottom: 30px;
        .particular-setting {
            width: 480px;
            min-height: 300px;
            border-radius: 2px;
            background: #F5F7FA;
            margin: 32px 0;
            padding: 20px 20px 1px;
        }
    }
}
</style>

