<template>
	<view class="notbegun">
		<view class="header"></view>

		<view class="content">
			<view class="accountItem">
				<view class="IT_one">
					<view class="list_one">
						<text>测评要素</text>
					</view>
					<view class="list_two">
						<text>要素一</text>
					</view>
					<view class="list_three">
						<text>满分</text>
					</view>
					<view class="list_four">
						<view class="grade">
							<text>等级</text>
						</view>
						<view class="classlist">
							<view class="you">
								<text>优</text>
							</view>
							<view class="zhong">
								<text>中</text>
							</view>
							<view class="cha">
								<text>差</text>
							</view>
						</view>
					</view>
					<view class="list_five">
						<view class="kaosdy">
							<text>{{sequence}}号考生</text>
						</view>
						<view class="pingfen">
							<text>评分</text>
						</view>
					</view>
				</view>


				<view class="IT_two" v-for="(item,index) in tableList" :key='item.id'>
					<view class="list_one">
						<text>{{item.element}}</text>
					</view>
					<view class="list_two">
						<text>{{item.surveyGist}}</text>
					</view>
					<view class="list_three">
						<text>{{item.scale}}</text>
					</view>
					<view class="list_four">
						<view class="classlist">
							<view class="you">
								<text>{{item.grade}}</text>
							</view>
							<view class="zhong">
								<text>{{item.hierarchy}}</text>
							</view>
							<view class="cha">
								<text>{{item.rankDifference}}</text>
							</view>
						</view>
					</view>
					<view class="list_five">
						<view class="kaosdy" @click="open(index+1)">
							<text v-if="!item.value" style="color: #333333;">请输入评分</text>
							<text v-else style="color: #1DD39A;">{{item.value}}</text>
						</view>

					</view>
				</view>

			</view>
		</view>



		<view class="foot">
			<view class="txt one">
				<text>当前状态：{{scroces==2?"百分制":"十分制"}}</text>
			</view>
			<view class="txt">
				<text v-if="!test">考试未开始</text>
				<text v-else>考试已开始</text>
			</view>
			<view class="retrue">
				<view class="fanhui" @click="tuichu">退出登录</view>
				<view class="fanhui" @click="goping">
					<text>评分记录</text>
				</view>

				<view class="queren" @click="submitcode" v-if="falge">
					<text>提交评分</text>
				</view>
				<view class="queren1" v-else>
					<text>提交评分</text>
				</view>

			</view>
		</view>

		<!-- 弹出框 -->
		<uni-popup ref="popup" type="bottom">
			<view class="pop">
				<view class="pop_head">
					<text>请输入分数</text>
				</view>
				<view class="shuru">
					<text>{{middlenumber}}</text>
				</view>
				<view class="pop_number">
					<view class="left">
						<view class="" v-for="(item,index) in list" :key="index" @click="palycode(item)">
							{{item}}
						</view>
					</view>

					<view class="right">
						<view class="de" @click="deleteone">
							删除
						</view>
						<view class="su" @click="surenumber">
							确认
						</view>
					</view>
				</view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	import {
		submit,
		dradis
	} from "../../api/api.js"
	export default {
		data() {
			return {
				job: "XXX",
				code: "XXXXX",
				name: "XXXX",
				list: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0", "", "."],
				// number: [],
				middlenumber: "", //中间转换数字
				yaosunumber: 0, //打开的是那个要素点
				examinerId: "", //考官id
				sequence: "", //考生序列号
				studentId: "", //考生id
				tableList: [], //要素点列表	
				timer: null,
				falge: false,
				timer1: null,
				test: false,
				lastOne: false, //当前考场最后一个考生
				lastOneSpecial: false, //当前岗位最后一个考生
				scroces: ""

			}
		},
		methods: {
			tuichu() {
				clearInterval(this.timer1)
				uni.navigateTo({
					url: '../login/login'
				})
			},
			goping() {
				uni.navigateTo({
					url: "../Gradingrecords/Gradingrecords"
				})
			},
			// 提交评分
			submitcode() {
				// let that=this
				let cc = this.tableList.every((item) => {
					return item.value != false
				})
				if (cc) {
					let brr = this.tableList.map((item) => {
						return {
							"halving": item.value,
							"subjectId": item.id
						}
					})
					// 是否是最后一个考生
					if (this.lastOne || this.lastOneSpecial) {
						submit({
							examinerId: this.examinerId,
							examineeId: this.studentId,
							elementOnt: brr
						}).then((res) => {
							if (res.code == 200) {
								this.falge = false;
								uni.showToast({
									title: `${res.msg}`,
									icon: "success",
									duration: 1500
								})
								// console.log("clearInterval");
								clearInterval(this.timer1)
								uni.navigateTo({
									url: "../Examover/Examover"
								})
							} else {
								uni.showToast({
									title: `${res.msg}`,
									icon: "error",
									duration: 1500
								})
							}
						})

						// 不是就提交分数之后开启轮询
					} else {
						console.log("else");
						submit({
							examinerId: this.examinerId,
							examineeId: this.studentId,
							elementOnt: brr
						}).then((res) => {
							if (res.code == 200) {
								this.falge = false;
								uni.showToast({
									title: "成功",
									icon: "success",
									duration: 1500
								})
								this.middlenumber = ""; //中间转换数字
								this.yaosunumber = 0; //打开的是那个要素点
								this.sequence = ""; //考生序列号
								this.studentId = ""; //考生id
								// this.tableList = []; //要素点列表	
								this.tableList.forEach((item, index) => {
									item.listindex = index + 1;
									item.value = "";
									item.falge = false;
								})

								dradis({
									examinerId: this.examinerId
								}).then((res) => {
									if (res.code == 200) {

										if (res.data.lastOne || res.data.lastOneSpecial) {
											if (!res.data.examineeId) {
												
												clearInterval(this.timer1)
												uni.navigateTo({
													url: "../Examover/Examover"
												});
											} else {

												this.sequence = res.data.sequence;
												this.test = res.data.begin;
												this.scroces = res.data.score;
												this.lastOne = res.data.lastOne;
												this.studentId = res.data.examineeId + "";
												this.lastOneSpecial = res.data.lastOneSpecial;
												res.data.list.forEach((item, index) => {
													item.listindex = index + 1;
													item.value = "";
													item.falge = false;
												})
												// 将列表赋值
												this.tableList = res.data.list
												// 判断考试是否开始 如果未开始则不能打分
												// if (res.data.begin) {
												this.falge = false;
												if (res.data.begin) {
													this.falge = true;
												}

											}

										} else {


											this.sequence = res.data.sequence;
											this.test = res.data.begin;
											this.scroces = res.data.score;
											this.lastOne = res.data.lastOne;
											this.studentId = res.data.examineeId + "";
											this.lastOneSpecial = res.data.lastOneSpecial;
											res.data.list.forEach((item, index) => {
												item.listindex = index + 1;
												item.value = "";
												item.falge = false;
											})
											// 将列表赋值
											this.tableList = res.data.list
											// 判断考试是否开始 如果未开始则不能打分
											// if (res.data.begin) {
											this.falge = false;
											if (res.data.begin) {
												this.falge = true;
											}





										}

									}
								})

							} else {
								console.log(99);
								uni.showToast({
									title: res.msg,
									icon: "none",
									duration: 1500
								})
							}

						})
					}

				} else {
					uni.showToast({
						title: "请打分",
						icon: "error",
						duration: 1500
					})

				}
			},
			// 打开弹出层
			open(id, sujectId) {
				if (!this.falge) {
					return
				}
				console.log(!this.falge);
				console.log(id);
				this.$refs.popup.open('center');
				this.yaosunumber = id;

				this.tableList.forEach((item) => {
					if (item.listindex == this.yaosunumber) {
						this.middlenumber = item.value
					}
				})

			},
			// 点击分数
			palycode(number) {
				// console.log(number);
				this.middlenumber += number;
			},
			// 确认分数
			surenumber() {
				this.tableList.forEach((item) => {
					if (item.listindex == this.yaosunumber) {
						item.value = this.middlenumber;
						this.middlenumber = "";
						this.$refs.popup.close()
						console.log(this.tableList);
					}
				})
			},

			// 删除分数
			deleteone() {
				this.tableList.forEach((item) => {
					if (item.listindex == this.yaosunumber) {
						this.middlenumber = "";
					}
				})

			},

		},


		onLoad() {

			// 考官id
			this.examinerId = uni.getStorageSync("examinerId");


			dradis({
				examinerId: this.examinerId
			}).then((res) => {
				if (res.code == 200) {

					this.sequence = res.data.sequence;
					this.test = res.data.begin;
					this.scroces = res.data.score;
					this.lastOne = res.data.lastOne;
					this.studentId = res.data.examineeId + "";
					this.lastOneSpecial = res.data.lastOneSpecial;
					
					if(res.data.list){
						res.data.list.forEach((item, index) => {
							item.listindex = index + 1;
							item.value = "";
							item.falge = false;
						})
						this.tableList = res.data.list
					}
				


					// 最后一个考生进入的时候
					if (res.data.lastOne || res.data.lastOneSpecial) {

						if (!res.data.examineeId) {
							
							uni.navigateTo({
								url: "../Examover/Examover"
							});

						} else {

							this.falge = false;
							if (res.data.begin) {
								this.falge = true;

							} else {
								this.falge = false
							}

							this.timer1 = setInterval((res) => {
								dradis({
									examinerId: this.examinerId
								}).then((res) => {
									if (res.code == 200) {
										console.log("this.bigin,2222");
										if (res.data.lastOne || res.data.lastOneSpecial) {
											if (!res.data.examineeId) {
												clearInterval(this.timer1)
												uni.navigateTo({
													url: "../Examover/Examover"
												});
											} else {

												this.falge = false;
												if (res.data.begin) {
													this.falge = true;

												} else {
													this.falge = false
												}

												this.test = res.data.begin;
												this.lastOne = res.data.lastOne;
												this.lastOneSpecial = res.data.lastOneSpecial;
												this.scroces = res.data.score;
												
												if (this.sequence == res.data.sequence) {
													return
												} else {
													this.sequence = res.data.sequence;
													this.studentId = res.data.examineeId + "";
													res.data.list.forEach((item, index) => {
														item.listindex = index + 1;
														item.value = "";
														item.falge = false;
													})
													this.tableList = res.data.list
												}
												
											}

										} else {
											this.falge = false;
											if (res.data.begin) {
												this.falge = true;

											} else {
												this.falge = false
											}

											this.test = res.data.begin;
											this.lastOne = res.data.lastOne;
											this.lastOneSpecial = res.data.lastOneSpecial;
											this.scroces = res.data.score;
											
											if (this.sequence == res.data.sequence) {
												return
											} else {
												this.sequence = res.data.sequence;
												this.studentId = res.data.examineeId + "";
												res.data.list.forEach((item, index) => {
													item.listindex = index + 1;
													item.value = "";
													item.falge = false;
												})
												this.tableList = res.data.list
											}

										}

									}
								})
							}, 5000)

							// clearInterval(this.timer1)
						}

					} else {

						this.falge = false;
						if (res.data.begin) {
							this.falge = true;

						} else {
							this.falge = false
						}

						this.timer1 = setInterval((res) => {
							dradis({
								examinerId: this.examinerId
							}).then((res) => {
								if (res.code == 200) {
									
									if (res.data.lastOne || res.data.lastOneSpecial) {
									
										if (!res.data.examineeId) {
											clearInterval(this.timer1)
											uni.navigateTo({
												url: "../Examover/Examover"
											});
										} else {
										
										
												this.falge = false;
												if (res.data.begin) {
													this.falge = true;

												} else {
													this.falge = false
												}

												this.test = res.data.begin;
												this.lastOne = res.data.lastOne;
												this.lastOneSpecial = res.data.lastOneSpecial;
												this.scroces = res.data.score;
												if (this.sequence == res.data.sequence) {
													return
												} else {
													this.sequence = res.data.sequence;
													this.studentId = res.data.examineeId + "";
													res.data.list.forEach((item, index) => {
														item.listindex = index + 1;
														item.value = "";
														item.falge = false;
													})
													this.tableList = res.data.list
												}
											

										}

									} else {
										
								this.falge = false;
								if (res.data.begin) {
									this.falge = true;
								
								} else {
									this.falge = false
								}
								
								this.test = res.data.begin;
								this.lastOne = res.data.lastOne;
								this.lastOneSpecial = res.data.lastOneSpecial;
								this.scroces = res.data.score;
								if (this.sequence == res.data.sequence) {
									return
								} else {
									this.sequence = res.data.sequence;
									this.studentId = res.data.examineeId + "";
									res.data.list.forEach((item, index) => {
										item.listindex = index + 1;
										item.value = "";
										item.falge = false;
									})
									this.tableList = res.data.list
								}

									}

								}
							})
						}, 5000)

						// }
						// clearInterval(this.timer1)
					}


				}
			})
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F5F7FA;
	}


	.notbegun {
		width: 100%;
		height: 100vh;
		position: relative;

		.pop {
			width: 508rpx;
			height: 423rpx;
			background-color: #FFFFFF;
			border-radius: 16px 16px 16px 16px;

			.pop_head {
				width: 100%;
				height: 20%;
				font-size: 24rpx;
				font-weight: 800;
				color: #333333;
				display: flex;
				justify-content: center;
				align-items: center;

			}

			.shuru {
				width: 415rpx;
				height: 46rpx;
				background: #FFFFFF;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				border: 2rpx solid #E2E2E2;
				margin: 0rpx auto;
				box-sizing: border-box;
				padding-right: 20rpx;
				display: flex;
				align-items: center;
				justify-content: flex-end;

				text {
					font-size: 22rpx;
					font-weight: 400;
					color: #333333;
				}
			}

			.pop_number {
				width: 415rpx;
				height: 230rpx;
				display: flex;
				margin: 0rpx auto;
				margin-top: 30rpx;

				.left {
					width: 293rpx;
					height: 100%;
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;
					align-items: center;
					box-sizing: border-box;
					padding-right: 20rpx;

					view {
						width: 82rpx;
						height: 47rpx;
						background: #FFFFFF;
						box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(0, 0, 0, 0.16);
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						color: #27C5FF;
					}
				}

				.right {
					display: flex;
					height: 100%;
					width: 122rpx;
					flex-direction: column;
					justify-content: space-around;

					view {
						width: 122rpx;
						height: 108rpx;
						background: #FFFFFF;
						box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(0, 0, 0, 0.16);
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						display: flex;
						align-items: center;
						justify-content: center;

					}

					.de {
						font-size: 18rpx;
						font-weight: 400;
						color: #27C5FF;
					}

					.su {
						background: #27C5FF;
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						color: #FFFFFF;

					}
				}

			}

		}


		.header {
			width: 100%;
			height: 24rpx;
			background-color: #27C5FF;
			box-sizing: border-box;
			padding: 0rpx 20rpx;
			display: flex;
			align-items: center;

		}

		.content {
			width: 95%;
			height: 75%;
			background: #FFFFFF;
			box-shadow: 3rpx 0rpx 14rpx 1rpx rgba(0, 0, 0, 0.05);
			border-radius: 19rpx;
			margin: 0rpx auto;
			margin-top: 20rpx;
			display: flex;
			flex-direction: column;

			.accountItem {
				width: 95%;
				height: 90%;
				margin: 0rpx auto;
				display: flex;
				margin-top: 20rpx;

				.IT_one {
					width: 15%;
					height: 100%;
					box-sizing: border-box;
					background-color: #C0EEFF;
					border-right: 1px solid #F1F1F2;

					.list_one {
						width: 100%;
						height: 11%;
						border-bottom: 1px solid #F1F1F2;
						font-size: 16rpx;
						font-weight: bold;
						color: #27C5FF;
						display: flex;
						align-items: center;
						justify-content: center;
					}

					.list_two {
						width: 100%;
						height: 22%;
						border-bottom: 1px solid #F1F1F2;
						font-size: 16rpx;
						font-weight: bold;
						color: #27C5FF;
						display: flex;
						align-items: center;
						justify-content: center;

					}

					.list_three {
						width: 100%;
						height: 11%;
						border-bottom: 1px solid #F1F1F2;
						font-size: 16rpx;
						font-weight: bold;
						color: #27C5FF;
						display: flex;
						align-items: center;
						justify-content: center;
					}

					.list_four {
						width: 100%;
						height: 33%;
						border-bottom: 1px solid #F1F1F2;
						font-size: 16rpx;
						font-weight: bold;
						color: #27C5FF;
						display: flex;

						.grade {
							width: 50%;
							height: 100%;
							display: flex;
							align-items: center;
							justify-content: center;
							border-right: 1px solid #F1F1F2;
						}

						.classlist {
							width: 50%;
							height: 100%;


							.you {
								width: 100%;
								height: 33%;
								display: flex;
								align-items: center;
								justify-content: center;

							}

							.zhong {
								width: 100%;
								height: 33%;
								display: flex;
								align-items: center;
								justify-content: center;
							}

							.cha {
								width: 100%;
								height: 33%;
								display: flex;
								align-items: center;
								justify-content: center;
							}
						}
					}

					.list_five {
						width: 100%;
						height: 22%;
						border-bottom: 1px solid #F1F1F2;
						font-size: 16rpx;
						font-weight: bold;
						color: #27C5FF;

						.kaosdy {
							width: 100%;
							height: 50%;
							display: flex;
							align-items: center;
							justify-content: center;
						}

						.pingfen {
							width: 100%;
							height: 50%;
							display: flex;
							align-items: center;
							justify-content: center;
						}
					}
				}

				.IT_two {
					width: 15%;
					height: 100%;
					box-sizing: border-box;
					background-color: #FFFFFF;
					border-right: 1px solid #F1F1F2;

					.list_one {
						width: 100%;
						height: 11%;
						border-bottom: 1px solid #F1F1F2;
						font-size: 16rpx;
						font-weight: bold;
						color: #333333;
						display: flex;
						align-items: center;
						justify-content: center;
						background-color: #F6F7FC;
					}

					.list_two {
						width: 100%;
						height: 22%;
						border-bottom: 1px solid #F1F1F2;
						font-size: 16rpx;
						font-weight: bold;
						color: #999999;
						display: flex;
						align-items: center;
						justify-content: center;

					}

					.list_three {
						width: 100%;
						height: 11%;
						border-bottom: 1px solid #F1F1F2;
						font-size: 16rpx;
						font-weight: bold;
						color: #999999;
						display: flex;
						align-items: center;
						justify-content: center;
					}

					.list_four {
						width: 100%;
						height: 33%;
						border-bottom: 1px solid #F1F1F2;
						font-size: 16rpx;
						font-weight: bold;
						color: #999999;
						display: flex;


						.classlist {
							width: 100%;
							height: 100%;
							border-right: 1px solid #F1F1F2;

							.you {
								width: 100%;
								height: 33%;
								display: flex;
								align-items: center;
								justify-content: center;
								border-bottom: 1px solid #F1F1F2;

							}

							.zhong {
								width: 100%;
								height: 33%;
								display: flex;
								align-items: center;
								justify-content: center;
								border-bottom: 1px solid #F1F1F2;
							}

							.cha {
								width: 100%;
								height: 33%;
								display: flex;
								align-items: center;
								justify-content: center;
							}
						}
					}

					.list_five {
						width: 100%;
						height: 22%;
						border-bottom: 1px solid #F1F1F2;
						font-size: 16rpx;
						font-weight: bold;
						color: #999999;

						.kaosdy {
							width: 100%;
							height: 100%;
							display: flex;
							align-items: center;
							justify-content: center;
						}

						.pingfen {
							width: 100%;
							height: 50%;
							display: flex;
							align-items: center;
							justify-content: center;
						}
					}
				}
			}
		}

		.foot {
			width: 100%;
			height: 83rpx;
			position: absolute;
			background: #FFFFFF;
			box-sizing: border-box;
			padding: 0rpx 20rpx;
			align-items: center;
			bottom: 0rpx;
			display: flex;

			.one {
				margin-right: 20rpx;
			}

			.txt {
				font-size: 18rpx;
				font-weight: bold;
				color: #333333;
			}

			.retrue {
				display: flex;
				flex-grow: 1;
				justify-content: flex-end;

				.fanhui {
					width: 120rpx;
					height: 38rpx;
					border-radius: 24rpx 24rpx 24rpx 24rpx;
					border: 2rpx solid #27C5FF;
					box-sizing: border-box;
					color: #27C5FF;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-right: 20rpx;

				}

				.queren {
					width: 120rpx;
					height: 38rpx;
					border-radius: 24rpx 24rpx 24rpx 24rpx;
					background-color: #27C5FF;
					color: #FFFFFF;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.queren1 {
					width: 120rpx;
					height: 38rpx;
					border-radius: 24rpx 24rpx 24rpx 24rpx;
					background-color: #999999;
					color: #FFFFFF;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}


		}
	}
</style>
