<template>
	<view>
		<view class="pd30">
			<uni-steps :options="list1" :active="active" />
			<view class="hasfixedbottom">
				<view class="wBox" v-if="active == 0">
					<uni-forms ref="baseForm" :modelValue="form" label-width="100">
						<uni-forms-item label="考试名称">
							<view class="align-forms-item" v-if="form.name">{{form.name}}</view>
							<view v-else class="align-forms-item-placeHolder">自动生成</view>
						</uni-forms-item>
						<uni-forms-item label="申请单位" required>
							<view class="align-forms-item">{{form.memberName}}</view>
						</uni-forms-item>
						<uni-forms-item label="申请日期" required>
							<uni-datetime-picker type="date" v-model="form.applyTime"></uni-datetime-picker>
						</uni-forms-item>
						<uni-forms-item label="考试开始时间" required>
							<uni-datetime-picker type="datetime" v-model="form.startTime"></uni-datetime-picker>
						</uni-forms-item>
						<uni-forms-item label="考试结束时间" required>
							<uni-datetime-picker type="datetime" v-model="form.endTime"></uni-datetime-picker>
						</uni-forms-item>
						<uni-forms-item label="考级地点" required>
							<uni-easyinput v-model="form.examLocation" placeholder="考级地点" />
						</uni-forms-item>
						<uni-forms-item @updateData="updateData" :label="`考官${ec}`" v-for="ec in examinerForChoose"
							:key="ec">
							<view @click="selectFN(ec)" class="mask">
								<uni-easyinput v-model="form[`examiner_${ec}`]" clearable placeholder="点击选择考官" />
							</view>
						</uni-forms-item>

					</uni-forms>

				</view>
				<view class="wBox" v-if="active == 1">
					<!-- 添加考生 -->
					<button class="btn-red-kx mini" @click="chooseOnline">在线选择</button>
					<view class="vipData mt30">
						<view>共<text>{{tablePersonInfo.total}}</text>人</view>
						<view v-for="l in tablePersonInfo.levelArr" :key="l.level">
							{{ szToHz(l.level) }}级：<text>{{tablePersonInfo.total}}</text>人</view>
					</view>
					<view class="userlist">
						<view class="item" v-for="n in infoList" style="background-color: #fffafa;">
							<view class="w100">
								<view style="display: flex;">
								<view class="photobox">
									<image class="photo" v-if="n.photo" :src="config.baseUrl_api+n.photo"
										mode='aspectFill'></image>
									<view class="colorful" v-else>{{n.realName?.slice(0,1)}}</view>
								</view>
								<view>
								<view class="name">{{n.realName}} <text>{{n.perCode}}</text></view>
								<view class="date">{{n.idcTypeStr}}：{{n.idcCode}}</view>
								</view>
								</view>
								<view class="flexbox mt30">
									<view>
										原有级别
										<text style="padding: 15rpx 0;">{{ szToHz(n.levelOld) }}级</text>
									</view>
									<view style="width: 40%;">
										考试级别
										<view @click="changeLevelfather(n)">
											<uni-data-select v-model="n.levelNew" :localdata="levelArr"
												@change="changeLevel"></uni-data-select>
										</view>

									</view>

									<view style="width: 30%;">
										是否通过
										<view>
										<uni-data-select v-model="n.isPass" :localdata="range"
										></uni-data-select>
										</view>
									</view>
								</view>
							</view>

						</view>
						<view class="nodata" v-if="infoList.length==0">
							<image mode="aspectFit" src="/static/nodata.png"></image>
							<text>待添加考生</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="fixedBottom" v-if="active == 0">
			<button class="btn-red-kx" style="width: 40%;" @click="submitForm(0)">保存</button>
			<button class="btn-red" style="width: 40%;" @click="submitForm(1)">下一步</button>
		</view>
		<view class="fixedBottom" v-if="active == 1">
			<button class="btn-red-kx" style="width: 25%;" @click="active=0">上一步</button>
			<button class="btn-red" style="width: 25%;" @click="submitForm2(0)">保存</button>
			<button class="btn-red" style="width: 30%;" @click="submitForm2(1)">提交审核</button>
		</view>


		<uni-popup ref="choseStudent" type="bottom" background-color="#fff" animation>
			<view class="popBody">
				<view class="userlist">
					<view class="item" v-for=" n in studentList">
						<view @click="checkThis(n)">
							<image class="icon" v-if="n.checked" src="@/static/member/dx_dwn.png" />
							<image class="icon" v-else src="@/static/member/dx.png" />
						</view>
						<view class="photobox">
							<image class="photo" v-if="n.photo" :src="config.baseUrl_api+n.photo" mode='aspectFill'>
							</image>
							<view class="colorful" v-else>{{n.name.slice(0,1)}}</view>
						</view>
						<view>
							<view class="name">{{n.name}} <text>{{n.perCode}}</text></view>
							<view class="date">到期时间：{{n.validityDate}}</view>
							<view class="date" style="color: #1561CB;" v-if="n.levelJi&&n.levelJi!=0">级位：{{szToHz(n.levelJi)}}级</view>
							<view class="date" v-else >级位：十级</view>
						</view>
					</view>
						
					<button class="btn-red-kx" @click="submitStudents">确定</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import * as api from '@/common/api.js';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import config from '@/config.js'
	import dayjs from 'dayjs'
	import _ from 'lodash'
	const app = getApp();
	const memberInfo = app.globalData.memberInfo
	const form = ref({

	});
	const dataList = ref([]);
	const examinerForChoose = ['A', 'B', 'C']
	const examinerArr = []
	const active = ref(0)
	const total = ref(0)
	const list1 = ref([{
		title: '考级基本信息'
	}, {
		title: '添加考生'
	}])
	const choseStudent = ref(null)
	const studentList = ref([])
	const infoList = ref([])
	const ids = ref([])
	const tablePersonInfo = ref({})
	const transcript = ref([])
	const levelArr = ref([{value:'10',text:'十级'},{value:'9',text:'九级'},{value:'8',text:'八级'},{value:'7',text:'七级'},{value:'6',text:'六级'},{value:'5',text:'五级'},{value:'4',text:'四级'},{value:'3',text:'三级'},{value:'2',text:'二级'},{value:'1',text:'一级'}])
	const range = ref([{value:'1',text:'是'},{value:'0',text:'否'}])
	let examId
	onLoad(option => {
		console.log(option)
		if (app.globalData.isLogin) {
			form.value.memberName = app.globalData.memberInfo.name
			form.value.applyTime = dayjs().format('YYYY-MM-DD')

			_.each(examinerForChoose, ec => {
				form.value[`examiner_${ec}`] = null
			})
			if (option.examId) {
				examId = option.examId

				getDetail()
			}
		} else {

			app.firstLoadCallback = () => {
				form.value.memberName = app.globalData.memberInfo.name
				form.value.applyTime = dayjs().format('YYYY-MM-DD')

				_.each(examinerForChoose, ec => {
					form.value[`examiner_${ec}`] = null
				})
				if (option.examId) {
					examId = option.examId
					getDetail()
				}
			};
		}
	});
	onShow(option => {
		// 	if(!!option){
		// 		console.log(option)
		// 	}
		uni.$on('chosen', updateData)
	})

	function updateData(e) {
		// console.log(e)
		examinerArr.push(e.obj)
		form.value[`examiner_${e.ec}`] = e.obj.name
	}

	function getDetail() {
		api.getLevelApplyInfo(examId).then(res => {
			const data = res.data
			if (data.examiner) {
				_.each(data.examiner.split(','), (id) => {
					examinerArr.push({
						perId: id
					})
				})

				_.each(data.examinerNames.split('，'), (name, i) => {
					data[`examiner_${examinerForChoose[i]}`] = name
					examinerArr[i].name = name
				})
			}

			form.value = data
		})
	}

	function selectFN(ec) {
		const chosen = []
		const type = form.value.type
		_.each(examinerForChoose, ec => {
			const key = `examiner_${ec}`
			if (form.value[key]) {
				const examiner = _.find(examinerArr, (e) => {
					return e.name == form.value[key]
				})
				if (examiner) {
					chosen.push(examiner)
				}
			}
		})

		console.log(ec, chosen, type)
		let path = `/pages/level/chooseExaminer?type=${type}&chosen=${chosen}&ec=${ec}`
		uni.navigateTo({
			url: path
		});
	}

	function submitForm(flag) {
		form.value.status = '0'
		const examinerIds = []
		const examinerNames = []
		_.each(examinerForChoose, ec => {
			const key = `examiner_${ec}`
			if (form.value[key]) {
				const examiner = _.find(examinerArr, (e) => {
					return e.name == form.value[key]
				})
				if (examiner) {
					examinerIds.push(examiner.perId)
					examinerNames.push(examiner.name)
				}
			}
		})

		if (examinerIds.length > 0) {
			form.value.examiner = examinerIds.join(',')
			form.value.examinerNames = examinerNames.join('，')
		} else {
			form.value.examiner = null
			form.value.examinerNames = null
		}
		form.value.draftFlag = flag === 0 ? '1' : '0'
		if (flag === 0) {
			save()
		} else {
			if (dayjs(form.value.startTime).valueOf() < dayjs(form.value.applyTime).valueOf()) {
				uni.showToast({
					title: `考试开始时间应大于申请日期`,
					icon: 'error'
				})
				return
			}
			if (dayjs(form.value.endTime).valueOf() <= dayjs(form.value.startTime).valueOf()) {
				uni.showToast({
					title: `考试结束时间应大于考试开始时间`,
					icon: 'error'
				})
				return
			}
			if (examinerIds.length % 2 === 0) {
				uni.showToast({
					title: `录入的考官人数必须为单数`,
					icon: 'error'
				})
				return
			}
			save().then(() => {
				// form.value.examId 下一步
				active.value = 1
				getChosedStudentList()
			})
		}
	}

	function save() {
		if (form.value.examId) {
			return api.updateLevelInfo(form.value).then(() => {
				uni.showToast({
					title: `保存成功`,
					icon: 'none'
				})
			})
		} else {
			return api.addLevelInfo(form.value).then((res) => {
				form.value.examId = res.data.examId
				form.value.name = res.data.name
				uni.showToast({
					title: `保存成功`,
					icon: 'none'
				})
			})
		}
	}

	function chooseOnline() {

		var obj = {
			memId: memberInfo.memId,
			examId: form.value.examId,
			examType: form.value.type
		}
		api.chooseStudentsList(obj).then(response => {
			studentList.value = response.rows
			for (var s of studentList.value) {
				s.checked = false
			}
			choseStudent.value.open()
		})
	}

	function checkThis(item) {
		if (item.checked) {
			item.checked = false
		} else {
			item.checked = true
		}
	}

	function submitStudents() {
		ids.value = []
		for (var s of studentList.value) {
			if (s.checked) {
				ids.value.push(s.perId)
			}
		}
		if (ids.value.length == 0) {
			uni.showToast({
				title: '请选择考生',
				icon: 'none'
			})
			return
		}
		api.batchChoose({
			examId: form.value.examId,
			perIds: ids.value
		}).then(() => {
			getChosedStudentList()
			choseStudent.value.close()
		})
	}

	function getChosedStudentList() {
		var obj = {
			examId: form.value.examId
		}
		api.getStudentList(obj).then(res => {
			_.each(res.rows, (d) => {
				if (d.levelOld) {
					d.levelRecommend = (parseInt(d.levelOld) - 1) + ''
					if (d.levelRecommend === '0') {
						d.levelRecommend = '1'
					}
				} else {
					d.levelRecommend = '9'
				}

				if (!d.levelNew) {
					d.levelNew = d.levelRecommend
				}

				if (!d.isPass) {
					d.isPass = '1'
				}
			})

			infoList.value = res.rows

		}).then(getTablePersonInfo)
	}

	function getTablePersonInfo() {
		const total = infoList.value.length
		const levelArr = []
		_.each(infoList.value, (d) => {
			const temp = _.find(levelArr, (l) => {
				return l.level == d.levelNew
			})
			if (temp) {
				temp.num++
			} else {
				levelArr.push({
					level: d.levelNew,
					num: 1
				})
			}
		})

		tablePersonInfo.value = {
			total: total,
			levelArr: _.sortBy(levelArr, (l) => {
				return l.level
			})
		}
	}
	function szToHz(num) {
	  const hzArr = ['〇', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十']
	  return hzArr[parseInt(num)]
	}

	let nowRow
	function changeLevelfather(row){
		nowRow = row
	}
	function changeLevel(e){
		console.log(e)
		if (e !== nowRow.levelRecommend) {
			uni.showModal({
				title: '提示',
				content: `建议考试级别为 "${szToHz(nowRow.levelRecommend)}级" ，确定要修改吗？`,
				success: function(res) {
					if (res.confirm) {
						getTablePersonInfo()
					}
				},
				fail: function (res) {
					 nowRow.levelNew = nowRow.levelRecommend
				}
			})
		}
	}
	function submitForm2(flag){
		  if (flag === 1) {
		    if (infoList.value.length == 0) {
		      uni.showToast({
		      	title: '请选择考生',
		      	icon: 'none'
		      })
		      return
		    }
			    if (!form.value.transcript) {
					uni.showToast({
						title: '请上传成绩单',
						icon: 'none'
					})
			      return
			    }
				
				uni.showModal({
					title: '提示',
					content: `确定提交审核?`,
					success: function(res) {
						saveStep2(flag)
					}
				})
		} else {
			saveStep2(flag)
		}
	}
	function saveStep2(flag){
		  const data = _.map(infoList.value, (d) => {
		    return {
		      id: d.id,
		      levelNew: d.levelNew,
		      // score: d.score,
		      isPass: d.isPass
		    }
		  })
		  return api.editLevel({
		    examId: form.value.examId,
		    personInfo: JSON.stringify(data),
		    transcript: form.value.transcript,
		    status: flag
		  })
	}
	
</script>

<style lang="scss" scoped>
	.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;
	}

	:deep(.uni-forms-item__inner) {
		padding-bottom: 20rpx;
	}
	.popBody{padding: 30rpx;}
</style>