<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">
                <select-area @callPerSelector="callPerSelector" :treeData="treeData"></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 [];
                }
            },
            treeData: {
                type: Object,
                default() {
                    return {};
                }
            }
        },
        data() {
            return {
                visibleThere: true,
                visibleSelf: false
            };
        },
        methods: {
            /**
             * 切换权限设置
             */
            switchPermission(val, _this, _there) {
                val && (this[_there] = !val);
            },
            callPerSelector(type, list) {
                this.$emit("callPerSelector", type, list);
            }
        },
        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>

