<template>
	<view class="success-container">
		<view class="success-icon">
			<image src="https://data.qicai321.com/minlong/dbf3202a-de17-4d1d-8b8c-d0d708c55552.png" mode="aspectFit"></image>
		</view>
		<view class="success-title">
			<block v-if="isAnalyzing">照片解析中...</block>
			<block v-else>恭喜完成全部检测</block>
		</view>
		
		<view v-if="isAnalyzing" class="loading-container">
			<view class="loading-spinner"></view>
			<view class="loading-text">正在分析照片，请稍候...</view>
		</view>
		
		<view v-else 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" :class="{'status-fail': !item.success}">
					{{item.success ? '动作检测成功' : '动作检测失败'}}
				</view>
			</view>
		</view>
		
		<view class="button-group" v-if="!isAnalyzing">
			<button class="btn-retake" @click="retake" :disabled="isAnalyzing">重新拍摄</button>
			<button class="btn-next" @click="goNext" :disabled="isAnalyzing">
				{{hasFailedItems ? '补拍' : '下一步'}}
			</button>
		</view>
	</view>
</template>

<script>
import { apiBaseUrl } from '@/common/config.js'; // 导入基础URL配置
	export default {
		data() {
			return {
				checkItems: [
					{ name: '左手手心', success: true, type: 'left_palm', description: '展示完整的左手手掌' },
					{ name: '左手手背', success: true, type: 'left_back', description: '展示完整的左手手背' },
					{ name: '左手握拳', success: true, type: 'left_fist', description: '展示完整的左手握拳' },
					{ name: '右手手心', success: true, type: 'right_palm', description: '展示完整的右手手掌' },
					{ name: '右手手背', success: true, type: 'right_back', description: '展示完整的右手手背' },
					{ name: '右手握拳', success: true, type: 'right_fist', description: '展示完整的右手握拳' }
				],
				maxRetries: 3,
				currentRetry: 0,
				retryInterval: 3000, // 3秒
				applicationId: null,
				isAnalyzing: false, // 添加分析状态标志
			}
		},
		computed: {
			hasFailedItems() {
				return this.checkItems.some(item => !item.success)
			},
			failedItems() {
				return this.checkItems.filter(item => !item.success)
			}
		},
		onLoad(options) {
			this.applicationId = uni.getStorageSync('appId')
			this.fetchAnalysisResults()
		},
		methods: {
			async fetchAnalysisResults() {
				try {
					this.isAnalyzing = true // 开始分析时设置状态
					const response = await uni.request({
						url: `${apiBaseUrl}/api/system/job/get_visual_analysis_results?application_id=${this.applicationId}`,
					})
					console.log(response)
					
					// 检查响应状态码
					if (response.data.code === 2001) {
						// 状态码2001表示正在处理中，继续轮询
						setTimeout(() => {
							this.fetchAnalysisResults()
						}, this.retryInterval)
						return
					}
					
					// 处理成功响应
					if (response.data.code === 2000 && response.data.data && response.data.data.photo_results && response.data.data.photo_results.length > 0) {
						this.isAnalyzing = false // 分析完成
						this.processResults(response.data.data.photo_results)
					} else if (this.currentRetry < this.maxRetries) {
						// 如果没有结果且未达到最大重试次数，则重试
						this.currentRetry++
						setTimeout(() => {
							this.fetchAnalysisResults()
						}, this.retryInterval)
					} else {
						this.isAnalyzing = false // 重试结束后也要关闭分析状态
					}
				} catch (error) {
					console.error('获取分析结果失败:', error)
					this.isAnalyzing = false // 发生错误时关闭分析状态
				}
			},
			
			processResults(photoResults) {
				const results = {}
				
				photoResults.forEach(photo => {
					// 根据description匹配对应的检测项
					const checkItem = this.checkItems.find(item => 
						photo.description === item.description
					)
					console.log(checkItem, photo)
					if (checkItem) {
						results[checkItem.type] = photo.part_verification.is_correct_part
					}
				})
				
				this.updateCheckResults(results)
			},
			updateCheckResults(results) {
				this.checkItems = this.checkItems.map(item => ({
					...item,
					success: results[item.type] || false
				}))
			},
			retake() {
				if (this.hasFailedItems) {
					// 携带失败项信息跳转到拍照页面
					uni.navigateTo({
						url: '/pages/interview/interview?retake=true&failedItems=' + 
							 JSON.stringify(this.failedItems.map(item => item.type))
					})
				} else {
					uni.navigateBack()
				}
			},
			goNext() {
				if (!this.hasFailedItems) {
					uni.reLaunch({
						url: '/pages/success/success'
					})
				} else {
					// 使用 redirectTo 替代 navigateTo
					uni.reLaunch({
						url: '/pages/interview_retake/interview_retake?failedItems=' + 
							 JSON.stringify(this.failedItems)
					})
				}
			}
		}
	}
</script>

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

.success-icon {
	margin-top: 162rpx;
	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;
	display: flex;
	flex-direction: column;
	align-content: center;
	flex-wrap: wrap;
}

.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 {
	margin-right: 20px;
	font-size: 28rpx;
	color: #333;
}

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

.status-fail {
	color: #f56c6c;
}

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

.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;
}

.btn-next:disabled {
	background-color: #999;
	opacity: 0.6;
}

.loading-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(255, 255, 255, 0.8);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.loading-spinner {
	border: 4px solid #f3f3f3;
	border-top: 4px solid #003399;
	border-radius: 50%;
	width: 40rpx;
	height: 40rpx;
	animation: spin 1s linear infinite;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.loading-text {
	margin-top: 20rpx;
	font-size: 28rpx;
	color: #333;
}

/* 添加 loading 相关样式 */
.loading-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 40rpx 0;
}

.loading-spinner {
	width: 60rpx;
	height: 60rpx;
	border: 4rpx solid #f3f3f3;
	border-top: 4rpx solid #003399;
	border-radius: 50%;
	animation: spin 1s linear infinite;
	margin-bottom: 20rpx;
}

.loading-text {
	font-size: 28rpx;
	color: #666;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/* 修改按钮禁用状态样式 */
.btn-retake:disabled, .btn-next:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}
</style>
