<template>
    <div class="edit-view">
        <el-tabs type="border-card" class="my-tabs" v-model="active" @tab-click="handleClick">
            <el-tab-pane label="套餐信息" name="first">
                <PackageEdit @next="goNext" />
            </el-tab-pane>
            <el-tab-pane label="套餐内容" :disabled="!id" name="second">
                <PackageGoodsTable ref="setGoodsList" />
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script>
import PackageEdit from '../components/PackageEdit';
import PackageGoodsTable from '../components/PackageGoodsTable';

export default {
    name: 'PackageMain',
    created() {
        if (this.$route.query.id) {
            this.id = this.$route.query.id;
        }
    },
    data() {
        return {
            active: 'first',
            id: 0
        };
    },
    mounted() {
        this.updateType();
    },
    methods: {
        goNext(page) {
            this.active = page;
        },
        updateType() {
            let type = this.$route.query.type;
            //通过拿到的值不同，更改activeName的值
            if (type === '1') {
                this.active = 'first';
            } else if (type === '2') {
                this.active = 'second';
            }
        },
        // 切换tab时再根据标签名的不同将url中的参数值改掉
        handleClick(tab) {
            let queryType;
            if (tab.name === 'first') {
                queryType = 1;
            } else if (tab.name === 'second') {
                queryType = 2;
            }
            //将新的值和url放在一起拼成一个完整的路径
            this.$router.push({
                path: '/packageEdit',
                query: {
                    id: this.id,
                    type: queryType || 1
                }
            });
        }
    },
    components: {
        PackageGoodsTable,
        PackageEdit
    },
    watch: {
        id() {
            if (this.id) {
                this.$refs.setGoodsList.getList(this.id);
            }
        },
        $route() {
            if (this.$route.query.id) {
                this.id = this.$route.query.id;
            }
        }
    }
};
</script>
<style lang="less" scoped></style>
