<template>
	<view class="take-photo-container" @touchstart="resetTimer">
		<image class="background-image" src="/static/takebg.png" mode="aspectFill"></image>
		<view class="back-btn" hover-class="hover_btn" @click="handleBack">
			<image class="back-icon" src="/static/icon_back.png" mode="aspectFill"></image>
		</view>
		<text class="header-title">艺术照拍摄</text>
		<view class="main-content">
			<view class="left-section">
				<image class="wrong-img" src="/static/wrong.png" />
				<image class="right-img" src="/static/icon_right.png" />
				<text class="section-text">五官清晰，正面半身照</text>
			</view>
			<view class="right-section">
				<view class="error-examples">
					<view class="error-example">
						<image class="error-img" src="/static/wrong_one.png" />
						<image class="left-img" src="/static/icon_wrong.png" />
						<view>不是正面</view>
					</view>
					<view style="height: 22rpx"></view>
					<view class="error-example">
						<image class="error-img" src="/static/wrong_two.png" />
						<image class="left-img" src="/static/icon_wrong.png" />
						<view>有遮挡</view>
					</view>
					<view style="height: 22rpx"></view>
					<view class="error-example">
						<image class="error-img" src="/static/wrong_three.png" />
						<image class="left-img" src="/static/icon_wrong.png" />
						<view>过于模糊</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom-section">
			<view class="take-photo-btn" hover-class="hover_btn" @click="take">
				<image class="take-photo-icon" src="/static/icon_takepictures.png" /><text
					class="take-photo-text">点击拍照</text>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	let inactivityTimer : number = 0
	const INACTIVITY_TIMEOUT = 3 * 60 * 1000 // 3分钟

	const handleBack = () => {
		uni.navigateBack()
	}

	const take = () => {
		uni.navigateTo({
			url: '/pages/camera/index'
		})
	}

	// 重置定时器
	const resetTimer = () => {
		// 清除现有定时器
		if (inactivityTimer > 0) {
			clearTimeout(inactivityTimer)
		}
		
		// 启动新的定时器
		inactivityTimer = setTimeout(() => {
			// 3分钟无操作，跳转到首页
			uni.reLaunch({
				url: '/pages/index/index'
			})
		}, INACTIVITY_TIMEOUT)
	}

	// 页面加载时启动定时器
	onLoad(() => {
		resetTimer()
	})


	// 页面隐藏时清除定时器
	onHide(() => {
		if (inactivityTimer > 0) {
			clearTimeout(inactivityTimer)
			inactivityTimer = 0
		}
	})

	// 页面卸载时清除定时器
	onUnload(() => {
		if (inactivityTimer > 0) {
			clearTimeout(inactivityTimer)
			inactivityTimer = 0
		}
	})
</script>

<style>
	.take-photo-container {
		height: 100%;
		background-color: #f8f8f8;
		display: flex;
		flex-direction: column;
		position: relative;
	}

	.background-image {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 0;
	}

	.back-btn {
		margin-top: 56rpx;
		margin-left: 36rpx;
		width: 50rpx;
		height: 50rpx;
		border-radius: 25rpx;
		background-color: rgba(255, 255, 255, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		z-index: 1;
	}

	.back-icon {
		width: 45rpx;
		height: 45rpx;
	}


	.header-title {
		margin-top: 31rpx;
		font-weight: bold;
		font-size: 36rpx;
		color: #000000;
		text-align: center;
	}

	/* 头部样式 */
	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 40rpx 48rpx;
	}

	.exit-btn {
		color: #333;
		font-size: 32rpx;
		padding: 16rpx 24rpx;
		border-radius: 12rpx;
	}



	.title {
		display: flex;
		align-items: center;
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}


	/* 主要内容区域 */
	.main-content {
		margin-top: 81rpx;
		display: flex;
		justify-content: space-evenly;
		flex-direction: row;
		height: 50%;
		position: relative;
		z-index: 1;
	}

	/* 左侧区域 */
	.left-section {
		position: relative;
		width: 370.83rpx;
		height: 508.33rpx;
		overflow: visible;
	}

	.wrong-img {
		width: 100%;
		height: 100%;
	}

	.right-img {
		position: absolute;
		bottom: -40rpx;
		right: -20rpx;
		width: 66rpx;
		height: 66rpx;
	}

	.section-text {
		font-weight: bold;
		font-size: 21rpx;
		color: #333333;
		text-align: center;
		line-height: 2.8em;
	}

	/* 右侧区域 */
	.right-section {
		width: 30%;
		height: 90%;
	}

	.error-examples {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	/* 删除 mt-22 工具类，改为内联占位 view 实现间距 */

	.error-example {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		overflow: visible;
		font-weight: 400;
		font-size: 19rpx;
		color: #333333;
	}

	.error-img {
		width: 139.58rpx;
		height: 136.81rpx;
		margin-bottom: 10rpx;
	}

	.left-img {
		position: absolute;
		bottom: 10rpx;
		right: -10rpx;
		width: 40.28rpx;
		height: 40.28rpx;
	}

	.Loading {
		position: fixed;
		z-index: 10001;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(255, 255, 255, 0.98);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 76rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #333333;
		box-shadow: 0 0 100rpx rgba(0, 0, 0, 0.1);
	}


	/* 底部区域 */
	.bottom-section {
		padding: 48rpx;
		height: 100%;
		position: relative;
		z-index: 1;
	}

	.take-photo-btn {
		max-width: 500rpx;
		border: none;
		width: 407.64rpx;
		height: 97.22rpx;
		background: linear-gradient(to left, #FD3C9F, #FCA7D3);
		border-radius: 20rpx;
		flex-direction: row;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		margin: 0 auto;
	}

	.take-photo-icon {
		margin-right: 20rpx;
		width: 29.86rpx;
		height: 27.08rpx;
	}

	.take-photo-text {
		font-size: 28rpx;
		font-weight: bold;
		color: #333333;
	}
</style>