<template>
    <el-tabs v-model="activeName" type="card" @tab-click="handleTabChange">
        <el-tab-pane label="人员视图" name="persionList">
            <persion-view v-if="isFirst" />
        </el-tab-pane>
        <el-tab-pane label="角色视图" name="roleList">
            <role-view v-if="isSecond" />
        </el-tab-pane>
    </el-tabs>
</template>

<script>
import PersionView from "./persionView.vue"
import RoleView from "./roleView.vue"
export default {
    name: "index",
    components: {
        PersionView,
        RoleView
    },
    // 接收父页面传过来的属性
    props: {},
    // 页面数据绑定
    data() {
        return {
            activeName: "persionList",
            isFirst: true,
            isSecond: false
        }
    },
    // 计算属性
    computed: {},
    // 方法
    methods: {
        handleTabChange() {
            const { activeName } = this
            if (activeName === "persionList") {
                this.isFirst = true
                this.isSecond = false
            } else if (activeName === "roleList") {
                this.isFirst = false
                this.isSecond = true
            }
        }
    },
    // 创建组件时调用
    created() {}
}
</script>

<style scoped lang="scss">
@import "@/assets/style/my-card.scss";

.authen-main {
    .select-item-tab-text {
        display: block;
        height: 30px;
        line-height: 30px;
        padding-left: 10px;
        border-bottom: 1px dashed #a9a9a9;
        font-size: 16px;
        margin-bottom: 10px;

        .selected {
            font-weight: bold;
            color: red;
        }
    }
}
</style>
