<!--
    menus:  [
        {
            label: 'test',
            path: '/education/..',
            belongTo: 'SchoolPerformanEvaluate'
        },
    ]
-->
<template>
    <div class="tab-bar">
        <tab :bar-position="position" :line-width="lineWidth">
            <tab-item
                v-for="(item,index) in menus"
                :selected="item.belongTo === currentTab"
                @on-item-click="handleTabItemClick(item.path,item.belongTo)"
                :key="`tab_${index}`"
            >
            {{ item.label }}
            </tab-item>
        </tab>
    </div>
</template>

<script>
import { Tab, TabItem } from 'vux'
export default {
    name: 'Tabs',
    props: {
        // mode 1-用路由路径匹配 eg: menus belongTo属性为当前路由路径  2-用 meta belongTo属性匹配
        mode: {
            type: String,
            default: '1'
        },
        menus: {
            type: Array,
            default: () => {
                return []
            }
        },
        position: {
            type: String,
            default: 'top'
        },
        lineWidth: {
            type: Number,
            default: 3
        }
    },
    components: {
        Tab,
        TabItem
    },
    data () {
        return {
            currentTab: ''
        }
    },
    watch: {
        $route (to, from) {
            let { mode } = this
            this.currentTab = mode === '1' ? this.$route.path : this.$route.meta.belongTo
        }
    },
    mounted () {
        let { mode } = this
        this.currentTab = mode === '1' ? this.$route.path : this.$route.meta.belongTo
    },
    methods: {
        handleTabItemClick (path, belongTo) {
            if (this.currentTab === belongTo) return false
            this.currentTab = belongTo
            this.$emit('change', belongTo)
            this.$router.replace(path)
        }
    }

}
</script>

<style lang="less" scoped>
</style>
