<template>
	<view class="page-wrap">
		<view class="background"></view>
		<view class="card">
			<!-- <uni-card margin="0" :is-shadow="true"> -->
			<u--form labelPosition="left" labelWidth="auto" labelAlign="center" ref="wForm" class="demo-ruleForm" errorType="border-bottom">
				<view style="position: relative;">
					<view style="position: absolute;left: -10px;color: #3d4b70;top: -3px;">*</view>
				</view>
				
				<view style="font-size: 15px; font-weight: bold;color: #3d4b70;margin-bottom: 10px;">基本信息</view>
				<u-form-item label="培训名称：" prop="NAME" borderBottom>
					<u--input v-if="record" v-model="record.Nav_Parent.NAME" disabled disabledColor="#fff" border="none" inputAlign="right" fontSize="14px"></u--input>
				</u-form-item>
				<u-form-item label="组织部门：" prop="NAME" borderBottom>
					<u--input v-if="notify" v-model="notify.Nav_Department.NAME" disabled disabledColor="#fff" border="none" inputAlign="right" fontSize="14px"></u--input>
				</u-form-item>
				<u-form-item label="培训老师：" prop="TRAIN_TEACHER" borderBottom>
					<u--input v-if="notify" v-model="notify.Nav_User.NAME" disabled disabledColor="#fff" border="none" inputAlign="right" fontSize="14px"></u--input>
				</u-form-item>
				<u-form-item label="培训地点：" prop="TRAIN_ADDR" borderBottom>
					<u--input v-if="record" v-model="record.TRAIN_ADDR" disabled disabledColor="#fff" border="none" inputAlign="right" fontSize="14px"></u--input>
				</u-form-item>
				<u-form-item label="培训形式" borderBottom>
					<u--input v-if="record" disabled disabledColor="#ffffff" v-model="record.TRAIN_TYPE_SHOW" border="none" inputAlign="right" fontSize="14px" ></u--input>
				</u-form-item>
				<u-form-item label="开始时间：" prop="NAME" borderBottom>
					<u--input v-if="record" v-model="record.START_TIME" disabled disabledColor="#fff" border="none" inputAlign="right" fontSize="14px"></u--input>
				</u-form-item>
				<u-form-item label="结束时间：" prop="NAME" borderBottom>
					<u--input v-if="record" v-model="record.END_TIME" disabled disabledColor="#fff" border="none" inputAlign="right" fontSize="14px"></u--input>
				</u-form-item>


				<u-form-item label="培训学时：" prop="TOTAL_TIME" borderBottom>
					<u--input v-if="record" v-model="record.TOTAL_TIME" disabled disabledColor="#fff" border="none" inputAlign="right" fontSize="14px"></u--input>
				</u-form-item>
				<u-form-item label="培训内容：" prop="NAME" borderBottom>
					<u--input v-if="record" v-model="record.TRAIN_CONTENT" disabled disabledColor="#fff" border="none" inputAlign="right" fontSize="14px"></u--input>
				</u-form-item>
				<u-form-item label="工号：" prop="score" borderBottom>
					<u--input v-if="user" v-model="user.CODE" disabled disabledColor="#fff" border="none" inputAlign="right" fontSize="14px"></u--input>
				</u-form-item>
				<u-form-item label="答卷人：" prop="score" borderBottom>
					<u--input v-if="user" v-model="user.NAME" disabled disabledColor="#fff" border="none" inputAlign="right" fontSize="14px"></u--input>
				</u-form-item>
				<u-form-item label="成绩：" prop="score" borderBottom>
					<u--input v-model="score" disabled disabledColor="#fff" border="none" inputAlign="right" fontSize="14px"></u--input>
				</u-form-item>
			</u--form>
			<!-- </uni-card> -->
			<u--form labelPosition="left" labelWidth="auto" labelAlign="center" errorType="border-bottom" ref="sForm" class="sub-form" style="margin-top: 20px;">
				<view style="position: relative;">
					<view style="position: absolute;left: -10px;color: #3d4b70;top: -3px;">*</view>
				</view>
			
				<view style="font-size: 15px; font-weight: bold;color: #3d4b70;margin-bottom: 10px;">问卷</view>
				<view v-for="(item, index) in papers">
					<u-form-item>
						<view style="display: flex;flex: 1;flex-direction: column;">
							<view style="display: flex; word-wrap: break-word; word-break: break-all;margin-bottom: 10px;white-space: normal;">{{(index+1)+'. '+ item.Nav_Test.NAME+getType(item)}}</view>
							<view >
								<u-radio-group v-if="item.Nav_Test.TYPE==0" v-model="item.ANSWER1" placement="column">
									<u-radio :customStyle="{marginBottom: '4px',marginTop: '4px'}" v-for="(item1, index1) in radiolist1" :key="index1" :label="item1.name" :name="item1.name"
										@change="doTrueOrFalse(index1,item)" :disabled="readonly" />
								</u-radio-group>
								<u-radio-group v-if="item.Nav_Test.TYPE==1" v-model="item.ANSWER2" placement="column">
									<u-radio :customStyle="{marginBottom: '4px',marginTop: '4px',whiteSpace:'normal',wordBreak: 'break-all'}" v-for="(item2, index2) in radiolist2[item.ID]" :key="index2" :label="item2.name" :name="item2.name"
										@change="doOptionChange(index2,item)" :disabled="readonly" />
								</u-radio-group>
								<u-checkbox-group v-if="item.Nav_Test.TYPE==2" v-model="item.ANSWER3" @change="checkboxChange($event,item)" placement="column">
									<u-checkbox :customStyle="{marginBottom: '4px',marginTop: '4px',whiteSpace:'normal',wordBreak: 'break-all'}" v-for="(item3, index3) in radiolist2[item.ID]" :key="index3" :label="item3.name" :name="item3.name" :disabled="readonly">
									</u-checkbox>
								</u-checkbox-group>
							</view>
						</view>
					</u-form-item>
				</view>
			</u--form>
			
		</view>


		
		<view class="bottom-button">
			<button type="primary" v-if="tableKey==1" @click="submit">提交</button>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import {
		extendFilterGroup,
		extendGroupRule,
		extendInclude,
		extendOrder,
		extendRule,
		guid,
		initFilter,
		initFilterGroup
	} from '../../../../utils/common'
	import {
		getRequest,
	} from '../../../../services/apply/FOServices/FOServices';
	export default {
		data() {
			return {
				model: {
					ORG_ID: "",
				},
				papers: [],
				viewAll: false,
				record: null,
				user: null,
				notify: null,
				UserList: [],
				SelUsrID: null,
				score: 0,
				END_TIME: null,
				readonly: true,
				loading: false,
				tableKey: '0',
				radiolist1: [{
						name: '正确',
						disabled: false
					},
					{
						name: '错误',
						disabled: false
					},
				],
				radiolist2: {},
				radiovalue1: "错误",
				checkbox: [],
				TaskID: '',
				SelUsrNAME: '',
				ORG_ID: uni.getStorageSync('orgId'),
				JOBID: ''
			}
		},
		onLoad(option) {
			this.TaskID = option.taskID ? option.taskID : '';
			this.model.ID = option.ID ? option.ID : '';
			this.model.userID = option.USER_ID? option.USER_ID:'';
			this.JOBID = option.ID ? option.ID : '';
			this.tableKey = option.tableKey ? option.tableKey : '0'
			this.getPapers();
		},
		methods: {
			loadData() {
				let json = initFilter(this.ORG_ID);
				extendRule(json, 'PARENT_ID', 1, this.model.ID);
				extendInclude(json, 'Nav_User');
				getRequest(json, "/WB/WBOutsourceTrainRecord/GetUsers").then(res => {
					if (res && res.length > 0) {
						this.UserList = res
						if (this.viewAll) {
							this.SelUsrID = res[0].ID;
							this.getPapers();
						} else {
							let usr = res.find(it => it.ID == uni.getStorageSync('appInfo')?.User?.ID);
							if (usr) {
								this.SelUsrID = usr.ID
								this.SelUsrNAME = usr.NAME
								this.getPapers();
							} else {
								uni.$showMsgFunc('当前用户没有问卷!', () => {}, 'error', 1000)
							}
						}
					}
				});
			},
			getPapers() {
				// let SelUsrID = this.SelUsrID;
				this.papers = [];
				let json = initFilter(this.ORG_ID, this.model.ID, 'Nav_Test.TYPE', 1);
				json.OrgType = 2;
				extendInclude(json, 'Nav_Parent.Nav_Parent.Nav_Department');
				extendInclude(json, 'Nav_Parent.Nav_Parent.Nav_User');
				extendInclude(json, 'Nav_Test');
				extendInclude(json, 'Nav_User');
				getRequest(json, "/WB/WBOutsourceTrainRecord/GetUserPaper").then(res => {
					this.model = res
					if (res && res.Nav_Papers && res.Nav_Papers.length > 0) {
						let papers = res.Nav_Papers.sort((a, b) => {
							return a.Nav_Test.TYPE - b.Nav_Test.TYPE
						});
						// let config = res.Nav_Config;
						let record = res.Nav_Papers[0].Nav_Parent;
						if (record.TRAIN_TYPE.indexOf('1') > -1 && record.TRAIN_TYPE.indexOf('2') > -1) {
							this.Traintype = 3
							record.TRAIN_TYPE_SHOW = '线上、线下'
						} else if (record.TRAIN_TYPE.indexOf('1') > -1) {
							this.Traintype = 1
							record.TRAIN_TYPE_SHOW = '线上'
						} else if (record.TRAIN_TYPE.indexOf('2') > -1) {
							this.Traintype = 2
							record.TRAIN_TYPE_SHOW = '线下'
						}
						let notify = record ? record.Nav_Parent : null;
						let hasAnswered = false;
						for (let i = 0; i < res.Nav_Papers.length; i++) {
							if (res.Nav_Papers[i].ANSWER !== 0) {
								hasAnswered = true;
							}
						}
						this.papers = papers;
						this.papers.forEach(item => {
							let test = {}
							if (item.Nav_Test.TYPE != 0) {
								this.radiolist2[item.ID] = [];
								this.radiolist2[item.ID].push({
									name: item.Nav_Test.OPTION_A
								}, {
									name: item.Nav_Test.OPTION_B
								} )
								if (item.Nav_Test.OPTION_C != undefined && item.Nav_Test.OPTION_C != "") {
									this.radiolist2[item.ID].push({
										name: item.Nav_Test.OPTION_C
									})
								}
								if (item.Nav_Test.OPTION_D != undefined && item.Nav_Test.OPTION_D != "") {
									this.radiolist2[item.ID].push({
										name: item.Nav_Test.OPTION_D
									})
								}
								if (item.Nav_Test.OPTION_E != undefined && item.Nav_Test.OPTION_E != "") {
									this.radiolist2[item.ID].push({
										name: item.Nav_Test.OPTION_E
									})
								}
							}
							// 处理单选题和判断题默认勾选
							if (item.Nav_Test.TYPE === 0) {
								let selectedOptions = this.findAnswer(item.ANSWER)
								item.ANSWER1 = selectedOptions
							}
							if (item.Nav_Test.TYPE === 1) {
								let selectedOptions = this.findSelectedOptions(item.ANSWER, item.Nav_Test.OPTION_A, item.Nav_Test.OPTION_B, item.Nav_Test.OPTION_C, item.Nav_Test.OPTION_D, item.Nav_Test
									.OPTION_E);
								item.ANSWER2 = String(selectedOptions);
							}

							if (item.Nav_Test.TYPE === 2) {
								let selectedOptions = this.findSelectedOptions(item.ANSWER, item.Nav_Test.OPTION_A, item.Nav_Test.OPTION_B, item.Nav_Test.OPTION_C, item.Nav_Test.OPTION_D, item.Nav_Test
									.OPTION_E);
								item.ANSWER3 = selectedOptions;
							}
						})
						// this.config = config;
						this.record = record;
						this.notify = notify;
						this.readonly = hasAnswered;
						this.score = res.SCORE;
						this.user = res.Nav_User

					} else {
						uni.$showMsgFunc('未能成功获取此用户的在线试卷，请稍后重试!', () => {}, 'error', 1000)
					}
				})
			},
			findAnswer(data) {
				if ((data & 1) != 0) {
					return '正确'
				} else if ((data & 2) != 0) {
					return '错误'
				}
			},
			findSelectedOptions(num, OPTION_A, OPTION_B, OPTION_C, OPTION_D, OPTION_E) {
				var optionVars = {
					'A': {
						value: 1,
						variable: OPTION_A
					},
					'B': {
						value: 2,
						variable: OPTION_B
					},
					'C': {
						value: 4,
						variable: OPTION_C
					},
					'D': {
						value: 8,
						variable: OPTION_D
					},
					'E': {
						value: 16,
						variable: OPTION_E
					}
				};
				var selectedVars = [];
				for (var key in optionVars) {
					if ((num & optionVars[key].value) === optionVars[key].value) {
						selectedVars.push(optionVars[key].variable);
					}
				}
				return selectedVars;
			},
			getType(item) {
				let ret = '';
				// let config = this.config;
				switch (item.Nav_Test.TYPE) {
					case 0:
						ret = `【是非题】(${item.SCORE || 1}分)`;
						break;
					case 1:
						ret = `【单选题】(${item.SCORE|| 1}分)`;
						break;
					case 2:
						ret = `【多选题】(${item.SCORE|| 1}分)`;
						break;
				}
				return ret;
			},
			doTrueOrFalse(index, item) {
				item.ANSWER = (index + 1);
			},
			doOptionChange(index, item) {
				if (index == 0) {
					item.ANSWER = 1;
				} else if (index == 1) {
					item.ANSWER = 2;
				} else if (index == 2) {
					item.ANSWER = 4;
				} else if (index == 3) {
					item.ANSWER = 8;
				} else if (index == 4) {
					item.ANSWER = 16;
				}
			},
			doCheckChange(index, item) {
				if (index == 0) {
					item.ANSWER = 1;
				} else if (index == 1) {
					item.ANSWER = 2;
				} else if (index == 2) {
					item.ANSWER = 4;
				} else if (index == 3) {
					item.ANSWER = 8;
				} else if (index == 4) {
					item.ANSWER = 16;
				}
			},
			checkboxChange(arr, item) {
				let indexArr = this.findCommonElementsIndices(arr, this.radiolist2[item.ID])
				item.ANSWER3 = arr;
				item.ANSWER = 0;
				indexArr.forEach(index => {
					if (index == 0) {
						item.ANSWER += 1;
					} else if (index == 1) {
						item.ANSWER += 2;
					} else if (index == 2) {
						item.ANSWER += 4;
					} else if (index == 3) {
						item.ANSWER += 8;
					} else if (index == 4) {
						item.ANSWER += 16;
					}
				})
			},
			findCommonElementsIndices(arr1, arr2) {
				const commonElements = [];
				for (let i = 0; i < arr1.length; i++) {
					for (let j = 0; j < arr2.length; j++) {
						if (arr1[i] === arr2[j].name) {
							commonElements.push(j);
						}
					}
				}
				return commonElements;
			},
			submit() {
				let data = {
					Nav_Config: JSON.parse(JSON.stringify(this.config)),
					Nav_Papers: JSON.parse(JSON.stringify(this.papers)),
					TaskID: this.TaskID,
					ORG_ID: this.ORG_ID,
					ID: this.JOBID
				}
				for (let i = 0; i < data.Nav_Papers.length; i++) {
					if (data.Nav_Papers[i].ANSWER == 0) {
						uni.$showMsgFunc(`第${i + 1}题尚未选择答题，请完成所有答题后再进行提交`, () => {}, 'error', 2000)
						return;
					}
				}
				getRequest(data, "/WB/WBOutsourceTrainRecord/SavePapers").then(res => {
					if (res) {
						uni.$showMsgFunc('操作成功!', () => {
							uni.navigateBack()
						}, 'success', 1000)
					}
				})
			},
		}
	}
</script>

<style scoped>
	@import url("../../../../style/css/newTemplate.css");
	/* 	@import url("../../../../style/css/editTemplate.css");

	.todo-page {
		padding: 16px 16px 70px;
	} */
</style>