<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 {
		onMounted,
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
		import _ from 'lodash'
	const queryParams = ref({
		pageNum: 1,
		pageSize: 20
	})
	const paging = ref(null)
	const userType = ref('')
	const list = ref([])
	const tablePersonInfo = ref({})
	const total = ref(0)
	const app = getApp();
	onLoad((option)=>{
		console.log(option)
		if ('obj' in option) {
			queryParams.value = JSON.parse(decodeURIComponent(option.obj))
		}
		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);
			
			const levelArr = []
				let total = 0
				if(!queryParams.value.recordId){
					var obj = {
						examId:queryParams.value.examId,
						type:'1'
					}
				}else{
					var obj = {
						examId:queryParams.value.examId,
						recordId:queryParams.value.recordId,
						type:'1'
					}
				}
				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) {
		queryParams.value.pageNum = pageNum
		queryParams.value.pageSize = pageSize
		api.getStudentList(queryParams.value).then(res=>{
			paging.value.complete(res.rows);
			// total.value = res.total
		
			const levelArr = []
			let total = 0
			api.getExamPersonNum(queryParams.value.examId, '1').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 szToHz(num) {
	  const hzArr = ['〇', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十']
	  return hzArr[parseInt(num)]
	}
</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>