<template>
	<view class="container">
		<image class="bg" src="/static/game/bg.png" mode="aspectFill"></image>
		
		<view class="header" :style="{ paddingTop: statusBarHeight + 'px' }">
			<image class="title" src="/static/game/title.png" mode="heightFix"></image>
		</view>

		<view class="main-content">
			<view class="beaker-section">
				<view class="beaker-item">
					<image class="beaker-img" src="/static/game/wrs.png"></image>
					<view class="beaker-label polluted">污染水</view>
				</view>
				
				<image class="vs-icon" src="/static/game/vs.png" mode="widthFix"></image>
				
				<view class="beaker-item">
					<image class="beaker-img" src="/static/game/jhs.png"></image>
					<view class="beaker-label purified">净化水</view>
				</view>
			</view>
		</view>

		<view class="bottom-panel">
			<!-- Tabs -->
			<view class="tabs-row">
				<view class="tab-container">
					<image class="tab-btn-active" src="/static/game/active.png" mode="aspectFill"></image>
					<view class="tab-overlay">
						<image class="tab-icon" src="/static/game/TDS.png" mode="heightFix"></image>
						<text class="tab-text active-text">TDS检测</text>
					</view>
				</view>
				<view class="tab-container">
					<image class="tab-btn" src="/static/game/default.png"></image>
					<view class="tab-overlay">
						<image class="tab-icon" src="/static/game/pH.png" mode="heightFix"></image>
						<text class="tab-text">pH检测</text>
					</view>
				</view>
			</view>

			<!-- Instructions Card -->
			<view class="instructions-card ">
				<image class="card-bg" src="/static/game/czsm-bg.png" mode="scaleToFill"></image>
				<view class="card-content">
					<view class="card-title">操作说明</view>
					<view class="card-body">
						<text class="instruction-text">点击“开始检测”按钮测试TDS值</text>
						<image class="ppm-icon" src="/static/game/ppm.png" mode="heightFix"></image>
					</view>
				</view>
			</view>

			<view class="tips-card">
				<view class="tips-header">
					<image class="bulb-icon" src="/static/game/deng.png" mode="widthFix"></image>
					<text class="tips-title">你知道吗？</text>
				</view>
				<view class="tips-body">
					<text>TDS代表总溶解固体，数值越低水质越纯净</text>
				</view>
			</view>

			<view class="bottom-bar">
				<text class="test-status">当前测试: 0/2</text>
				<view class="start-btn-wrapper" @click="startTest">
					<button class="start-btn">开始检测</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight: 20
			}
		},
		onLoad() {
			const systemInfo = uni.getSystemInfoSync();
			this.statusBarHeight = systemInfo.statusBarHeight || 20;
		},
		methods: {
			goBack() {
				uni.navigateBack({
					fail: () => {
						uni.reLaunch({
							url: '/pages/index/index'
						})
					}
				})
			},
			startTest() {
				console.log('Start detection');
				uni.showToast({
					title: '开始检测...',
					icon: 'none'
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100vw;
		height: 100vh;
		position: relative;
		display: flex;
		flex-direction: column;
		color: #333;
		overflow: hidden;
		box-sizing: border-box;
	}

	.bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: -1;
		object-fit: cover;
	}

	.header {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-bottom: 2vh;
		flex-shrink: 0;
		
		.nav-bar {
			width: 100%;
			height: 44px;
			display: flex;
			align-items: center;
			padding: 0 20rpx;
			box-sizing: border-box;
			
			.back-btn {
				display: flex;
				align-items: center;
				background: rgba(255, 255, 255, 0.6);
				padding: 8rpx 16rpx;
				border-radius: 30rpx;
				
				.back-arrow {
					font-size: 32rpx;
					margin-right: 6rpx;
					line-height: 1;
				}
				
				.back-text {
					font-size: 24rpx;
					font-weight: 500;
				}
			}
		}

		.title {
			height: 120rpx;
			width: 54rpx;
			margin-top: 50rpx;
		}
	}

	.main-content {
		flex: 1;
		padding: 0 40rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		overflow: hidden;
		justify-content: center;
	}

	.bottom-panel {
		width: 100%;
		height: 48vh;
		flex-shrink: 0; 
		border-radius: 24rpx 24rpx 0 0;
		border-top: 4rpx solid #728FAF;
		background: linear-gradient(180deg, #E0EBF6 0%, #C3D3E4 100%);
		box-shadow: 0 10rpx 0 0 #FFF inset;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 3vh;
		box-sizing: border-box;
		position: relative;
		z-index: 10;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.beaker-section {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: flex-end;
		margin-bottom: 2vh;
		position: relative;
		flex-shrink: 1;
		
		.beaker-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			
			.beaker-img {
				width: 364rpx;
				height: 541rpx;
				margin-bottom: -10rpx;
			}
			
			.beaker-label {
				padding: 4rpx 26rpx;
				border-radius: 48rpx;
				color: #fff;
				font-size: 30rpx;
				margin-top: 10rpx;
				position: relative;
				top: -5vh;
				z-index: 1;
				
				&.polluted {
					background: linear-gradient(180deg, #B79669 0%, #8C6B46 100%);
					border: 4rpx solid #503F34;
				}
				
				&.purified {
					background: linear-gradient(180deg, #4CAAE4 0%, #3F80D2 100%);
					border: 4rpx solid #3060AD;
				}
			}
		}
		
		.vs-icon {
			width: 108rpx;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			z-index: 99;
		}
	}

	.tabs-row {
		display: flex;
		justify-content: center;
		gap: 60rpx;
		margin-bottom: 2vh;

		.tab-container {
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;

			.tab-overlay {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				z-index: 1;

				.tab-icon {
					height: 48rpx;
					width: 48rpx;
					margin-right: 8rpx;
				}

				.tab-text {
					font-size: 28rpx;
					color: #6E7585;
					font-weight: 600;

					&.active-text {
						color: #fff;
					}
				}
			}
		}

		.tab-btn-active {
			width: 280rpx;
			height: 80rpx;
		}

		.tab-btn {
			width: 240rpx;
			height: 80rpx;
		}
	}

	.instructions-card {
		position: relative;
		width: 90%;
		max-width: 678rpx;
		height: 180rpx;
		margin: 1vh 0;
		border-radius: 24rpx;
		border: 4rpx solid #457AAB;
		background: #BEDCF3;
		box-sizing: border-box;
		flex-shrink: 0;
		
		.card-bg {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 98%;
			height: 94%;
			z-index: 0;
			display: block;
		}
		
		.card-content {
			position: relative;
			z-index: 1;
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			
			.card-title {
				text-align: center;
				font-size: 30rpx;
				font-weight: bold;
				color: #25334D;
				margin-top: 10rpx;
			}
			
			.card-body {
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 0 20rpx;
				
				.instruction-text {
					font-size: 26rpx;
					color: #25334D;
				}
				
				.ppm-icon {
					height: 60rpx;
					margin-left: 10rpx;
				}
			}
		}
	}

	.tips-card {
		width: 90%;
		max-width: 678rpx;
		height: 100rpx;
		background: #BEDCF3;
		border-radius: 24rpx;
		border: 4rpx solid #457AAB;
		padding: 20rpx;
		position: relative;
		box-sizing: border-box;
		margin-top: 2vh;
		flex-shrink: 0;
		
		.tips-header {
			position: absolute;
			top: -24rpx;
			left: 20rpx;
			width: 200rpx;
			height: 48rpx;
			background: linear-gradient(180deg, #52A5D7 0%, #3E83CE 100%);
			border-radius: 48rpx;
			border: 4rpx solid #1B5CA3;
			box-shadow: 0 0 8rpx 0 #FFF inset;
			display: flex;
			align-items: center;
			justify-content: center;
			box-sizing: border-box;
			z-index: 10;
			
			.bulb-icon {
				position: absolute;
				left: -20rpx;
				bottom: -10rpx;
				width: 80rpx;
				height: 80rpx;
				z-index: 12;
			}
			
			.tips-title {
				color: #fff;
				font-size: 22rpx;
				font-weight: bold;
				margin-left: 24rpx;
			}
		}
		
		.tips-body {
			position: absolute;
			top: 0;
			left: 0;
			font-size: 24rpx;
			color: #333;
			line-height: 1.3;
			padding: 30rpx 16rpx 10rpx 16rpx;
			border-radius: 24rpx;
			background: linear-gradient(180deg, #FFF 0%, #D9EBF7 100%);
			width: 100%;
			height: 100%;
			box-sizing: border-box;
			z-index: 5;
			display: flex;
			align-items: center;
		}
	}

	.bottom-bar {
		background: #fff;
		width: 100%;
		padding: 2vh 40rpx;
		padding-bottom: calc(2vh + env(safe-area-inset-bottom));
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.05);
		border-radius: 30rpx 30rpx 0 0;
		margin-top: 2vh;
		
		.test-status {
			font-size: 30rpx;
			font-weight: bold;
			color: #333;
		}
		
		.start-btn {
			background: linear-gradient(to bottom, #4facfe 0%, #00f2fe 100%);
			color: white;
			border-radius: 40rpx;
			padding: 0 50rpx;
			font-size: 30rpx;
			line-height: 70rpx;
			height: 70rpx;
			box-shadow: 0 4rpx 8rpx rgba(0, 140, 255, 0.3);
			border: none;
			
			&::after {
				border: none;
			}
		}
	}
</style>
