<template>
	<el-dialog title="退菜" :close-on-click-modal="false" top="16vh" draggable width="760px" :model-value="modelValue"
		@update:model-value="updateVisible">
		<div class="return-dish-summary">
			<div>
				<span>包房名</span>
				<strong>{{ currentRoom.roomName || '-' }}</strong>
			</div>
			<div>
				<span>下单时间</span>
				<strong>{{ currentOrder && currentOrder.createTime ? currentOrder.createTime : '-' }}</strong>
			</div>
		</div>
		<div class="return-dish-list">
			<div class="return-dish-head">
				<span>序号</span>
				<span>菜品名</span>
				<span>现有数量</span>
				<span>退菜数量</span>
			</div>
			<div v-if="returnDishList.length === 0" class="return-dish-empty">暂无可退菜品</div>
			<div v-else class="return-dish-body">
				<div v-for="(item, index) in returnDishList" :key="item.dishId" class="return-dish-item">
					<span>{{ index + 1 }}</span>
					<span class="return-dish-name">{{ item.dishName }}</span>
					<span>{{ item.quantity }}</span>
					<el-input-number v-model="item.returnQuantity" :min="0" :max="item.quantity" :precision="0"
						:step="1" style="width: 120px"></el-input-number>
				</div>
			</div>
		</div>
		<el-form label-position="top" :model="inputForm" class="return-reason-form">
			<el-form-item label="退菜原因">
				<el-input v-model="inputForm.reason" type="textarea" :rows="3" maxlength="500" placeholder="请输入退菜原因"
					show-word-limit></el-input>
			</el-form-item>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="updateVisible(false)" icon="el-icon-circle-close">取消</el-button>
				<el-button type="primary" :loading="submitting" @click="confirmReturnDish()"
					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: () => ({})
		},
		currentOrder: {
			type: Object,
			default: null
		},
		orderedList: {
			type: Array,
			default: () => []
		},
		submitting: {
			type: Boolean,
			default: false
		}
	},
	emits: ['update:modelValue', 'confirm'],
	data() {
		return {
			inputForm: {
				reason: ''
			},
			returnDishList: []
		}
	},
	watch: {
		modelValue(value) {
			if (value) {
				this.resetForm()
			}
		}
	},
	methods: {
		resetForm() {
			this.inputForm = {
				reason: ''
			}
			this.returnDishList = this.orderedList.map(item => {
				return {
					dishId: item.dishId,
					dishName: item.dishName,
					quantity: item.quantity,
					dishSort: item.dishSort,
					returnQuantity: 0
				}
			})
		},
		updateVisible(value) {
			this.$emit('update:modelValue', value)
		},
		confirmReturnDish() {
			const detailList = this.returnDishList
				.filter(item => Number(item.returnQuantity || 0) > 0)
				.map(item => {
					return {
						dishId: item.dishId,
						dishName: item.dishName,
						quantity: -Number(item.returnQuantity || 0),
						dishSort: item.dishSort,
						reason: this.inputForm.reason
					}
				})
			if (detailList.length === 0) {
				this.$message.warning('请填写退菜数量')
				return
			}
			this.$emit('confirm', detailList)
		}
	}
}
</script>

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

.return-dish-summary div {
	min-width: 0;
}

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

.return-dish-summary strong {
	display: block;
	margin-top: 4px;
	font-size: 15px;
	line-height: 22px;
	color: #303133;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.return-dish-list {
	border: 1px solid #ebeef5;
	border-radius: 6px;
	overflow: hidden;
}

.return-dish-head,
.return-dish-item {
	display: grid;
	grid-template-columns: 70px minmax(0, 1fr) 100px 140px;
	gap: 8px;
	align-items: center;
}

.return-dish-head {
	height: 38px;
	padding: 0 12px;
	font-size: 12px;
	color: #909399;
	background: #f7f9fb;
}

.return-dish-body {
	max-height: 320px;
	overflow: auto;
}

.return-dish-item {
	min-height: 58px;
	padding: 10px 12px;
	border-top: 1px solid #ebeef5;
}

.return-dish-name {
	min-width: 0;
	font-weight: 600;
	color: #303133;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.return-dish-empty {
	height: 120px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #909399;
}

.return-reason-form {
	margin-top: 14px;
}
</style>
