<template>
	<div class="page dish-room-page">
		<el-form :inline="true" class="query-form m-b-10" ref="searchForm" :model="searchForm"
			@keyup.enter.native="refreshList()" @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 label="状态" prop="status">
				<el-select v-model="searchForm.status" placeholder="请选择状态" clearable style="width: 120px">
					<el-option label="启用" value="0"></el-option>
					<el-option label="停用" value="1"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="refreshList()" 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="loading">
			<div class="room-grid">
				<div v-for="item in dataList" :key="item.id" class="room-card"
					:class="{ 'room-card-disabled': item.status === '1' }">
					<div class="room-card-top">
						<div>
							<div class="room-name">{{ item.roomName }}</div>
							<div class="room-no">{{ '包房号：' + (item.roomNo || '-') }}</div>
						</div>
						<el-dropdown trigger="click" @command="(command) => handleCommand(command, item)"
							v-if="hasPermission('psi:dishRoom:edit') || hasPermission('psi:dishRoom:del')">
							<span class="room-menu">•••</span>
							<template #dropdown>
								<el-dropdown-menu>
									<el-dropdown-item command="edit"
										v-if="hasPermission('psi:dishRoom:edit')">修改</el-dropdown-item>
									<el-dropdown-item command="status">{{ item.status === '0' ? '停用' : '启用'
									}}</el-dropdown-item>
									<el-dropdown-item command="delete" v-if="hasPermission('psi:dishRoom:del')"
										divided>删除</el-dropdown-item>
								</el-dropdown-menu>
							</template>
						</el-dropdown>
					</div>
					<div class="room-status-row">
						<el-tag :type="item.status === '0' ? 'success' : 'error'">
							{{ item.status === '0' ? '启用' : '停用' }}
						</el-tag>
					</div>
					<div class="room-meta">
						<div>
							<span class="meta-label">容纳人数</span>
							<span class="meta-value">{{ item.capacity || 0 }} 人</span>
						</div>
						<div>
							<span class="meta-label">最低消费</span>
							<span class="meta-value">{{ item.minConsumption || 0 }} 元</span>
						</div>
					</div>
					<div class="room-remarks">{{ item.remarks || '暂无备注' }}</div>
				</div>

				<div class="room-card room-add-card" @click="add" v-if="hasPermission('psi:dishRoom:add')">
					<div class="add-icon">+</div>
					<div class="add-text">新增包房</div>
				</div>
			</div>
		</div>

		<DishRoomForm ref="dishRoomForm" @refreshList="refreshList"></DishRoomForm>
	</div>
</template>

<script>
import DishRoomService from '@/api/psi/DishRoomService'
import DishRoomForm from './DishRoomForm'
export default {
	data() {
		return {
			searchForm: {
				roomName: '',
				roomNo: '',
				status: ''
			},
			dataList: [],
			loading: false
		}
	},
	dishRoomService: null,
	created() {
		this.dishRoomService = new DishRoomService()
	},
	components: {
		DishRoomForm
	},
	mounted() {
		this.refreshList()
	},
	activated() {
		this.refreshList()
	},
	methods: {
		add() {
			this.$refs.dishRoomForm.init('add', '')
		},
		edit(id) {
			this.$refs.dishRoomForm.init('edit', id)
		},
		refreshList() {
			this.loading = true
			this.dishRoomService.list({ ...this.searchForm }).then((data) => {
				this.dataList = data
				this.loading = false
			}).catch(() => {
				this.loading = false
			})
		},
		handleCommand(command, row) {
			if (command === 'edit') {
				this.edit(row.id)
			} else if (command === 'delete') {
				this.del(row.id)
			} else if (command === 'status') {
				this.changeStatus(row)
			}
		},
		changeStatus(row) {
			if (row.useStatus === '1') {
				this.$message.warning('该包房正在使用中，无法修改状态')
				return
			}
			const status = row.status === '0' ? '1' : '0'
			const message = status === '0' ? '确定启用该包房吗？' : '确定停用该包房吗？'
			this.$confirm(message, '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.dishRoomService.changeStatus(row.id, status).then((data) => {
					this.$message.success(data)
					this.refreshList()
				})
			})
		},
		del(id) {
			this.$confirm(`确定删除该包房吗？`, '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.loading = true
				this.dishRoomService.delete(id).then((data) => {
					this.$message.success(data)
					this.refreshList()
					this.loading = false
				}).catch(() => {
					this.loading = false
				})
			})
		},
		resetSearch() {
			this.$refs.searchForm.resetFields()
			this.refreshList()
		}
	}
}
</script>

<style scoped>
.dish-room-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 {
	position: relative;
	min-height: 180px;
	border: 3px solid #e5e7eb;
	border-radius: 8px;
	background: #fff;
	padding: 18px;
	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;
}

.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-menu {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 4px;
	cursor: pointer;
	color: #606266;
	font-size: 18px;
	line-height: 1;
}

.room-menu:hover {
	background: #f2f6fc;
	color: #409eff;
}

.room-status-row {
	margin-top: 12px;
}

.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;
}

.room-add-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	border-style: dashed;
	color: #409eff;
}

.add-icon {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: 1px dashed #409eff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28px;
	line-height: 1;
}

.add-text {
	margin-top: 12px;
	font-size: 15px;
}

@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>
