<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="mealType">
					<el-select v-model="inputForm.mealType" placeholder="请选择餐段类型" clearable style="width: 100%"
						@change="onMealTypeChange">
						<el-option label="早餐" value="breakfast"></el-option>
						<el-option label="午餐" value="lunch"></el-option>
						<el-option label="晚餐" value="dinner"></el-option>
						<el-option label="夜宵" value="night"></el-option>
					</el-select>
				</el-form-item>
				<!-- 餐段名称（可手动修改） -->
				<el-form-item label="餐段名称" prop="mealName">
					<el-input v-model="inputForm.mealName" placeholder="如：早餐、午餐" clearable></el-input>
				</el-form-item>
				<!-- 星期选择 -->
				<el-form-item label="适用星期" prop="dayOfWeek">
					<el-select v-model="inputForm.dayOfWeek" placeholder="每天（不限制星期）" clearable style="width: 100%">
						<el-option label="每天" :value="null"></el-option>
						<el-option v-for="(day, index) in weekDays" :key="index" :label="day" :value="index"></el-option>
					</el-select>
				</el-form-item>
				<!-- 开始时间 -->
				<el-form-item label="开始时间" prop="startTime">
					<el-time-select v-model="inputForm.startTime" :picker-options="{ start: '00:00', step: '00:30', end: '23:30' }"
						placeholder="请选择开始时间" style="width: 100%"></el-time-select>
				</el-form-item>
				<!-- 结束时间 -->
				<el-form-item label="结束时间" prop="endTime">
					<el-time-select v-model="inputForm.endTime" :picker-options="{ start: '00:00', step: '00:30', end: '23:59', min: inputForm.startTime }"
						placeholder="请选择结束时间" style="width: 100%"></el-time-select>
				</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 HotelBusinessHoursService from '@/api/hotel/HotelBusinessHoursService'

/** 餐段类型与默认名称映射 */
const MEAL_TYPE_NAMES = {
	breakfast: '早餐',
	lunch: '午餐',
	dinner: '晚餐',
	night: '夜宵'
}

export default {
	data() {
		return {
			title: '',
			method: '',
			visible: false,
			loading: false,
			/** 星期映射：索引对应Calendar常量（0=周日） */
			weekDays: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
			rules: {
				mealType: [{ required: true, message: '请选择餐段类型', trigger: 'change' }],
				mealName: [{ required: true, message: '请输入餐段名称', trigger: 'blur' }],
				startTime: [{ required: true, message: '请选择开始时间', trigger: 'change' }],
				endTime: [{ required: true, message: '请选择结束时间', trigger: 'change' }]
			},
			inputForm: {
				mealType: '',
				mealName: '',
				dayOfWeek: null,
				startTime: '',
				endTime: '',
				sortOrder: 0
			}
		}
	},
	hotelBusinessHoursService: null,
	created() {
		this.hotelBusinessHoursService = new HotelBusinessHoursService()
	},
	methods: {
		/**
		 * 初始化弹窗
		 * @param {string} method - add或edit
		 * @param {string} id - 编辑时传入ID
		 */
		init(method, id) {
			this.method = method
			this.inputForm = {
				mealType: '',
				mealName: '',
				dayOfWeek: null,
				startTime: '',
				endTime: '',
				sortOrder: 0
			}
			if (method === 'add') {
				this.title = '新增营业时段'
			} else if (method === 'edit') {
				this.title = '编辑营业时段'
				this.inputForm.id = id
			}
			this.visible = true
			this.loading = false
			this.$nextTick(() => {
				this.$refs.inputForm.resetFields()
				if (method === 'edit') {
					this.loading = true
					this.hotelBusinessHoursService.queryById(id).then((data) => {
						this.inputForm = {
							id: data.id,
							mealType: data.mealType || '',
							mealName: data.mealName || '',
							dayOfWeek: data.dayOfWeek !== null && data.dayOfWeek !== undefined ? data.dayOfWeek : null,
							startTime: data.startTime || '',
							endTime: data.endTime || '',
							sortOrder: data.sortOrder || 0
						}
						this.loading = false
					}).catch(() => {
						this.loading = false
					})
				}
			})
		},
		/** 餐段类型变化时自动填充名称 */
		onMealTypeChange(val) {
			if (val && MEAL_TYPE_NAMES[val]) {
				this.inputForm.mealName = MEAL_TYPE_NAMES[val]
			}
		},
		/** 提交表单 */
		doSubmit() {
			this.$refs.inputForm.validate((valid) => {
				if (valid) {
					this.loading = true
					this.hotelBusinessHoursService.save(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>
