<template>
	<view class="viewWrap">
		<z-nav-bar :title="title"></z-nav-bar>
		<view class="scale_block" v-show="status==0">
			<text class="scale_title">{{data.title}}</text>
			<view class="scale_solid">
				<view class="scale_des"><text style="font-weight: bold;">量表简介：</text>{{data.des}}</view>
				<view class="scale_des"><text style="font-weight: bold;">题目数量：</text>{{data.num}}</view>
				<view class="scale_des"><text style="font-weight: bold;">测试说明：</text>{{data.tip}}</view>
			</view>
			<u-button class="scale_btn" @click="startTest">进入测试</u-button>
		</view>
		<view class="scale_block" v-show="status==1">
			<view class="test_block">
				<text class="current_test">{{currentIndex+1}}、{{testList[currentIndex]}}</text>
				<radio-group @change="radioChange" class="test_group" :style="{ height: radioHeight + 'px' }">
					<label v-for="(item,index) in checkList" :key="index" class="test_label">
						<radio :value="String(item.value)" class="test_radio">{{item.name}}</radio>
					</label>
				</radio-group>
			</view>
		</view>
		<view class="scale_block" v-show="status==2">
			<view class="result_block">
				<text class="result_title">{{data.title}}-测试结果</text>
				<text class="result_total">{{resultTotal}}分</text>
				<text class="result_content">{{resultContent}}</text>
				<u-button class="result_btn" @click="back">回到测试页</u-button>
				
				<view class="result_border">
					<text class="result_con">结果解释：</text>
					<text class="result_cnRes" v-if="data.type=='yiyu'&&countryIndex==0">{{data.cnRes}}</text>
					<text class="result_cnRes" v-else>{{data.worldRes}}</text>
					<text class="result_con" style="padding-top: 40rpx;">计分规则：</text>
					<text class="result_cnRes">{{data.role}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import $http from '@/config/requestConfig.js';
export default {
	data() {
		return {
			data: {},
			countries: [],
			multiArray: [[], []],
			value: [0, 0],
			selectedData: {},  //城市
			status: 0,  //是否进入测试
			title: '心身量表',
			countryIndex: 0,
			timer: null, // 用来绑定当前选择的值
			checkList: [],  //默认选项列表
			testList: [],  //测试题目数据
			currentIndex: 0,  //默认第一题
			resList: [],  //测试结果数据集合，用于传参！记录！
			radioHeight: '',
			resultContent: '',
			resultTotal: ''
		};
	},
	onLoad() {
		this.data = JSON.parse(uni.getStorageSync('data'));
		this.resultList = this.data.result;
		//选项
		this.checkList = this.resultList.map((item, index) => ({
			name: item,
			value: index+1
		}));
		this.getTestData();
		//radioHeight
		this.radioHeight = this.checkList.length*42 +20;
	},
	methods: {
		//开始测试
		startTest(){
			//切换界面，进入测试
			this.status = 1;
			this.title = '开始测试题';
		},
		//测试题目
		getTestData(){
			$http.request({
				url: "common/selfEvaluationForm/formSubjectList",
				method: "POST",
				data: {
					type: this.data.type
				},
				header: {
					'Content-Type': 'application/json'
				},
			})
			.then(res => {
				if (res.code == 0) {
					if(res.list&&res.list.length>0){
						this.testList = res.list;  //题目数据
					}else{
						uni.showToast({
							title: '暂无数据',
							icon: 'none'
						})
					}
				}
			}).catch(e => {
				
			});
		},
		//选值
		radioChange(e){
			const value = e.detail.value;
			this.resList.push(Number(value));  //记录测试结果集合
			//延迟展示下一题
			if (this.currentIndex < this.testList.length - 1) {
				this.timer = setTimeout(() => {
					this.currentIndex++;
					this.checkList = []
					//延迟更换选项，避免再显示被勾选
					this.timer = setTimeout(() => {
						this.checkList = this.resultList.map((item, index) => ({
							name: item,
							value: index+1
						}));
					}, 50)
				}, 500)
			}else{
				//如果做完最后一道题
				this.getCountForm();
			}
		},
		//测试结果
		getCountForm(){
			$http.request({
				url: "common/selfEvaluationForm/countForm",
				method: "POST",
				data: {
					country: this.selectedData.country,
					city: this.selectedData.city,
					type: this.data.type,
					resList: this.resList
				},
				header: {
					'Content-Type': 'application/json'
				},
			})
			.then(res => {
				if (res.code == 0) {
					this.status = 2;
					this.resultContent = res.status;
					this.resultTotal = res.total;
				}
			}).catch(e => {
				
			});
		},
		//回到首页
		back(){
			uni.navigateBack({
				delta: 1
			})
		}
	}
};
</script>

<style scoped>
.viewWrap{
	height: 100vh;
	background-color: #f4f7ff;
}
.scale_block{
	padding: 20rpx;
}
.scale_item{
	margin-bottom: 50rpx;
}
.scale_solid{
	border-radius: 20rpx;
	background-color: #fff;
	padding: 20rpx;
	box-shadow: 0px 0px 10px 0px #a7bbe4;
}
.scale_title{
	display: inline-block;
	width: 100%;
	font-size: 42rpx;
	color: #333;
	text-align: center;
	padding: 30rpx 0 20rpx;
}
.scale_des{
	font-size: 30rpx;
	line-height: 48rpx;
	color: #666;
	padding: 5rpx 0;
}
.scale_btn{
	width: 80%;
	height: 85rpx;
	margin: 60rpx auto 0;
	color: #fff;
	font-size: 30rpx;
	background: #258feb;
	border-radius: 10rpx;
}
.test_group{
	margin-top: 20rpx;
	background: #fff;
	border-radius: 20rpx;
	padding: 20rpx 30rpx;
	box-sizing: border-box;
	
	.uni-radio-input{
		width: 14px !important;
		height: 14px !important;
		margin-right: 15rpx;
	}
}
.test_label{
	display: block;
	padding: 20rpx 0;
	font-size: 30rpx;
}
.test_radio{
	display: flex;
	align-items: center;
}
.current_test{
	font-size: 32rpx;
	padding-top: 30rpx;
	color: #000;
	display: block;
}
.result_block{
	border-radius: 20rpx;
	background-color: #fff;
	padding: 80rpx 30rpx 50rpx;
	color: #333;
}
.result_title{
	display: block;
	font-size: 36rpx;
	line-height: 40rpx;
	text-align: center;
}
.result_total{
	display: block;
	font-size: 52rpx;
	line-height: 50rpx;
	font-weight: 800;
	color: crimson;
	padding: 60rpx 0 30rpx;
	text-align: center;
}
.result_content{
	display: block;
	font-size: 32rpx;
	text-align: center;
}
.result_btn{
	width: 500rpx;
	height: 70rpx;
	margin: 60rpx auto 0;
	color: #fff;
	font-size: 30rpx;
	background: #258feb;
	border-radius: 10rpx;
}
.result_cnRes{
	display: block;
	font-size: 28rpx;
	line-height: 48rpx;
	margin-top: 10rpx;
}
.result_con{
	display: block;
	font-size: 32rpx;
	line-height: 48rpx;
	color: crimson;
}
.result_border{
	border: 1rpx solid #258feb;
	border-radius: 10rpx;
	padding: 40rpx 30rpx;
	margin-top: 100rpx;
}
</style>