<template>
	<view>
		<view class="wBox">
			<view class="tt">考级基本信息</view>
			<view class="ddd">
				<text class="lab">考级名称：</text>{{ form?.name }}
			</view>
			<view class="ddd">
				<text class="lab">申请日期：</text>{{form?.applyTime?.slice(0,10)}}
			</view>
			<view class="ddd">
				<text class="lab">申请单位：</text>{{ form?.memberName }}
			</view>
			<view class="ddd">
				<text class="lab">考官：</text>{{form?.examinerNames?.split('，').join('/')}}
			</view>
			<view class="ddd">
				<text class="lab">考试开始时间：</text>{{form?.startTime}}
			</view>
			<view class="ddd">
				<text class="lab">考试结束时间：</text>{{form?.endTime}}
			</view>
			<view class="ddd">
				<text class="lab">考级地点：</text>{{form?.address}}
			</view>
			<view class="ddd" v-if="userType=='2'||userType=='1'">
				<text class="lab">总金额：</text>
				<text class="text-danger">¥{{(form?.totalAmount*1).toFixed(2) }}</text>
			</view>
		</view>
		<view class="wBox">
			<view class="tt">
				考生信息
			</view>
			<view class="vipData" 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>
			<view class="goMore" v-if="totalStudent>6" @click="goMoreList">查看全部
				<uni-icons type="forward" size="16"></uni-icons>
			</view>
		</view>
		<view class="wBox">
			<view class="tt">
				审核信息
			</view>
			<view>
				<view class="stepItem" v-for="(n,index) in recordList" :key="index">
					<view class="time">{{n.handleDate||'待审批'}}</view>
					<view class="content">
						<view class="status">
							<text :class="{
                  'text-success':n.auditStatus=='1',
                  'text-danger':n.auditStatus=='2',
                  'text-warning':n.auditStatus=='3'
                }">{{ n.auditStatusStr }}</text>
						</view>
						<!-- <view class="name">第 {{index+1}} 步</view> -->
						<view class="deptName">{{n.deptName}}</view>
						<view v-if="n.auditStatus==2">
							备注：{{n.reason||'/' }}
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script setup>
	import * as api from '@/common/api.js'
	import config from '@/config.js'
	import _ from 'underscore'
	import {
		onMounted,
		ref
	} from 'vue'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	const app = getApp();
	const userType = ref('')
	const form = ref({})
	const tablePersonInfo = ref({})
	const recordList = ref([])
	const list = ref([])
	const totalStudent = ref(0)
	const studentquery = ref({
		pageNum: 1,
		pageSize: 6
	})
	let examId = ''
	let recordId = ''
	onLoad((option) => {
		examId = option.examId
		console.log(option)
		if ('form' in option) {
			form.value = JSON.parse(decodeURIComponent(option.form))
			console.log('form',form.value)
			recordId = form.value.recordId
			studentquery.value.recordId = form.value.recordId
			studentquery.value.examId = form.value.examId
		} else {
			recordId = ''
			studentquery.value.examId = option.examId
			getForm()
		}
	})
	onShow(() => {
		if (app.globalData.isLogin) {
			init()
		} else {
			app.firstLoadCallback = () => {
				init()
			};
		}
	})

	function init() {
		uni.showLoading({
			title: '加载中'
		})
		userType.value = app.globalData.userType
		getRecordList()
		getTablePersonInfo()
	}

	function getForm() {
		api.getLevelApplyInfo(examId).then(res => {
			uni.hideLoading()
			form.value = res.data
			console.log(form.value)
		})
	}

	function getRecordList() {
		api.getApprovalRecord(examId).then(res => {
			recordList.value = res.data.levelSteps
			uni.hideLoading()
		})
	}
	function getTablePersonInfo() {
		api.getStudentList(studentquery.value).then(res=>{
			list.value = res.rows
			totalStudent.value = res.total
			if(!recordId){
				var obj = {
					examId:examId,
					type:'1'
				}
			}else{
				var obj = {
					examId:examId,
					recordId:recordId,
					type:'1'
				}
			}
			const levelArr = []
			let total = 0
			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 szToHz(num) {
	  const hzArr = ['〇', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十']
	  return hzArr[parseInt(num)]
	}
	function goMoreList(){
		const obj = encodeURIComponent(JSON.stringify(studentquery.value))
		let path = `/level/examStudentList?studentquery=${obj}`
		uni.navigateTo({
			url: path
		});
	}
</script>

<style scoped lang="scss">
	.wBox {
		width: 700rpx;
		padding: 30rpx;
		margin: 20rpx auto;
		background: #FFFFFF;
		box-shadow: 0rpx 12rpx 116rpx 0rpx rgba(196, 203, 214, 0.1);
		border-radius: 15rpx;

		.tt {
			color: #0A1629;margin: 0 0 30rpx;
			font-size: 30rpx;
		}
		
		.ddd{font-size: 28rpx;color: #333;    margin: 0 0 10rpx;
			.lab{color: #999;display: inline-block;text-align: justify;}
		}
	}

</style>