<template>
    <LayoutBody>
        <LayoutTab>
            <Tabs :value="activate" animated="false" @on-click="switchTab">
                <Tab-pane :label="tab1.label" :name="tab1.name"></Tab-pane>
                <Tab-pane :label="tab2.label" :name="tab2.name"></Tab-pane>
                <Tab-pane :label="tab3.label" :name="tab3.name"></Tab-pane>
            </Tabs>
            <router-view></router-view>
        </LayoutTab>
    </LayoutBody>
</template>

<script>

export default {
    data() {
        return {
            tab1: {
                label: '发货未完成',
                name: 'undone'
            },
            tab2: {
                label: '发货已完成',
                name: 'done'
            },
            tab3: {
                label: '发货物流表',
                name: 'express'
            },
            activate: ''
        };
    },
    created() {
        const path = this.$route.path;
        const children = ['undone', 'done', 'express'];

        _.each(children, v => {
            const reg = new RegExp(`/${v}`);

        console.log(reg.test(path))

            if(reg.test(path)) {
                this.activate = v;
                return false;
            }
        });
    },
    methods: {
        switchTab(name) {
            this.$router.push({
                name: `trade.allot.${name}`
            });
        }
    },
    components: {}
};
</script>

<style lang="scss" scoped>

</style>