<template>
	<el-dialog title="确认订单" :close-on-click-modal="false" top="22vh" draggable width="560px" :model-value="modelValue"
		@update:model-value="updateVisible">
		<div class="confirm-order-summary">
			<div>
				<span>包间名</span>
				<strong>{{ currentRoom.roomName || '-' }}</strong>
			</div>
			<div>
				<span>下单时间</span>
				<strong>{{ confirmOrderTime || '-' }}</strong>
			</div>
		</div>
		<el-form label-position="top" :model="inputForm">
			<el-form-item label="备注">
				<el-input v-model="inputForm.tasteRemark" type="textarea" :rows="3" maxlength="500" placeholder="请输入备注"
					show-word-limit></el-input>
			</el-form-item>
			<el-form-item label="特殊要求">
				<el-checkbox-group v-model="selectedSpecialRequirementValues" @change="handleSpecialRequirementChange">
					<el-checkbox v-for="item in $dictUtils.getDictList('special_requirement')" :key="item.value"
						:label="item.value">
						{{ item.label || item.value }}
					</el-checkbox>
				</el-checkbox-group>
			</el-form-item>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="continueOrderDish()" icon="el-icon-circle-close">继续点菜</el-button>
				<el-button type="primary" :loading="submitting" @click="confirmOrderSubmit()"
					icon="el-icon-circle-check">确认下单</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script>
export default {
	props: {
		modelValue: {
			type: Boolean,
			default: false
		},
		currentRoom: {
			type: Object,
			default: () => ({})
		},
		submitting: {
			type: Boolean,
			default: false
		}
	},
	emits: ['update:modelValue', 'confirm', 'continue'],
	data() {
		return {
			confirmOrderTime: '',
			inputForm: {
				tasteRemark: ''
			},
			selectedSpecialRequirementValues: [],
			lastSpecialRequirementValues: []
		}
	},
	watch: {
		modelValue(value) {
			if (value) {
				this.resetForm()
			}
		}
	},
	methods: {
		resetForm() {
			this.confirmOrderTime = this.formatDateTime(new Date())
			this.inputForm = {
				tasteRemark: ''
			}
			this.selectedSpecialRequirementValues = []
			this.lastSpecialRequirementValues = []
		},
		updateVisible(value) {
			this.$emit('update:modelValue', value)
		},
		continueOrderDish() {
			this.updateVisible(false)
			this.$emit('continue')
		},
		confirmOrderSubmit() {
			this.$emit('confirm', {
				tasteRemark: this.inputForm.tasteRemark,
				specialRequirements: ''
			})
		},
		handleSpecialRequirementChange(value) {
			const current = Array.isArray(value) ? value : []
			const previous = this.lastSpecialRequirementValues || []
			current.filter(item => !previous.includes(item)).forEach(item => this.appendRemarkText(this.getSpecialRequirementLabel(item)))
			previous.filter(item => !current.includes(item)).forEach(item => this.removeRemarkText(this.getSpecialRequirementLabel(item)))
			this.lastSpecialRequirementValues = [...current]
		},
		getSpecialRequirementLabel(value) {
			const list = this.$dictUtils.getDictList('special_requirement') || []
			const row = list.find(item => String(item.value) === String(value))
			return row ? (row.label || row.value) : value
		},
		appendRemarkText(text) {
			if (!text) {
				return
			}
			const items = this.getRemarkItems()
			if (!items.includes(text)) {
				items.push(text)
			}
			this.inputForm.tasteRemark = items.join(',')
		},
		removeRemarkText(text) {
			if (!text) {
				return
			}
			let value = this.inputForm.tasteRemark || ''
			if (value.indexOf(`,${text}`) > -1) {
				value = value.split(`,${text}`).join('')
			} else if (value.indexOf(`${text},`) > -1) {
				value = value.split(`${text},`).join('')
			} else {
				value = value.split(text).join('')
			}
			this.inputForm.tasteRemark = this.cleanupRemarkText(value)
		},
		cleanupRemarkText(value) {
			return (value || '').split(',').map(item => item.trim()).filter(item => item).join(',')
		},
		getRemarkItems() {
			return (this.inputForm.tasteRemark || '').split(',').map(item => item.trim()).filter(item => item)
		},
		formatDateTime(value) {
			const date = value ? new Date(value) : new Date()
			const pad = (num) => String(num).padStart(2, '0')
			return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`
		}
	}
}
</script>

<style scoped>
.confirm-order-summary {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin-bottom: 16px;
	padding: 12px;
	border-radius: 6px;
	background: #f7f8fa;
}

.confirm-order-summary div {
	min-width: 0;
}

.confirm-order-summary span {
	display: block;
	font-size: 12px;
	line-height: 18px;
	color: #909399;
}

.confirm-order-summary strong {
	display: block;
	margin-top: 4px;
	font-size: 15px;
	line-height: 22px;
	color: #303133;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
</style>
