<template>
	<view class="page padding">
		<view class="padding  bg-white  radius">
			<view class="text-bold">{{ planData?.name || '加载中...' }}</view>
			<view class="flex margin-top">
				<view class="border-border margin-right-xs">任务ID: {{ planData?.taskId }}</view>
				<view class="border-border">检查点: {{ planData?.checkPointId }}</view>
			</view>
			<view class="flex text-gray margin-top">
				<view>状态：</view>
				<view>{{ planData?.status === 1 ? '进行中' : '已完成' }}</view>
			</view>
			<view class="flex margin-top align-center">
				<view>完成进度：</view>
				<view class="flex align-center margin-left-sm">
					<view class="cu-progress round">
						<view class="bg-green" :style="{ width: progressPercent + '%' }"></view>
					</view>
					<text class="margin-left-sm">{{ planData?.currentIndex || 0 }}/{{ planData?.totalCount || 0 }}</text>
				</view>
			</view>
		</view>
		<view class="padding  bg-white  radius margin-top" >
			<view class="text-bold">检查内容</view>
			<view class="bg-gray padding radius">
				<rich-text :nodes="planData?.point || ''"></rich-text>
			</view>
		</view>
		<view class="padding  bg-white  radius margin-top">
			<view class="text-bold">检查结果</view>
			<view class="bg-gray padding radius">
				{{ planData?.result || '暂无结果' }}
			</view>
		</view>
		<view class="padding  bg-white  radius margin-top">
			<view class="text-bold">备注</view>
			<view class="bg-gray padding radius">
				{{ planData?.remark || '暂无备注' }}
			</view>
		</view>
		<view class="padding bg-white radius margin-top" v-if="planData?.isLast === false">
			<view class="text-gray text-sm text-center">还有更多检查项</view>
		</view>
	</view>
</template>

<script  setup> 
	import { ref, computed } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import { enterCheckPlan, getCheckTaskDetail } from '@/request/api.js';
	
	const loading = ref(true);
	const planData = ref(null);
	
	// 计算进度百分比
	const progressPercent = computed(() => {
		if (!planData.value || !planData.value.totalCount) return 0;
		return Math.round((planData.value.currentIndex / planData.value.totalCount) * 100);
	});
	
	// 先调用 start 接口获取 taskId，再获取详情
	const fetchTaskDetail = async (oneTableId) => {
		try {
			// 第一步：调用 start 接口获取 taskId
			const startRes = await enterCheckPlan(oneTableId);
			if (startRes.code === 0 && startRes.data) {
				const taskId = startRes.data.taskId;
				
				// 第二步：用 taskId 获取任务详情
				const detailRes = await getCheckTaskDetail(taskId);
				if (detailRes.code === 0 && detailRes.data) {
					planData.value = detailRes.data;
					loading.value = false;
				}
			}
		} catch (error) {
			console.error('获取任务详情失败:', error);
		} finally {
			loading.value = false;
		}
	};
	
	onLoad((options) => {
		if (options.id) {
			fetchTaskDetail(options.id);
		}
	});
	
</script>

<style lang="scss" scoped>
	.page {
		min-height: 100vh;
		background: #EBF2FC;
	}
	.cu-progress {
		width: 300rpx;
		height: 20rpx;
		background: #ebeef5;
		border-radius: 100rpx;
		overflow: hidden;
	
		view {
			height: 100%;
			border-radius: 100rpx;
			transition: width 0.3s ease;
		}
	}
	
	.bg-green {
		background: #2667E9;
	}
	.border-border {
		padding: 10rpx;
		background: #EEF3FF;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		border: 2rpx solid #AAC5FC;
		text-align: center;
		justify-content: center;
		align-items: center;
		display: flex;
		font-size: 28rpx;
		color: #2667E9;
	}
</style>