<template>
	<page-meta :page-font-size="fontValue+'px'" :root-font-size="fontValue+'px'"></page-meta>
	<view class="certificate-list">
		<Navbar2 title="核验详情" :showRightText="false" :isBack="true"/>
		<view style="width: 100%;height: auto;background: #FFF;padding: 20rpx;">
			<u-search shape="round" placeholder="搜索"  v-model="keyword" :showAction="true" actionText="搜索" :animation="false" @custom="searchList"></u-search>
		</view> 
		<view class="scroll-item">
			<!-- <image v-if="pageParmas.status==1" style="width: 120rpx;height: 120rpx;position: absolute;top:10%;right: 5%;" src="/static/images/system/statusIcon2.png"></image>
			<image v-if="pageParmas.status==2" style="width: 120rpx;height: 120rpx;position: absolute;top:10%;right: 5%;" src="/static/images/system/statusIcon3.png"></image> -->
			
			<view style="width: 100%;display: flex;margin-bottom: 10rpx;">
				<view style="color: #2A2B2F;font-size: 32rpx;margin-right: 20rpx;font-weight: 600;">{{pageParmas.verifyTitle}}</view>
				<view class="status-view">{{pageParmas.verifyStateName}}</view>
			</view>
			<view class="info-text">任务类型：
				<text v-if="pageParmas.verifyType==1">有无证件核验</text>
				<text v-else-if="pageParmas.verifyType==2">一人多证核验</text>
				<text v-else-if="pageParmas.verifyType==3">出入境时间核验</text>
				<text v-else>无</text>
			</view>
			<view class="info-text">开始时间：{{pageParmas.startTime}}</view>
			<view class="info-text">结束时间：{{pageParmas.endTime}}</view>
			
			<view class="scroll-bottom">
				<view class="scroll-bottom-item" style="border-right: 1px solid rgba(209,211,215,0.5);"> 
					<view class="bottom-item-label">核验人数</view>
					<view class="bottom-item-text">{{pageParmas.verifyAllCount}}</view>
				</view>
				<view class="scroll-bottom-item" style="border-right: 1px solid rgba(209,211,215,0.5);">
					<view class="bottom-item-label">已核验</view>
					<view class="bottom-item-text" style="color: #00CC44;">{{pageParmas.verifyCount}}</view>
				</view>
				<view class="scroll-bottom-item" style="border-right: 1px solid rgba(209,211,215,0.5);">
					<view class="bottom-item-label">未核验</view>
					<view class="bottom-item-text" style="color: #F6AB00;">{{Number(pageParmas.verifyAllCount)-Number(pageParmas.verifyCount)}}</view>
				</view>
				<view class="scroll-bottom-item">
					<view class="bottom-item-label">完成率</view>
					<view class="bottom-item-text" style="color: #1F72EA;">{{Math.ceil((pageParmas.verifyCount/pageParmas.verifyAllCount)*100)}}%</view>
				</view>
			</view>
			
			<view style="width: 100%;display: flex;align-items: center;justify-content: center;font-size: 20rpx;">
				<view style="margin-right: 20rpx;color: #34C759;">一致：{{pageParmas.passCount}}</view>
				<view style="color: #FF3B30;">不一致：{{pageParmas.noPassCount}}</view>
			</view>
		</view> 
		<scroll-view style="width: 100%;height: 65vh;background: #FFF;" @scrolltolower="onScrollTolower" scroll-y="true">	
			<view class="info-item" v-for="(item, index) in infoList" :key="index">  
				<image v-if="item.verifyResult==1" style="width: 120rpx;height: 120rpx;position: absolute;top:10%;right: 5%;" src="/static/images/system/statusIcon3.png"></image>
				<image v-if="item.verifyResult==0" style="width: 120rpx;height: 120rpx;position: absolute;top:10%;right: 5%;" src="/static/images/system/statusIcon4.png"></image>
				<view style="width: 100%;display: flex;margin-bottom: 10rpx;">
					<view style="color: #2A2B2F;font-size: 32rpx;margin-right: 20rpx;font-weight: 600;">{{item.name}}的普通护照</view>
					<view class="status-view" v-if="item.verifyState">
						<text v-if="item.verifyState==0">待核验</text>
						<text v-if="item.verifyState==1">已验证</text>  
					</view>
				</view> 
				<view class="info-text">证件编号：{{item.certificateNo}}</view> 
			</view>
			<view style="margin: 20px 0" v-if="infoList.length > 0">
				<u-loadmore :status="status" nomoreText="没有更多数据了" />
			</view>
			<view v-else class="flex justify-center align-center" style="height: 50vh">
				<u-empty icon="../../static/images/not_order.png" text="暂无数据" textColor="#000" />
			</view>
		</scroll-view> 
	</view>
</template>

<script>
import { certificateVerifyTaskDetailListApi } from '@/api/certificateManage/index.js';
 
export default {
  data() {
    return {
		fontValue:uni.getStorageSync('fontSize') || 8,
		pageParmas:{},
		keyword:"",
		pageNum: 1,
		pageSize: 10,
		total: 0,
		infoList: [
			// {name:"张三",idNumber:'23000020302030230230',time:'2025-10-09 16:23',status:1},
			// {name:"张四",idNumber:'23000020302030230230',time:'2025-10-09 16:23',status:2},
			// {name:"张五",idNumber:'23000020302030230230',time:'2025-10-09 16:23',status:2},
		],
		status: 'loadmore',
		isCheckAll:false,
		chosenList:[]
    }
  },
  onLoad(options) {
  	this.pageParmas = JSON.parse(options.pageParmas)
  	this.getList()
  },
  onShow(){
	  // this.getList()
  }, 
  methods: {
		//搜索
		searchList(value){
			this.pageNum=1
			this.infoList=[]
			this.getList()
		},
		// 翻页
		onScrollTolower(){
			console.log(this.infoList.length)
			if(this.total>this.infoList.length){
				this.pageNum++
				this.getList()
			}
		},
		//获取列表
		async getList() {
			console.log('获取列表')
			const params = {
				pageNum: this.pageNum,
				pageSize: this.pageSize, 
				batchId: this.pageParmas.batchId, 
				name: this.keyword
			} 
			try {
			const res = await certificateVerifyTaskDetailListApi(params)
				console.log('?? ~ getList ~ res:', res)
				this.total = res.total;  
				if(this.pageNum==1){
					this.infoList = res.rows
				}else{
					this.infoList.push(...res.rows)
				}
				this.status = this.total == this.infoList.length ? 'nomore' : 'loadmore'
			} catch (error) {
				console.log(error)
			}
		}
  }
}
</script>

<style lang="scss" scoped>
.certificate-list {
  height: 100vh; 
  background-color: #f8f8f8;
  // padding: 30rpx;
}

.info-item{
	width: 100%;
	height: auto; 
	padding: 20rpx;
	background: #fff;
	border: 1px solid rgba(209,211,215,0.5);
	position: relative;
}
.info-text{
	font-size: 28rpx;
	color: #64686E; 
	margin:20rpx 0rpx;
}
.button-view{
	width: 120rpx;
	border-radius: 10rpx;
	font-size: 28rpx;
	background: #F1F6FF;
	padding: 10rpx;
	text-align: center; 
	border: 1px solid #1F72EA;
	color: #1F72EA;
	margin-right: 20rpx; 
}

.scroll-item{
	width: 100%;
	height: auto;
	margin:20rpx 0;
	background: #fff;
	padding: 30rpx;
	position: relative;
}
.info-text{
	font-size: 28rpx;
	color: #64686E;
	margin-bottom: 10rpx;
}
.scroll-bottom{
	width: 100%;
	margin: 20rpx auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.scroll-bottom-item{
	width: 25%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-content: center;
}
.bottom-item-label{
	text-align: center;margin-bottom: 20rpx;color: #64686E;font-size: 20rpx;
}
.bottom-item-text{
	text-align: center;color: #2A2B2F;font-size: 42rpx;font-weight: 600;
}
.status-view{
	padding: 5rpx 10rpx;
	background: #BEDAFF;
	color: #1F72EA;
	font-size: 24rpx;
	border-radius: 8rpx;
}
</style>