<template>
	<view class="container">
		<!-- 顶部标题栏 -->
		<view class="header">
			<text class="header-left">环江毛南族自治县政务服务中心</text>
			<text class="header-center">自助取号机</text>
			<view class="btn-group">
				<view class="btn" v-if="backBtn" @click="back">
					<img src="../../static/images/home/back_icon.png" alt="" />
					<text class="btn-text">返回</text>
				</view>
				<view class="btn" v-if="logoutBtn" @click="logout">
					<img src="../../static/images/home/logout_icon.png" alt="" />
					<text class="btn-text">退出</text>
				</view>
			</view>
		</view>

		<!-- 主体内容区 -->
		<view class="main">
			<slot name="main"></slot>
		</view>

		<!-- 底部状态栏 -->
		<view class="footer">
			<text class="footer-left">本机编号: YJS0001</text>
			<text class="footer-right">{{ currentTime }}</text>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			backBtn: {
				type: Boolean,
				default: false
			},
			logoutBtn: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				currentTime: ''
			}
		},
		mounted() {
			this.updateTime()
			setInterval(() => {
				this.updateTime()
			}, 1000)
			// APP端强制横屏
			// #ifdef APP-PLUS
			plus.screen.lockOrientation('landscape-primary')
			// #endif
		},
		methods: {
			updateTime() {
				const now = new Date()
				const year = now.getFullYear()
				const month = String(now.getMonth() + 1).padStart(2, '0')
				const day = String(now.getDate()).padStart(2, '0')
				const hours = String(now.getHours()).padStart(2, '0')
				const minutes = String(now.getMinutes()).padStart(2, '0')
				const seconds = String(now.getSeconds()).padStart(2, '0')
				this.currentTime = `${year}年${month}月${day}日 ${hours}:${minutes}:${seconds}`
			},
			back() {
				this.$emit('handleBack')
			},
			logout() {
				uni.showModal({
					title: '提示',
					content: '确定要退出吗？',
					success: (res) => {
						if (res.confirm) {
							uni.reLaunch({
								url: '/pages/home/home'
							})
						}
					}
				})
			},
		}
	}
</script>

<style scoped>
	/* 全屏自适应容器 - 百分比布局 */
	.container {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		position: fixed;
		top: 0;
		left: 0;
	}

	/* 顶部标题栏 - 百分比高度 */
	.header {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 22%;
		background: url('../../static/images/home/top_bg.png');
		background-size: 100% 100%;
		display: flex;
		padding: 35px 4% 0;
		border-radius: 0 0 2% 2%;
	}

	.header-left {
		color: #fff;
		font-size: 36px;
		font-weight: 500;
	}

	.header-center {
		position: absolute;
		left: 50%;
		top: 35px;
		transform: translateX(-50%);
		color: #fff;
		font-size: 36px;
		font-weight: bold;
	}

	.btn-group {
		position: absolute;
		right: 4%;
		top: 35px;
		display: flex;
		justify-content: center;
		align-items: center;


		.btn {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-right: 20px;
			width: 160px;
			height: 60px;
			border-radius: 30px;
			background: #fff;
			font-size: 30px;
			color: rgba(51, 51, 51, 1);

			img {
				margin-right: 15px;
				width: 40px;
				height: 40px;
			}
		}
	}

	/* 主体内容区 - 自动占满剩余空间 */
	.main {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		background: url('../../static/images/home/bg.png');
		background-size: 100% 100%;
	}



	/* 底部状态栏 - 百分比高度 */
	.footer {
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 80px;
		background: url('../../static/images/home/footer_bg.png');
		background-size: 100% 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 3%;
		border-radius: 2% 2% 0 0;
	}

	.footer-left,
	.footer-right {
		color: #fff;
		font-size: 3vh;
	}
</style>