<template>
	<div>
		<el-dialog :title="title" :close-on-click-modal="false" draggable width="500px" @close="close"
			@keyup.enter.native="doSubmit" v-model="visible">
			<el-form :model="inputForm" ref="inputForm" v-loading="loading" :rules="rules" label-width="100px"
				@submit.native.prevent>
				<el-form-item label="关联菜品" prop="dishId">
					<el-select v-model="inputForm.dishId" placeholder="请选择菜品" clearable filterable style="width: 100%">
						<el-option v-for="item in dishList" :key="item.id" :label="item.name" :value="item.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="规格组名称" prop="groupName">
					<el-input v-model="inputForm.groupName" placeholder="如：熟度、酱汁、份量" clearable></el-input>
				</el-form-item>
				<el-form-item label="是否必选" prop="required">
					<el-radio-group v-model="inputForm.required">
						<el-radio :label="1">必选</el-radio>
						<el-radio :label="0">可选</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="排序号" prop="sortOrder">
					<el-input-number v-model="inputForm.sortOrder" :min="0" :max="999" style="width: 100%"></el-input-number>
				</el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="close()" icon="el-icon-circle-close">关闭</el-button>
					<el-button type="primary" @click="doSubmit()" icon="el-icon-circle-check"
						v-noMoreClick>确定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script>
import HotelDishSpecService from '@/api/hotel/HotelDishSpecService'
import HotelDishService from '@/api/hotel/HotelDishService'

export default {
	data() {
		return {
			title: '',
			method: '',
			visible: false,
			loading: false,
			dishList: [],
			rules: {
				dishId: [{ required: true, message: '请选择关联菜品', trigger: 'change' }],
				groupName: [{ required: true, message: '请输入规格组名称', trigger: 'blur' }]
			},
			inputForm: {
				dishId: '',
				groupName: '',
				required: 0,
				sortOrder: 0
			}
		}
	},
	hotelDishSpecService: null,
	hotelDishService: null,
	created() {
		this.hotelDishSpecService = new HotelDishSpecService()
		this.hotelDishService = new HotelDishService()
	},
	methods: {
		/** 加载菜品列表（下拉框用） */
		loadDishList() {
			this.hotelDishService.page({ 'current': 1, 'size': 10000 }).then((data) => {
				this.dishList = (data.records || []).filter(d => d.status === 'ON_SALE')
			})
		},
		init(method, id) {
			this.method = method
			this.inputForm = {
				dishId: '',
				groupName: '',
				required: 0,
				sortOrder: 0
			}
			if (method === 'add') {
				this.title = '新增规格组'
			} else if (method === 'edit') {
				this.title = '编辑规格组'
				this.inputForm.id = id
			}
			this.visible = true
			this.loading = false
			this.loadDishList()
			this.$nextTick(() => {
				this.$refs.inputForm.resetFields()
				if (method === 'edit') {
					this.loading = true
					this.hotelDishSpecService.queryGroupById(id).then((data) => {
						this.inputForm = {
							id: data.id,
							dishId: data.dishId,
							groupName: data.groupName,
							required: data.required || 0,
							sortOrder: data.sortOrder || 0
						}
						this.loading = false
					}).catch(() => {
						this.loading = false
					})
				}
			})
		},
		doSubmit() {
			this.$refs.inputForm.validate((valid) => {
				if (valid) {
					this.loading = true
					this.hotelDishSpecService.saveGroup(this.inputForm).then(() => {
						this.$message.success('操作成功')
						this.close()
						this.$emit('refreshList')
						this.loading = false
					}).catch(() => {
						this.loading = false
					})
				}
			})
		},
		close() {
			this.$refs.inputForm && this.$refs.inputForm.resetFields()
			this.visible = false
		}
	}
}
</script>
