<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 class="maskbox">
								<view class="mask" @click="selectFN(ec)"></view>
								<uni-easyinput v-model="form[`examiner_${ec}`]" clearable placeholder="点击选择考官" />
							</view>
						</uni-forms-item>

					</uni-forms>

				</view>
				<view class="wBox" v-if="active == 1">
					<!-- 添加考生 -->
					<view class="flexbox">
						<button class="btn-red-kx mini w100" @click="chooseOnline">
							<uni-icons type="personadd" size="16" color="#AD181F"></uni-icons>
							在线选择</button>
						<!-- 						<button class="btn-red-kx mini w45" @click="handleUpdate">
							<uni-icons type="upload" size="16" color="#AD181F"></uni-icons>
							上传成绩单</button> -->
					</view>
					<view class="vipData mt30" 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 infoList" :key="index"
							style="background-color: #fffafa;">
							<view class="w100">
								<view class="del" @click="handleDelete(n)">删除</view>
								<view style="display: flex;">
									<!--
									<view class="photobox">
										<image class="photo" v-if="n.photo" :src="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%;">
										考试级别
										<!-- <text style="padding: 15rpx 0;">{{ szToHz(n.levelNew) }}级</text> -->
										<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 :clear="false" 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-kx" 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="searchbar">
					<uni-easyinput placeholderStyle="font-size:30rpx" :input-border="false" prefixIcon="search"
						v-model="studentQuery.name" placeholder="搜索姓名" @blur="chooseOnline" @clear="chooseOnline">
					</uni-easyinput>
				</view>
				<view class="userlist" style="height:80vh;overflow: auto;">
					<view class="item" v-for=" (n,index) in studentList" :key="index">
						<view @click="checkThis(n)">
							<image class="icon" v-if="n.checked"
								:src="config.baseUrl_api+'/fs/static/member/dx_dwn.png'" />
							<image class="icon" v-else :src="config.baseUrl_api+'/fs/static/member/dx.png'" />
						</view>
						<view class="photobox">
							<image class="photo" v-if="n.photo" :src="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>
					<view class="nodata" v-if="studentList.length==0">
						<image mode="aspectFit" src="/static/nodata.png"></image>
						<text>无可参加考试会员</text>
					</view>
				</view>
				<button class="btn-red-kx" v-if="studentList.length!=0" @click="submitStudents">确定</button>
			</view>
		</uni-popup>

		<uni-popup ref="UpPop" type="bottom" background-color="#fff" animation>
			<view class="popBody">
				<view class="h3 text-center">上传成绩单</view>
				<text class="must">*请上传大小不超过 10MB 格式为 png/jpg/jpeg/pdf/zip 的文件</text>
				<uni-file-picker v-model="transcript" class="mtb30" file-mediatype="all"
					file-extname="png,jpg,jpeg,pdf,zip" @select="selectFile" @progress="fileProgress"
					@delete="delSupplementFile"></uni-file-picker>

				<button class="btn-red" @click="uploadSure">确定</button>
			</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 'underscore'
	const app = getApp();
	const memberInfo = app.globalData.memberInfo
	const form = ref({
		type: 1
	});
	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 UpPop = ref(null)
	const studentList = ref([])
	const infoList = ref([])
	const ids = ref([])
	const tablePersonInfo = ref({})
	const transcript = ref([])
	const studentQuery = ref({
		name: ''
	})
	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) {
		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)
				}
			}
		})
		const arr = encodeURIComponent(JSON.stringify(chosen))
		console.log(ec, chosen, type)
		let path = `/level/chooseExaminer?type=${type}&chosen=${arr}&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: 'none'
				})
				return
			}
			save().then(() => {
				// form.value.examId 下一步
				active.value = 1
				getChosedStudentList()
				if (form.value.examId) {
					api.getLevelApplyInfo(form.value.examId).then(res => {
						if (res.data.transcript) {
							transcript.value = JSON.parse(res.data.transcript)
						}
					})
				}
			})
		}
	}

	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() {
		uni.showLoading({
			title: '加载中',
			icon: 'none'
		})
		var obj = {
			memId: memberInfo.memId,
			examId: form.value.examId,
			examType: form.value.type,
			name: studentQuery.value.name
		}
		api.chooseStudentsList(obj).then(response => {
			studentList.value = response.rows
			for (var s of studentList.value) {
				s.checked = false
				if (s.photo && s.photo.indexOf('http') == -1) {
					s.photo = config.baseUrl_api + s.photo
				}

			}
			uni.hideLoading()
			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'
				}
				if (d.photo && d.photo.indexOf('http') == -1) {
					d.photo = config.baseUrl_api + d.photo
				}
			})

			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
		api.jiDropDownBox({
			perId: row.perId
		}).then(res => {
      levelArr.value = res.data
      for (var l of levelArr.value) {
				l.text = l.name
				l.disabled = !(l.status)
			}
		})
	}


	function changeLevel(e) {
    if (e == nowRow.levelOld) {
      uni.showToast({
        title: `考试级别重复，请重新选择！`,
        icon: 'none'
      })
      nowRow.levelNew = nowRow.levelRecommend
			return
		}
		if (e !== nowRow.levelRecommend) {
			uni.showModal({
				title: '提示',
				content: `建议考试级别为 "${szToHz(nowRow.levelRecommend)}级" ，确定要修改为${szToHz(e)}级吗？`,
				success: function(res) {
					if (res.confirm) {
						getTablePersonInfo()
					}else{
						nowRow.levelNew = nowRow.levelRecommend
					}
				},
				fail: function(res) {
					nowRow.levelNew = nowRow.levelRecommend
				}
			})
		}
	}

	function submitForm2(flag) {
    //循环infoList.value 如果item.levelNew == item.levelOld 提示错误
    for (var item of infoList.value) {
      if (item.levelNew == item.levelOld) {
        uni.showToast({
          title: `${item.realName}考试级别重复，请重新选择！`,
          icon: 'none'
        })
        return
      }
      if (!item.levelNew) {
        uni.showToast({
          title: `${item.realName}请选择考试级别！`,
          icon: 'none'
        })
        return
      }
    }
		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) {
					if (res.confirm) {
						console.log('用户点击确定');
						saveStep2(flag).then(Response => {
							uni.showToast({
								title: `操作成功`
							})
							uni.navigateBack()
						})
					} else if (res.cancel) {
						console.log('用户点击取消');
					}

				}
			})
		} else {
			saveStep2(flag).then(res => {
				uni.showToast({
					title: `操作成功`
				})
			})
		}
	}

	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
		})
	}

	function handleUpdate() {
		UpPop.value.open()
	}
	let selectFileValue = {}

	function selectFile(e) {
		let file = e.tempFiles[0]
		if (!file) {
			return
		}
		for (const n in e.tempFiles) {
			api.uploadFileList(e.tempFilePaths[n]).then(data => {
				selectFileValue = {
					url: data,
					name: e.tempFiles[n].name,
					extname: e.tempFiles[n].extname
				}

				transcript.value.push(selectFileValue)
			});
		}

	}

	function fileProgress(e) {
		console.log('progress:' + e)
	}

	function delSupplementFile(e) {
		transcript.value = _.remove(transcript.value, function(n) {
			return n.name != e.tempFile.name;
		});
	}

	function uploadSure() {
		// 上传确定
		if (transcript.value.length == 0) {
			uni.showToast({
				title: `请上传成绩单`,
				icon: 'error'
			})
			return
		}

		form.value.transcript = JSON.stringify(_.map(transcript.value, (t) => {
			return {
				name: t.name,
				url: t.url
			}
		}))
		UpPop.value.close()
	}

	function handleDelete(row) {
		uni.showModal({
			title: '提示',
			content: `确定删除${row.realName}?`,
			success: function(res) {
				if (res.confirm) {
					api.dellevelPerson(row.id).then(res => {
						uni.showToast({
							title: `操作成功`
						})
						getChosedStudentList()
					})
				}
			}
		})
	}
</script>

<style lang="scss" scoped>
	:deep(.uni-progress-bar) {
		display: none;
	}

	.item {
		.del {
			color: #AD181F;
			position: absolute;
			right: 30rpx;
			font-size: 28rpx;
		}
	}

	.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: 40rpx 30rpx;
	}

	.maskbox {
		position: relative;

		.mask {
			position: absolute;
			width: calc(100% - 34px);
			height: 100%;
			z-index: 10;
			background-color: red;
			opacity: 0;
		}
	}

	:deep(.file-picker__progress) {
		opacity: 0;
	}
</style>