<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 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">在线选择</button>
					<view class="vipData">
						<view>共<text>{{total}}</text>人</view>
					</view>
					<view class="userlist">
						<view class="item" v-for="n in list" style="background-color: #fffafa;">
							<view class="w100">
								<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 class="name">{{n.realName}} <text>{{n.code}}</text></view>
								<view class="date">{{n.idcTypeStr}}：{{n.idcCode}}</view>
								<view class="flexbox">
									<view>
										原有级别
										<text>{{n}}</text>
									</view>
									<view>
										考试级别
										     <uni-data-select
										        v-model="value"
										        :localdata="range"
										        @change="change"
										      ></uni-data-select>
									</view>

									<view>
										是否通过
										<uni-data-select
										   v-model="value"
										   :localdata="range"
										   @change="change"
										 ></uni-data-select>
									</view>
								</view>
							</view>
							
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="fixedBottom">
			<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>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import * as api from '@/common/api.js';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import {
		tagList,
		typeList,
		comList
	} from '@/static/js/data';
	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: '添加考生'
	}])
	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
			})
		}
	}
	function save() {
	  if (form.value.examId) {
	    return updateLevelInfo(form.value).then(() => {
			uni.showToast({
				title: `保存成功`,
				icon: 'none'
			})
	    })
	  } else {
	    return addInfo(form.value).then((res) => {
	      form.value.examId = res.data.examId
	      form.value.name = res.data.name
		  uni.showToast({
		  	title: `保存成功`,
		  	icon: 'none'
		  })
	    })
	  }
	}
</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;
	}

	:deep(.uni-forms-item__label .label-text) {
		font-size: 28rpx !important;
	}

	:deep(.uni-input-input) {
		font-size: 30rpx !important;
	}
</style>