<template>
	<view class="content">
		<view class="header">
			<image src="../../static/images/test-bg.png"></image>
		</view>
		<view class="ques-con">
			<view class="ques-title-con">
				<text class="ques-num">
					<text class="current-num">1</text>/
					<text class="all-num">57</text>
					</text>
				<text class="ques-title">喜欢长时间的自身旋转?</text>
			</view>
			<template v-if="question.base == 'JUDG'">
				<view class="ques-answer-con">
					<template v-for="(item,index) in question.option">
						<view :class="['one-answer',curJudg == index  ? 'selected' :'']" @click="changeJudg(index)">{{item.key}}</view>
					</template>
				</view>
			</template>
			<template v-if="question.base == 'SING'">
				<view class="ques-answer-con">
					<template v-for="(item,index) in question.option">
						<!-- <view :class="['one-answer',curSing == index  ? 'selected' :'']" @click="changeSing(index)">{{item.value}}</view> -->
					<view class="answer">
						<view class="answer-option">{{item.value}}</view>
						<view class="answer-text">答案:</view>
						<view class="assess-list">
							<template v-for="(data,index0) in item.assessList">
								<view class="one-assess">
									<view class="assess-text">{{data.value}}</view>
									<view :class="['assess-select',item.check == index0 ? 'selected' :'']" @click="selectAssess(index,index0)"></view>
								</view>
							</template>
						</view>
					</view>
					</template>
					<view class="tip">以上哪个条目是最符合您的孩子的描述?</view>
					<view class="option-con">
						<radio-group >
								<radio class="one-radio" value="A" /><text>A</text>
								<radio class="one-radio" value="B" /><text>B</text>
								<radio class="one-radio" value="C" /><text>C</text>
								<radio class="one-radio" value="D" /><text>D</text>
						</radio-group>
					</view>
				</view>
			</template>
		</view>
		<view class="btn" @click="next"  v-if="question.base == 'JUDG'">下一题</view>
		<view class="btn" @click="submit" v-if="question.base == 'SING'">提交</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				question:{
					base:'JUDG',
					option:[
						{
							value:'0',
							key:'否'
						},
						{
							value:'1',
							key:'是'
						}
					]
				},
				questionSING:{
					base:'SING',
					option:[
						{
							value:'A.答案1',
							check:-1,
						assessList:[
							{
								value:'从不',
								key:'-1'
							},{
								value:'极少',
								key:'-1'
							},{
								value:'较少',
								key:'-1'
							},{
								value:'有时',
								key:'-1'
							},{
								value:'经常',
								key:'-1'
							},{
								value:'很频繁',
								key:'-1'
							},{
								value:'总是',
								key:'-1'
							},
						]
						},
						{
							value:'B.答案2',
							check:-1,
							assessList:[
								{
									value:'从不',
									key:''
								},{
									value:'极少',
									key:''
								},{
									value:'较少',
									key:''
								},{
									value:'有时',
									key:''
								},{
									value:'经常',
									key:''
								},{
									value:'很频繁',
									key:''
								},{
									value:'总是',
									key:''
								},
							]
						},
						{
							value:'C.答案3',
							check:-1,
							assessList:[
								{
									value:'从不',
									key:''
								},{
									value:'极少',
									key:''
								},{
									value:'较少',
									key:''
								},{
									value:'有时',
									key:''
								},{
									value:'经常',
									key:''
								},{
									value:'很频繁',
									key:''
								},{
									value:'总是',
									key:''
								},
							]
						},
						{
							value:'D.答案4',
							check:-1,
							assessList:[
								{
									value:'从不',
									key:''
								},{
									value:'极少',
									key:''
								},{
									value:'较少',
									key:''
								},{
									value:'有时',
									key:''
								},{
									value:'经常',
									key:''
								},{
									value:'很频繁',
									key:''
								},{
									value:'总是',
									key:''
								},
							]
						}
					]
				},
				curJudg:-1,//被选择的判断题选项
				curSing:-1,//被选择的单选题选项
			}
		},
		methods:{
			changeJudg(index){
				this.curJudg = index;
			},
			changeSing(index){
				this.curSing = index;
			},
			submit(){
				uni.redirectTo({
					url:'/homePackage/pages/testRecord'
				})
			},
			next(){
				this.question = this.questionSING;
			},
			selectAssess(index,index0){
				this.$set(this.question.option[index],'check',index0)
			}
		},
		computed: {
			checked() {
				return function(value) {
					return !!this.question.yourAnswer && this.question.yourAnswer.indexOf(value) > -1;
				}
			}
		},
	}
</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;
			.ques-title-con{
				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-text{
						font-weight: 600;
						margin:20rpx 0;
					}
					.assess-list{
						display: flex;
						.one-assess{
							text-align: center;
							width:100rpx;
							font-size:24rpx;
							padding:6rpx;
							border:1px solid #ddd;
							.assess-select{
								width:40rpx;
								height:40rpx;
								border-radius: 50%;
								border:2rpx solid #ddd;
								margin:20rpx auto 0rpx;
								&.selected{
									background-color: #287bce;
								}
							}
						}
					}
				}
				.tip{
					margin:20rpx 0rpx;
					font-size:24rpx;
					text-align: left;
				}
				.option-con{
					text-align: left;
					.one-radio{
						margin-right: 10rpx;
					}
				}
			}
		}
		.btn{
			border-radius: 30px;
			background-color: rgba(40, 123, 206, 1);
			color: rgba(255, 255, 255, 1);
			font-size: 14px;
			text-align: center;
			width:80%;
			margin:40rpx auto;
			padding:30rpx 0rpx;
		}
	}
</style>