<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>
import _ from 'lodash';

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

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

                if (regx.test(path)) {
                    this.activate = v;
                    return false;
                }
            });
        }
    },
    components: {}
};
</script>

<style lang="scss" scoped>

</style>