<template>
	<div>
		<el-dialog title="房间详情" :close-on-click-modal="false" draggable width="560px" @close="close"
			v-model="visible">
			<div v-loading="loading">
				<el-descriptions :column="2" border>
					<el-descriptions-item label="房间号">{{ detail.roomNo }}</el-descriptions-item>
					<el-descriptions-item label="房间类型">{{ detail.roomTypeName || '-' }}</el-descriptions-item>
					<el-descriptions-item label="楼层">{{ detail.floor || '-' }}</el-descriptions-item>
					<el-descriptions-item label="状态">
						<el-tag :type="statusTagType(detail.status)" effect="plain">
							{{ statusLabel(detail.status) }}
						</el-tag>
					</el-descriptions-item>
					<el-descriptions-item label="创建时间">{{ detail.createTime || '-' }}</el-descriptions-item>
					<el-descriptions-item label="更新时间">{{ detail.updateTime || '-' }}</el-descriptions-item>
				</el-descriptions>
				<div class="qr-section" v-if="detail.qrCodeImage">
					<div class="qr-section-title">点餐二维码</div>
					<div class="qr-detail-image">
						<img :src="'data:image/png;base64,' + detail.qrCodeImage" alt="二维码" />
					</div>
					<div class="qr-url-box" v-if="detail.qrCodeUrl">
						<span class="qr-url-label">二维码链接：</span>
						<el-input :model-value="detail.qrCodeUrl" readonly size="small">
							<template #append>
								<el-button icon="el-icon-copy-document" @click="copyUrl(detail.qrCodeUrl)"></el-button>
							</template>
						</el-input>
					</div>
					<div class="qr-actions">
						<el-button type="primary" size="small" icon="el-icon-download" @click="downloadQr">下载二维码</el-button>
					</div>
				</div>
				<div v-else class="qr-empty-section">
					<el-empty description="暂无二维码" :image-size="60"></el-empty>
				</div>
			</div>
			<template #footer>
				<el-button @click="close()" icon="el-icon-circle-close">关闭</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script>
import HotelRoomService from '@/api/hotel/HotelRoomService'
export default {
	data() {
		return {
			visible: false,
			loading: false,
			detail: {}
		}
	},
	hotelRoomService: null,
	created() {
		this.hotelRoomService = new HotelRoomService()
	},
	methods: {
		init(id) {
			this.visible = true
			this.loading = true
			this.detail = {}
			this.hotelRoomService.queryById(id).then((data) => {
				this.detail = data
				this.loading = false
			}).catch(() => {
				this.loading = false
			})
		},
		statusLabel(status) {
			const map = { '0': '正常', '1': '暂停', '2': '停用' }
			return map[status] || '未知'
		},
		statusTagType(status) {
			const map = { '0': 'success', '1': 'warning', '2': 'info' }
			return map[status] || 'info'
		},
		copyUrl(url) {
			navigator.clipboard.writeText(url).then(() => {
				this.$message.success('已复制到剪贴板')
			}).catch(() => {
				this.$message.error('复制失败')
			})
		},
		downloadQr() {
			const link = document.createElement('a')
			const byteCharacters = atob(this.detail.qrCodeImage)
			const byteNumbers = new Array(byteCharacters.length)
			for (let i = 0; i < byteCharacters.length; i++) {
				byteNumbers[i] = byteCharacters.charCodeAt(i)
			}
			const byteArray = new Uint8Array(byteNumbers)
			const blob = new Blob([byteArray], { type: 'image/png' })
			link.href = URL.createObjectURL(blob)
			link.download = `二维码_房间${this.detail.roomNo}.png`
			link.click()
			URL.revokeObjectURL(link.href)
		},
		close() {
			this.visible = false
		}
	}
}
</script>

<style scoped>
.qr-section {
	margin-top: 20px;
	padding: 16px;
	background: #f5f7fa;
	border-radius: 6px;
}
.qr-section-title {
	font-size: 14px;
	font-weight: 600;
	color: #303133;
	margin-bottom: 12px;
}
.qr-detail-image {
	text-align: center;
	margin-bottom: 12px;
}
.qr-detail-image img {
	width: 160px;
	height: 160px;
	border: 1px solid #ebeef5;
	border-radius: 8px;
}
.qr-url-box {
	margin-bottom: 12px;
}
.qr-url-label {
	font-size: 12px;
	color: #909399;
	margin-bottom: 4px;
	display: block;
}
.qr-actions {
	text-align: center;
}
.qr-empty-section {
	margin-top: 20px;
}
</style>
