<template>
	<view class="success-container">
		<view class="success-icon">
			<image src="/static/images/success-icon.png" mode="aspectFit"></image>
		</view>
		<view class="success-title">恭喜完成全部检测</view>
		
		<view class="check-list">
			<view class="check-item" v-for="(item, index) in checkItems" :key="index">
				<view class="check-index">{{index + 1}}</view>
				<view class="check-name">{{item.name}}</view>
				<view class="check-status">{{item.status}}</view>
			</view>
		</view>
		
		<view class="button-group">
			<button class="btn-retake" @click="retake">重拍</button>
			<button class="btn-next" @click="goNext">下一步</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				checkItems: [
					{ name: '左手手心', status: '动作检测成功' },
					{ name: '左手手背', status: '动作检测成功' },
					{ name: '左手握拳', status: '动作检测成功' },
					{ name: '右手手心', status: '动作检测成功' },
					{ name: '右手手背', status: '动作检测成功' },
					{ name: '右手握拳', status: '动作检测成功' }
				]
			}
		},
		methods: {
			retake() {
				// 返回到拍照页面
				uni.navigateBack();
			},
			goNext() {
				// 进入下一步
				uni.navigateTo({
					url: '/pages/interview-notice/interview-notice'
				});
			}
		}
	}
</script>

<style>
.success-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 40rpx 30rpx;
}

.success-icon {
	margin-top: 60rpx;
	width: 160rpx;
	height: 160rpx;
}

.success-icon image {
	width: 100%;
	height: 100%;
}

.success-title {
	font-size: 36rpx;
	font-weight: bold;
	margin: 30rpx 0 50rpx;
}

.check-list {
	width: 100%;
	margin-bottom: 60rpx;
}

.check-item {
	display: flex;
	align-items: center;
	margin-bottom: 20rpx;
}

.check-index {
	width: 40rpx;
	height: 40rpx;
	border-radius: 50%;
	background-color: #f0f0f0;
	color: #999;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 24rpx;
	margin-right: 20rpx;
}

.check-name {
	flex: 1;
	font-size: 28rpx;
	color: #333;
}

.check-status {
	font-size: 28rpx;
	color: #67c23a;
}

.button-group {
	display: flex;
	width: 100%;
	justify-content: space-between;
	margin-top: 40rpx;
}

.btn-retake, .btn-next {
	width: 45%;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	border-radius: 8rpx;
}

.btn-retake {
	background-color: #f5f5f5;
	color: #333;
	border: 1px solid #ddd;
}

.btn-next {
	background-color: #003399;
	color: #fff;
}
</style>
