<template>
	<!-- 添加或修改店铺对话框 -->
	<el-dialog title="店铺设置" :visible.sync="open" width="900px" append-to-body >
		<el-tabs v-model="activeName" @tab-click="handleClick">
			<el-tab-pane label="店铺信息" name="first">
				<AddShop :shopId="shopId" @setShopId="setShopId" @closeDialog="closeHandle"/>
			</el-tab-pane>
			<el-tab-pane :disabled="!shopId" label="机器信息" name="second">
				<Machine ref="Machine" :shopId="shopId" />
			</el-tab-pane>
			<el-tab-pane :disabled="!shopId" label="商品信息" name="third">
				<Commodity ref="Commodity" :shopId="shopId" />
			</el-tab-pane>
			<el-tab-pane :disabled="!shopId" label="点单屏推荐" name="fourth">
				<Recommend ref="Recommend" :shopId="shopId" />
			</el-tab-pane>
			<el-tab-pane :disabled="!shopId" label="今日特惠" name="fixe">
				<TodaySpecial ref="TodaySpecial" :shopId="shopId" />
			</el-tab-pane>
		</el-tabs>
	</el-dialog>
</template>
<script>
import AddShop from './components/addShop.vue'
import Machine from './components/machine.vue'
import Commodity from './components/commodity.vue'
import Recommend from './components/recommend.vue'
import TodaySpecial from './components/TodaySpecial.vue'


export default {
	components: { AddShop, Machine, Commodity, Recommend, TodaySpecial },
	data() {
		return {
			activeName: 'first',
			open: false,
			shopId: ''
		};
	},
	watch: {
		activeName(value) {
      if (value == 'second') {
				this.$refs.Machine.getList()
			}
      if (value == 'third') {
				this.$refs.Commodity.getList()
			}
			if (value == 'fourth') {
				this.$refs.Recommend.getList()
			}
			if (value == 'fixe') {
				this.$refs.TodaySpecial.getList()
			}
		}
	},
	methods: {
		setShopId(id) { this.shopId = id },
		handleClick(tab, event) { },
		/** 新增按钮操作 */
		openModal(shopId) {
			this.setShopId(shopId)
			this.open = true;
		},
    closeHandle () {
      this.open = false  // 控制取消和X按钮，关闭弹窗
    }

	}
};
</script>

<style>
</style>