<template>
    <div>
        <h2>文章分类配置</h2>
        <el-tabs type="border-card" class="tabs">
            <div class="configuration">
                <router-link :to="{path: '/article/ArticleList', query: $route.query}">
                    <span class="el-tab" :class="{ active: !isActive}" @click="tap(false)">文章列表</span>
                </router-link>
                <router-link :to="{path:'/article/BasicInformation', query: $route.query}">
                    <span class="el-tab" :class="{ active: isActive}" @click="tap(true)">基础信息</span>
                </router-link>
            </div>
            <router-view></router-view>
        </el-tabs>

    </div>
</template>

<script>
    import { mapGetters, mapMutations } from 'vuex';
    export default {
        name: "index",
        data() {
            return {
            };
        },
        methods: {
            tap(bol) {
                this.isActiveChange(bol);
            },
            ...mapMutations('utils', {
                isActiveChange: 'isActiveChange',
            })
        },
        computed: {
            ...mapGetters('utils', {
                isActive: 'isActive'
            })
        },
        mounted() {
            if (this.$route.path === '/article/ArticleList') {
                this.isActiveChange(false);
            }
            else {
                this.isActiveChange(true);
            }
        }
    };
</script>

<style scoped>
.el-tab{
    border: 1px solid #eee;
    padding: 12px 30px;
    color: #070707;
    float: left;
    margin-right: -1px;
}
.tabs{
    min-height: 600px;
}
.configuration{
    height: 60px;
    margin: 20px 0 10px;
}
.el-tab:hover{
    color: #409EFF;
}
.el-tab.active{
    background: #eee;
    color: #409EFF;
}
</style>
