<template>
	<div class="page dish-order-page">
		<el-form :inline="true" class="query-form m-b-10" ref="searchForm" :model="searchForm"
			@keyup.enter.native="refreshRoomList()" @submit.native.prevent>
			<el-form-item label="包房名称" prop="roomName">
				<el-input v-model="searchForm.roomName" placeholder="请输入包房名称" clearable></el-input>
			</el-form-item>
			<el-form-item label="包房编号" prop="roomNo">
				<el-input v-model="searchForm.roomNo" placeholder="请输入包房编号" clearable></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="refreshRoomList()" icon="el-icon-search">查询</el-button>
				<el-button @click="resetSearch()" icon="el-icon-refresh-right">重置</el-button>
			</el-form-item>
		</el-form>

		<div class="room-board" v-loading="roomLoading">
			<div class="room-grid">
				<div v-for="item in roomList" :key="item.id" class="room-card"
					:class="{ 'room-card-disabled': item.status === '1' }" @click="enterOrder(item)">
					<div class="room-card-top">
						<div>
							<div class="room-name">{{ item.roomName }}</div>
							<div class="room-no">{{ '包房号：' + (item.roomNo || '-') }}</div>
						</div>
						<el-tag :type="item.useStatus === '0' ? 'success' : 'primary'">
							{{ item.useStatus === '0' ? '空闲中' : '使用中' }}
						</el-tag>
					</div>
					<div class="room-meta">
						<div>
							<span class="meta-label">容纳人数</span>
							<span class="meta-value">{{ item.capacity || 0 }} 人</span>
						</div>
					</div>
					<div class="room-remarks">{{ item.remarks || '暂无备注' }}</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import DishRoomService from '@/api/psi/DishRoomService'
export default {
	data() {
		return {
			searchForm: {
				roomName: '',
				roomNo: '',
				status: '0'
			},
			roomList: [],
			roomLoading: false
		}
	},
	dishRoomService: null,
	created() {
		this.dishRoomService = new DishRoomService()
	},
	mounted() {
		this.refreshRoomList()
	},
	activated() {
		this.refreshRoomList()
	},
	methods: {
		refreshRoomList() {
			this.roomLoading = true
			this.dishRoomService.list({ ...this.searchForm }).then((data) => {
				this.roomList = data
				this.roomLoading = false
			}).catch(() => {
				this.roomLoading = false
			})
		},
		resetSearch() {
			this.$refs.searchForm.resetFields()
			this.refreshRoomList()
		},
		enterOrder(room) {
			if (room.status === '1') {
				this.$message.warning('该包房已停用')
				return
			}
			this.$router.push({
				path: '/psiManagement/dishManage/order/DishOrderDetail',
				query: {
					roomId: room.id
				}
			})
		}
	}
}
</script>

<style scoped>
.dish-order-page {
	display: flex;
	flex-direction: column;
}

.room-board {
	flex: 1;
	min-height: 0;
	overflow: auto;
	padding: 4px 2px 16px;
}

.room-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

.room-card {
	min-height: 180px;
	border: 3px solid #e5e7eb;
	border-radius: 8px;
	background: #fff;
	padding: 18px;
	cursor: pointer;
	transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.room-card:hover {
	border-color: #409eff;
	box-shadow: 0 8px 22px rgba(31, 45, 61, 0.08);
	transform: translateY(-1px);
}

.room-card-disabled {
	background: #f7f8fa;
	cursor: not-allowed;
}

.room-card-top {
	display: flex;
	justify-content: space-between;
	gap: 12px;
}

.room-name {
	font-size: 20px;
	font-weight: 600;
	line-height: 28px;
	color: #1f2937;
}

.room-no {
	margin-top: 4px;
	font-size: 13px;
	color: #909399;
}

.room-meta {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin-top: 18px;
}

.room-meta > div {
	border-radius: 6px;
	background: #f7f9fb;
	padding: 10px;
}

.meta-label {
	display: block;
	font-size: 12px;
	color: #909399;
	line-height: 18px;
}

.meta-value {
	display: block;
	margin-top: 4px;
	font-size: 16px;
	font-weight: 600;
	color: #303133;
	line-height: 22px;
}

.room-remarks {
	margin-top: 14px;
	color: #606266;
	font-size: 13px;
	line-height: 20px;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

@media (max-width: 1200px) {
	.room-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 760px) {
	.room-grid {
		grid-template-columns: 1fr;
	}
}
</style>
