<template>
	<view class="content">
		<view class="header">
			<image src="../../static/images/test-bg.png"></image>
		</view>
		<template v-if="tableAlias == 'table1'">
			<view class="ques-con">			
				<view class="ques-answer-con">
					<view class="answer" v-for="(item,index) in quesList" :key="index">
						<view class="answer-option" :id="'question-'+index">{{item.sceneName}}
						</view>
						<view class="answer-text">A. {{item.optionA}}</view>
						<view class="tip">答案： </view>
						<view>
								<view  class="assess-list">
									<view class="one-assess" v-for="(data,index) in assessList" :key="index">
										<view>{{data.value}} </view>
										<view :class="['one-select',item.score[0].optionScore == index ? 'selected' : '']"></view>																			
									</view>
								</view>
						</view>
						<view class="answer-text">B. {{item.optionB}}</view>
						<view class="tip">答案： </view>
						<view>
							<view  class="assess-list">
								<view class="one-assess" v-for="(data,index) in assessList" :key="index">
									<view>{{data.value}} </view>
									<view :class="['one-select',item.score[1].optionScore == index ? 'selected' : '']"></view>								
								</view>
							</view>
						<!-- 	<radio-group class="assess-list" @change="selectAssess(item.id,$event,
								'optionB',item.listorder)">
								<view class="one-assess" v-for="(data,index) in assessList" :key="index">
									<view>{{data.value}} </view>

									<radio :value="data.score.toString()" style="transform:scale(0.7)"
										:checked="getScoreChecked(item.id,data.score.toString(),'optionB')" />

								</view>
							</radio-group> -->
						</view>
						<view class="answer-text">C. {{item.optionC}}</view>
						<view class="tip">答案： </view>
						<view>
							<view  class="assess-list">
								<view class="one-assess" v-for="(data,index) in assessList" :key="index">
									<view>{{data.value}} </view>
									<view :class="['one-select',item.score[2].optionScore == index ? 'selected' : '']"></view>								
								</view>
							</view>
							<!-- <radio-group class="assess-list" @change="selectAssess(item.id,$event,
								'optionC',item.listorder)">
								<view class="one-assess" v-for="(data,index) in assessList" :key="index">
									<view>{{data.value}} </view>

									<radio :value="data.score.toString()" style="transform:scale(0.7)"
										:checked="getScoreChecked(item.id,data.score.toString(),'optionC')" />

								</view>
							</radio-group> -->
						</view>
						<view class="answer-text">D. {{item.optionD}}</view>
						<view class="tip">答案： </view>
						<view>
							<view  class="assess-list">
								<view class="one-assess" v-for="(data,index) in assessList" :key="index">
									<view>{{data.value}} </view>
									<view :class="['one-select',item.score[3].optionScore == index ? 'selected' : '']"></view>								
								</view>
							</view>
							<!-- <radio-group class="assess-list" @change="selectAssess(item.id,$event,
								'optionD',item.listorder)">
								<view class="one-assess" v-for="(data,index) in assessList" :key="index">
									<view>{{data.value}} </view>

									<radio :value="data.score.toString()" style="transform:scale(0.7)"
										:checked="getScoreChecked(item.id,data.score.toString(),'optionD')" />

								</view>
							</radio-group> -->
						</view>
						<view class="tip">请选择以上哪个条目是最符合您的孩子的描述? </view>
						<view>
						<!-- 	<radio-group class="option-con" @change="changeOption(item.id,$event,item.listorder)">
								<label class="option-label" v-for="option,optionIndex in optionList"
									:key="optionIndex">{{option}}
									<radio :value="option" class="one-radio"
										:checked="getOptionChecked(item.id,option)" />
								</label>
							</radio-group> -->
							<view  class="option-con">
								<view class="one-option" v-for="option,optionIndex in optionList" :key="index">
									<view>{{option}} </view>
									<view :class="['one-select',item.qustionOption == option ? 'selected' : '']"></view>								
								</view>
							</view>
						</view>

						<u-divider text="分割线" lineColor="#2979ff" textColor="#2979ff" :dot="true"></u-divider>
					</view>
				</view>			
			</view>
		</template>
		<template v-if="tableAlias == 'table2'">
			<view v-for="(item,index) in quesList" :key="index"
				v-if="currentQuestionlistorder == item.listorder">
				<u-transition :show="true" mode="fade-right">
					<view class="ques-con" style="margin-top: 20rpx;">
						<view class="tip" v-if="index == 0">请仔细阅读以下题目，考虑你有多同意或不同意题目中的表述，选择最适合的答案。 </view>
						<view class="ques-title-con">
							<view class="ques-num">
								<text class="current-num">{{item.listorder}}</text>/
								<text class="all-num">{{quesList.length}}</text>
							</view>
						</view>
						<view class="ques-title">{{item.sceneName}}</view>
						<view class="ques-answer-con">
							<view class="ques-select">
								<template v-for="(option,optionIndex) in optionListTable2">
									<view :class="['one-answer',option.value == item.qustionOption ? 'selected' : '']">{{option.value +'. ' + option.label}}</view>
								</template>
							</view>				
							<!-- <radio-group class="option-con-table2"
								@change="changeOption(item.id,$event,item.listorder)">
								<label :class="['one-answer',selected(item.id,option.value)]"
									v-for="option,optionIndex in optionListTable2"
									:key="optionIndex">{{option.value +'. ' + option.label}}
									<radio :value="option.value" class="one-radio" style="display: none;" />
								</label>
							</radio-group> -->
						</view>
					</view>
					<view class="bottom">
						<view class="btn" @click="toNext"
							v-if="currentQuestionlistorder !== table.questionInfo.length">下一题</view>
						<!-- <view class="btn" @click="submit" v-else>提交问卷</view> -->
					</view>
				</u-transition>
			</view>
		</template>
		<template v-if="tableAlias == 'table3'">	
			<view v-for="(item,index) in quesList" :key="index"
				v-if="currentQuestionlistorder == item.listorder">			
				<u-transition :show="true" mode="fade-right">
					<view class="ques-con" style="margin-top: 20rpx;">
						<view class="tip" v-if="index == 0">请仔细阅读以下题目，考虑你有多同意或不同意题目中的表述，选择最适合的答案。 </view>
						<view class="ques-title-con">
							<view class="ques-num">
								<text class="current-num">{{item.listorder}}</text>/
								<text class="all-num">{{quesList.length}}</text>
							</view>
						</view>
						<view class="ques-title">{{item.sceneName}}</view>
						<view class="ques-answer-con">
							<view class="ques-select">
								<template v-for="(option,optionIndex) in optionListTable3" >
									<view :class="['one-answer',option.value == item.qustionOption ? 'selected' : '']">{{option.value +'. ' + option.label}}</view>
								</template>
							</view>				
						</view>
					</view>
					<view class="bottom">
						<view class="btn" @click="toNext"
							v-if="currentQuestionlistorder !== quesList.length">下一题</view>
						<!-- <view class="btn" @click="submit" v-else>提交问卷</view> -->
					</view>
				</u-transition>
			</view>
		</template>
		<u-loading-icon text="加载中" textSize="18" :show="loading"></u-loading-icon>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading:false,
				recordId: null, // 答题记录id
				tableAlias: null, // 量表别名 table1 table2 table3
				selectedChildId: null, // 儿童Id
				quesList:[],
				answerList:[],
				
				table: {
					
				}, // 量表内容
				optionList: [ // 量表1选项
					'A', 'B', 'C', 'D', 'E'
				],
				assessList: [{ // 量表1选项的程度 赋分
					value: '从不',
					score: 0
				}, {
					value: '极少',
					score: 1
				}, {
					value: '较少',
					score: 2
				}, {
					value: '有时',
					score: 3
				}, {
					value: '经常',
					score: 4
				}, {
					value: '频繁',
					score: 5
				}, {
					value: '总是',
					score: 6
				}],
				optionListTable2: [ //量表2选项
					{
						label: '总是',
						value: 'A'
					},
					{
						label: '经常',
						value: 'B'
					},
					{
						label: '有时',
						value: 'C'
					},
					{
						label: '偶尔',
						value: 'D'
					},
					{
						label: '从不',
						value: 'E'
					},
				],
				optionListTable3: [ //量表2选项
					{
						label: '完全同意',
						value: 'A'
					},
					{
						label: '少许同意',
						value: 'B'
					},
					{
						label: '少许不同意',
						value: 'C'
					},
					{
						label: '完全不同意',
						value: 'D'
					}
				],

				selectedAnswer: [], // 用户问卷回答信息 数组
				currentQuestionlistorder: 1, // 当前问卷题目的序号
			}
		},
		onLoad(option) {
			this.recordId = option.recordId;
			this.getRecordInfo();

		},
	
		methods:{
			async getQues(type) {
				// const table1 = await this.$myRequest({
				// 	url: '/system/table/table1',
				// })
				// const table2 = await this.$myRequest({
				// 	url: '/system/table/table2',
				// })
				// const table3 = await this.$myRequest({
				// 	url: '/system/table/table3',
				// })
				let res;
				if(type == 'table1'){
					res = await this.$myRequest({
						url: '/system/table/table1'
					})
				}else if(type == 'table2'){
					 res = await this.$myRequest({
						url: '/system/table/table2'
					})
				}else if(type == 'table3'){
					 res = await this.$myRequest({
						url: '/system/table/table3'
					})
				}
				console.log('251',res.data, res.data.data.questionInfo,typeof(res.data.data.questionInfo))
						
							this.table.questionInfo = res.data.data.questionInfo;
							for(let i = 0; i < this.table.questionInfo.length;i ++){
								for(let j = 0; j < this.answerList.length; j ++){
									if(this.table.questionInfo[i].id == this.answerList[j].questionId){
										let ques = {...this.table.questionInfo[i],...this.answerList[j]}
										console.log('271',ques)
										this.quesList.push(ques)
									}
								}
							}
					console.log('277',this.quesList)						
						console.log('253',this.table.questionInfo[0])
				
			},
			async getRecordInfo() {
				uni.showLoading({
					title: '获取报告中'
				})
				// 获取问卷记录
				const res = await this.$myRequest({
					url: '/system/record/getRecordInfo/' + this.recordId,
				})
				console.log('126',res.data.data.reportResult)
				console.log('127',res.data.data.totalScore)
				console.log('128',res.data.data.answer);
				console.log('129',JSON.parse(res.data.data.answer));
				console.log('130',res.data.data.tableType);
				this.answerList = JSON.parse(res.data.data.answer);
				
				// 校验是否存在记录
				if (!res.data.hasOwnProperty('data')) {
					uni.showToast({
						title: '无此测量记录',
						icon: 'error',
						success: () => {
							setTimeout(() => {
								uni.switchTab({
									url: '/pages/tabbar/home/Home'
								})
							}, 1500)
			
						}
					})
					return
				}
				const userInfo = await this.$myRequest({
					url: '/getInfo'
				})
				// 校验是否本人回答的记录
				if (res.data.data.userId != userInfo.data.user.userId) {
					uni.showToast({
						title: '非本人测量记录',
						icon: 'error',
						success: () => {
							setTimeout(() => {
								uni.switchTab({
									url: '/pages/tabbar/home/Home'
								})
							}, 1500)
			
						}
					})
					return
				}
				this.tableAlias = res.data.data.tableType;
				this.getQues( res.data.data.tableType);
			
			
				this.tableType = res.data.data.tableType;
			
			// 	this.table = JSON.parse(uni.getStorageSync(res.data.data.tableType));
			// console.log('312',this.table)
				let reportData = JSON.parse(res.data.data.reportData);
				this.reportData = reportData;
				uni.hideLoading()
			
			},
			// 跳转下一题
			toNext() {
				console.log('346')
				this.currentQuestionlistorder++;
			},
		}
	}
</script>

<style lang="less">
	.content {
		.header {
			width: 100%;

			image {
				width: 100%;
			}
		}

		.ques-con {
			text-align: left;
			width: 92%;
			margin: 0 auto;
			margin-top: -20rpx;
			line-height: 40rpx;
			border-radius: 20rpx;
			background-color: rgba(255, 255, 255, 1);
			text-align: center;
			border: 5px solid rgba(40, 123, 206, 1);
			padding: 40rpx;
			image{
				width:80rpx;
				height:80rpx;
				float: right;
			}
			.ques-title-con {
				display: flex;
				align-items: center;
			}

			.ques-title {
				font-size: 24rpx;
				text-align: left;
				margin-top: 10rpx;
				margin-bottom: 10rpx;
			}

			.ques-num {
				margin-right: 10rpx;
				display: flex;
				align-items: center;
			}

			.current-num {
				color: rgba(16, 16, 16, 1);
				font-size: 42rpx;
				text-align: left;
				font-weight: 600;
			}

			.all-num {
				color: rgba(16, 16, 16, 1);
				font-size: 32rpx;
				text-align: left;
			}

			.ques-answer-con {
				.one-answer {
					padding: 20rpx 40rpx;
					margin-top: 20rpx;
					border-radius: 52rpx;
					background-color: rgba(255, 255, 255, 1);
					color: rgba(16, 16, 16, 1);
					font-size: 32rpx;
					text-align: left;
					font-family: Arial;
					border: 2px solid rgba(187, 187, 187, 1);

					&.selected {
						background-color: rgba(40, 123, 206, 1);
						color: #fff;
						border: 2px solid rgba(40, 123, 206, 1);
					}
				}

				.answer {
					text-align: left;

					.answer-option {
						font-weight: bold;
						margin-top: 20rpx;
					}

					.answer-text {
						// font-weight: ;
						margin: 20rpx 0;
					}

					.assess-list {
						display: flex;

						.one-assess {
							display: flex;
							flex-direction: column;
							align-items: center;
							text-align: center;
							width: 100rpx;
							font-size: 24rpx;
							padding: 6rpx;
							border: 1px solid #ddd;
							.one-select{
								border-radius: 50%;
								border:1px solid #666;
								width:30rpx;
								height:30rpx;
								margin:10rpx 0rpx;
								background-color: #fff;
								&.selected{
									background-color: #18BC37;
										border: 1px solid #18BC37;
								}
							}
						}

						.one-assess:nth-child(2n) {
							// background-color: #eee;
							border-left: none;
							border-right: none;
						}
					}
				}

				.tip {
					margin: 20rpx 0rpx;
					font-size: 24rpx;
					text-align: left;
				}

				.option-con {
					display: flex;
					justify-content: space-around;
					align-items: center;
					margin: 20rpx 0;
					.one-option{
						display: flex;
					}
						.one-select{
								border-radius: 50%;
								border:1px solid #666;
								width:30rpx;
								height:30rpx;
								margin:6rpx 10rpx;
								background-color: #fff;
								&.selected{
									background-color: #18BC37;
										border: 1px solid #18BC37;
								}
							}
					.option-label {
						display: flex;
						align-items: center;
					}

					.one-radio {
						margin-left: 10rpx;
					}
				}
			}
		}

		.bottom {
			display: flex;
			justify-content: center;
			margin-top: 50rpx;

			.btn {
				width: 700rpx;
				height: 100rpx;
				border-radius: 50rpx;
				background-color: rgba(40, 123, 206, 1);
				color: rgba(255, 255, 255, 1);
				font-size: 14px;
				text-align: center;
				line-height: 100rpx;
				margin-bottom: 50rpx;
			}
		}
	}

	.tip {
		margin: 20rpx 0rpx;
		font-size: 24rpx;
		text-align: left;
	}

	.option-con-table2 {
		display: flex;
		flex-direction: column;
	}

	/deep/ .uni-radio-input {
		margin-right: 0 !important;
	}
</style>