<template>
	<div>
		<el-dialog title="房间二维码" :close-on-click-modal="false" draggable width="480px" @close="close"
			v-model="visible">
			<div v-loading="loading" class="qr-dialog-content">
				<div class="qr-info">
					<span class="qr-room-label">房间号</span>
					<span class="qr-room-no">{{ roomNo }}</span>
				</div>
				<div class="qr-image-wrapper">
					<img v-if="qrCodeImage" :src="'data:image/png;base64,' + qrCodeImage" alt="二维码" />
					<div v-else class="qr-placeholder">
						<el-icon style="font-size: 48px; color: #c0c4cc;"><Picture /></el-icon>
						<p>暂无二维码</p>
					</div>
				</div>
				<div class="qr-url-box" v-if="qrCodeUrl" :title="qrCodeUrl">
					<el-icon><Link /></el-icon>
					<span>{{ qrCodeUrl }}</span>
				</div>
				<div class="qr-actions">
					<el-button type="primary" icon="el-icon-download" @click="downloadQr">下载二维码</el-button>
				</div>
			</div>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="close()" icon="el-icon-circle-close">关闭</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script>
export default {
	data() {
		return {
			visible: false,
			loading: false,
			roomNo: '',
			qrCodeUrl: '',
			qrCodeImage: ''
		}
	},
	methods: {
		init(roomNo, qrCodeUrl, qrCodeImage) {
			this.roomNo = roomNo
			this.qrCodeUrl = qrCodeUrl || ''
			this.qrCodeImage = qrCodeImage || ''
			this.visible = true
			this.loading = false
		},
		downloadQr() {
			if (!this.qrCodeImage) return
			const link = document.createElement('a')
			const byteCharacters = atob(this.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.roomNo}.png`
			link.click()
			URL.revokeObjectURL(link.href)
		},
		close() {
			this.visible = false
			this.qrCodeImage = ''
			this.qrCodeUrl = ''
		}
	}
}
</script>

<style scoped>
.qr-dialog-content {
	text-align: center;
}
.qr-info {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-bottom: 16px;
}
.qr-room-label {
	font-size: 14px;
	color: #909399;
}
.qr-room-no {
	font-size: 22px;
	font-weight: 700;
	color: #303133;
	letter-spacing: 2px;
}
.qr-image-wrapper {
	display: flex;
	justify-content: center;
	margin-bottom: 12px;
}
.qr-image-wrapper img {
	width: 260px;
	height: 260px;
	border: 1px solid #ebeef5;
	border-radius: 8px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}
.qr-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 260px;
	height: 260px;
	border: 1px dashed #dcdfe6;
	border-radius: 8px;
	color: #c0c4cc;
}
.qr-placeholder p {
	margin-top: 8px;
	font-size: 14px;
}
.qr-url-box {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 12px;
	background: #f5f7fa;
	border-radius: 4px;
	font-size: 12px;
	color: #909399;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin-bottom: 16px;
}
.qr-url-box .el-icon {
	flex-shrink: 0;
}
.qr-url-box span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.qr-actions {
	display: flex;
	justify-content: center;
}
</style>
