<template>
	<view class="page">
		<u-navbar
			title="检查列表"
			:placeholder="true"
			:safeAreaInsetTop="true"
			bgColor="#3375e6"
			titleColor="#ffffff"
			leftIconColor="#ffffff"
			:autoBack="false"
			@leftClick="goHome"
		/>
		<view class="page-content padding">
		<view v-if="loading" class="empty-tip text-gray text-center padding">加载中...</view>

		<view v-else-if="!tableId" class="empty-tip text-gray text-center padding">
			请从首页检查计划进入
		</view>

		<view v-else-if="checkPlanData.length === 0" class="empty-tip text-gray text-center padding">
			暂无检查任务
		</view>

		<view
			v-else
			class="plan-card margin-bottom"
			v-for="item in checkPlanData"
			:key="item.id || item.taskDate"
		>
			<view class="plan-header">
				<text class="plan-header-title">{{ item.name || planName || '检查任务' }}</text>
			</view>
			<view class="plan-body">
				<view class="flex">
					<view class="border-border margin-right-xs">{{ item.runModeName }}完成</view>
					<view class="border-border">{{ item.cycle }}</view>
				</view>
				<view v-if="item.taskDate" class="flex text-gray margin-top">
					<view>任务日期：</view>
					<view style="color: #333333;">{{ formatDate(item.taskDate) }}</view>
				</view>
				<view class="flex text-gray margin-top">
					<view>计划时间：</view>
					<view style="color: #333333;">
						{{ formatDate(item.planStartTime) }}至{{ formatDate(item.planEndTime) }}
					</view>
				</view>
				<view class="flex margin-top align-center">
					<view style="color: #B5B5B5;">完成进度：</view>
					<view class="flex align-center margin-left-sm">
						<view class="cu-progress round">
							<view class="bg-green" :style="{ width: formatProgress(item.progress) + '%' }"></view>
						</view>
						<text class="margin-left-sm">{{ formatProgress(item.progress) }}%</text>
					</view>
				</view>
				<view class="plan-stats margin-top">
					<view class="plan-stat-item">
						<view class="plan-stat-num text-orange">{{ item.totalCount ?? 0 }}</view>
						<view class="plan-stat-label">总检项</view>
					</view>
					<view class="plan-stat-item">
						<view class="plan-stat-num text-yellow">{{ item.pendingCount ?? 0 }}</view>
						<view class="plan-stat-label">待排查</view>
					</view>
					<view class="plan-stat-item">
						<view class="plan-stat-num text-red">{{ item.unusualNum ?? 0 }}</view>
						<view class="plan-stat-label">异常数</view>
					</view>
					<view class="plan-stat-item">
						<view class="plan-stat-num text-blue">{{ item.finishedCount ?? 0 }}</view>
						<view class="plan-stat-label">已完成</view>
					</view>
				</view>
				<view class="margin-top margin-bottom flex justify-end">
					<!-- <button class="cu-btn round lg light bg-blue margin-right" @click.stop="viewDetails(item)">
						查看详情
					</button> -->
					<button
						class="cu-btn round lg bg-blue"
						@click.stop="startCheck(item)"
					>
						检查处置
					</button>
				</view>
			</view>
		</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad, onShow, onBackPress } from '@dcloudio/uni-app';
import { getPlanTableDetail } from '@/request/api.js';

const loading = ref(true);
const checkPlanData = ref([]);
const tableId = ref('');
const planName = ref('');

const listParams = {
	pageNum: 1,
	pageSize: 100,
	name: ''
};

const formatDate = (dateStr) => {
	if (!dateStr) return '';
	return String(dateStr).split(' ')[0];
};

const formatProgress = (progress) => {
	const num = Number(progress);
	if (Number.isNaN(num)) return 0;
	return Math.min(100, Math.max(0, num));
};

const fetchList = async () => {
	if (!tableId.value) {
		loading.value = false;
		checkPlanData.value = [];
		return;
	}

	loading.value = true;
	try {
		const res = await getPlanTableDetail({
			...listParams,
			tableId: tableId.value
		});
		if (res.code === 0) {
			checkPlanData.value = res.data?.records || [];
		} else {
			uni.showToast({ title: res.msg || '获取检查清单失败', icon: 'none' });
		}
	} catch (error) {
		console.error('获取检查清单失败:', error);
		uni.showToast({ title: '获取检查清单失败', icon: 'none' });
	} finally {
		loading.value = false;
	}
};

const viewDetails = (item) => {
	uni.navigateTo({
		url: `/pages/plandetail/plandetail?id=${item.id || tableId.value}`
	});
};

const startCheck = (item) => {
	const oneTableId = item.id;
	const taskDate = formatDate(item.taskDate);
	if (!oneTableId || !taskDate) {
		uni.showToast({ title: '缺少任务参数', icon: 'none' });
		return;
	}
	const name = item.name || planName.value || '';
	const tableIdQuery = tableId.value ? `&tableId=${tableId.value}` : '';
	uni.navigateTo({
		url: `/pages/Inspectionresult/detail?oneTableId=${oneTableId}&taskDate=${encodeURIComponent(taskDate)}&name=${encodeURIComponent(name)}${tableIdQuery}`
	});
};

onLoad((options) => {
	if (options.tableId) {
		tableId.value = options.tableId;
	}
	if (options.name) {
		planName.value = decodeURIComponent(options.name);
	}
});

onShow(() => {
	fetchList();
});

const goHome = () => {
	uni.switchTab({
		url: '/pages/index/index'
	});
};

onBackPress(() => {
	goHome();
	return true;
});
</script>

<style lang="scss" scoped>
.page {
	min-height: 100vh;
	background: #EBF2FC;
}

.empty-tip {
	font-size: 28rpx;
}

.plan-card {
	border-radius: 16rpx;
	overflow: hidden;
	box-shadow: 0rpx 2rpx 6rpx 2rpx rgba(0, 0, 0, 0.06);
}

.plan-header {
	background: linear-gradient(135deg, #4A90E2 0%, #2667E9 100%);
	padding: 24rpx 30rpx;
	display: flex;
	align-items: center;

	.plan-header-title {
		color: #fff;
		font-size: 30rpx;
		font-weight: bold;
	}
}

.plan-body {
	padding: 24rpx 30rpx 10rpx 30rpx;
	background: #fff;
}

.plan-stats {
	display: flex;
	background: #F5F7FA;
	border-radius: 12rpx;
	border: 1rpx solid #E8ECF0;
	overflow: hidden;

	.plan-stat-item {
		flex: 1;
		text-align: center;
		padding: 20rpx 0;
		border-right: 1rpx solid #E8ECF0;

		&:last-child {
			border-right: none;
		}
	}

	.plan-stat-num {
		font-size: 36rpx;
		font-weight: bold;
	}

	.plan-stat-label {
		font-size: 24rpx;
		color: #666;
		margin-top: 8rpx;
	}
}

.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;
	border: 2rpx solid #AAC5FC;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 28rpx;
	color: #2667E9;
}
</style>
