<template>
    <div class="performance-container flex-justify-start">
        <div>
            <el-tabs tab-position="left" v-model="name">
                <el-tab-pane
                    v-for="({ label, name }, index) in routes"
                    :key="index"
                    :name="name"
                    :label="label"
                ></el-tab-pane>
            </el-tabs>
        </div>
        <div class="container-viewport flex-1">
            <div class="font-size-30 padding-bottom-20 padding-left-20">
                {{ handleLabel(name) }}
            </div>
            <div :is="`${name}`"></div>
        </div>
    </div>
</template>
<script>
import department from "./department.vue";
import mould from "./mould.vue";
import issue from "./issue.vue";
import reply from "./reply.vue";
export default {
    components: {
        department,
        mould,
        issue,
        reply,
    },
    data() {
        return {
            name: "department",
            routes: [
                {
                    label: "部门绩效",
                    name: "department",
                },
                {
                    label: "模板管理",
                    name: "mould",
                },
                {
                    label: "下发管理",
                    name: "issue",
                },
                {
                    label: "回复统计",
                    name: "reply",
                },
            ],
        };
    },
    methods: {
        handleLabel(name) {
            const array = this.routes.filter(
                (element) => element.name === name
            );
            return array[0].label;
        },
    },
};
</script>
<style lang="scss" scoped>
.performance-container {
    padding: 20px;
    height: 100%;
    &-viewport {
        overflow: auto;
    }
}
</style>
