<template>
	<view>
		<z-paging ref="paging" v-model="list" @query="getQuery" emptyViewImg="/static/nodata.png">
		
		<view class="vipData"  :slot="top" style="flex-wrap: wrap;">
			<view class="w25">共 <text>{{ tablePersonInfo.total }}</text>人</view>
			<view class="w25" v-for="l in tablePersonInfo.levelArr" :key="l.level">
				{{ szToHz(l.level) }}级: <text>{{ l.num }} </text>人
			</view>
		</view>
		<view class="userlist">
			<view class="item" v-for="(n,index) in list" :key="index" style="background-color: #fffafa;">
				<view class="w100">
					<view class="name">{{n.realName}} <text>{{n.memName}}</text></view>
					<!-- <view class="date">{{n.idcTypeStr}}：{{n.idcCode}}</view> -->
					<view class="flexbox">
						<view>
							原有级别
							<text v-if="n.levelOld">{{ szToHz(n.levelOld) }}级</text>
							<text v-else>十级</text>
						</view>
						<view>
							考试级别
							<text>
								{{ szToHz(n.levelNew) }}级
							</text>
						</view>
							<view v-if="userType=='2'||userType=='1'">
								金额
								<text>
									¥{{ (n.examFee * 1).toFixed(2) }}
								</text>
							</view>
						<view>
							是否通过
							<text v-if="n.isPass=='1'" class="text-success">通过</text>
							<text v-else class="text-danger">未通过</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		</z-paging>
	</view>
</template>

<script setup>
	import * as api from '@/common/api.js'
	import config from '@/config.js'
	import {szToHz} from '@/common/utils.js'
	import {
		onMounted,
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
		import _ from 'underscore'
	const queryParams = ref({
		pageNum: 1,
		pageSize: 10
	})
	const studentquery = ref({})
	const paging = ref(null)
	const userType = ref('')
	const list = ref([])
	const tablePersonInfo = ref({})
	const total = ref(0)
	const app = getApp();
	onLoad((option)=>{
		if ('studentquery' in option) {
			studentquery.value = JSON.parse(decodeURIComponent(option.studentquery))
			queryParams.value.examId = studentquery.value.examId
		}
		if (app.globalData.isLogin) {
			userType.value = app.globalData.userType
		} else {
			app.firstLoadCallback = () => {
				userType.value = app.globalData.userType
			};
		}
	})
	onMounted(() => {
		// getList()
	})

	function getList() {
		api.getStudentList(queryParams.value).then(res => {
			paging.value.complete(res.rows);
				if(!studentquery.value.recordId){
					getVipData({
						examId:queryParams.value.examId,
						type:'1'
					})
				}else{
					getVipData({
						examId:queryParams.value.examId,
						recordId:studentquery.value.recordId,
						type:'1'
					})
				}
		})
	}
	function getVipData(obj){
		const levelArr = []
		let total = 0
		if(!queryParams.value.examId) return
		api.getExamPersonNum(obj).then(res=>{
			    _.each(res.data, (val, key) => {
			      if (val > 0) {
			        levelArr.push({
			          level: key,
			          num: val
			        })
			        total += val
			      }
			    })
			
			    tablePersonInfo.value = {
			      total: total,
			      levelArr: _.sortBy(levelArr, (l) => {
			        return l.level
			      })
			    }
		})
	}
	function getQuery(pageNum,pageSize) {
		// if(total.value>0&&list.value.length>=total.value){
		// 	return
		// }
		queryParams.value.pageNum = pageNum,
		queryParams.value.pageSize = pageSize
		api.getStudentList(queryParams.value).then(res=>{
			paging.value.complete(res.rows);
			total.value = res.total
			getVipData({
				examId:queryParams.value.examId,
				type:'1'
			})
		})
	}
</script>

<style scoped lang="scss">
	.userlist{    box-sizing: border-box;padding:20rpx 20rpx 0;
		.item{border-bottom: 1px dashed #e5e5e5;position: relative;
		.date{margin-top: 10rpx;}
			.name{
				text{margin-left: 1em;
	color: #4C5359;
	font-size: 26rpx;}
			}
			.nian{position: absolute;right: 20rpx;
	font-size: 30rpx;
	color: #AD181F;}
		}
	}
	.searchbar {
		display: flex;
		align-items: center;
		padding: 25rpx;
		box-sizing: border-box;

		.invertedbtn-red {
			margin-left: 15rpx;
			font-size: 30rpx;
			padding: 16rpx 20rpx;
			box-sizing: border-box;
			border-radius: 50rpx;
			background-color: #fff;
		}

		:deep(.uni-easyinput .uni-easyinput__content) {
			border-radius: 35rpx;
			border: none;
			height: 70rpx;
		}

		:deep(.uni-easyinput__content-input) {
			font-size: 26rpx;
		}
	}



</style>