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

export default {
    name: 'SetMealMain',
    created() {
        if (this.$route.query.id) {
            this.id = this.$route.query.id;
        }
    },
    data() {
        return {
            active: 'first',
            id: 0
        };
    },
    methods: {
        goNext(page) {
            this.active = page;
        }
    },
    components: {
        SetGoodsTable,
        SetInfoEdit
    },
    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>
