<template>
    <div class="inner-container">
        <div class="tabBox">
            <el-tabs tab-position="left" v-model="activeName" @tab-click="handleClick">
                <el-tab-pane v-for="(item, index) in routerList" :key="index" :name="item.path" :label="item.label">
                </el-tab-pane>
            </el-tabs>
        </div>
        <div class="infoBox">
            <router-view />
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            activeName: "",
            showList: [],
            routerList: [
                {label: "收入模板管理", path: "/incomeExcelTemplate", name: "incomeExcelTemplate"},
                {label: "收入信息收集", path: "/incomeExcelIssued", name: "incomeExcelIssued"},
                {label: "收入信息发布", path: "/incomeExcelView", name: "incomeExcelView"},
                {label: "收入附件收集", path: "/incomeExcelAppendix", name: "incomeExcelAppendix"}
            ],
        };
    },
    computed: {
        menuList: function() {
            let arr = [];
            this.routerList.map((item) => {
                this.showList.map((row) => {
                    if (item.path == row) {
                        arr.push(item);
                    }
                });
            });
            return arr;
        },
    },
    methods: {
        handleClick(val) {
            if (this.$route.path != this.activeName) {
                console.log(this.activeName);
                this.$router.push(this.activeName);
            }
        },
    },
    mounted() {
        this.activeName = this.$route.path;
    },
    created() {
        JSON.parse(sessionStorage.childrenMenus).map((item) => {
            this.showList.push(item.jspUrl);
        });
    },
    watch: {
        $route(to, from) {
            this.activeName = this.$route.path;
        },
    },
};
</script>
<style>
.el-tabs__content {
    display: none;
}
.inner-container{
    display: flex;
    justify-content: space-between;
}
.tabBox{
    width: 135px;
}
.infoBox{
    background: #f4f4f4!important;
    height: 100%;
    width: calc(100% - 135px)
}
</style>
