<template>
	<view>
		<view style="height: calc(100vh - 150rpx);overflow: auto;">
		<view class="coverbox">
			<!-- <image class="cover" :src="config.baseUrl_api+form.images"/> -->
			<image class="cover" src="@/exam/img/bg@2x.png"/>
			<view class="name">{{form.paperName}}</view>
		</view>
		<view class="card">
			<view class="beif">{{form.instruction}}</view>
			
			<view class="garybox">
				<view>关键字：{{form.tags}}</view>
				<view>适用范围：{{form.radius}}</view>
				<view>题目数量：10</view>
				<view>评定时间：{{form.evalTime}}分钟</view>
			</view>
			
			<view class="redbox">
				<view class="tt">指导语</view>
				<view>{{form.description}}</view>
			</view>
			
		</view>
		</view>
		<view class="bottomFunc">
			<button class="submit-btn" v-if="status==-1" style="width: 380rpx;" @click="start(0)">开始测评</button>
			<button class="submit-btn" v-if="status==0" style="width: 380rpx;" @click="start(1)">继续测评</button>
			<button class="submit-btn" v-if="status==1"  @click="start(2)">重新测评</button>
			<button class="submit-btn2" v-if="status==1"  @click="goResult">查看结果</button>
		</view>
		
		
		<uni-popup ref="popYanZheng" type="center">
			<view class="popup-body">
				<view class="tt">请输入个人信息</view>
				<uni-forms>
					<uni-forms-item label="姓名">
						<uni-easyinput  v-model="formPut.nickName" placeholder="请输入姓名" />
					</uni-forms-item>
					<uni-forms-item label="手机号码">
						<uni-easyinput  v-model="formPut.phonenumber" placeholder="请输入手机号码" />
					</uni-forms-item>
					
	
					<button class="submit-btn" style="width: 380rpx;" @click="submitForm">开始测评</button>
				</uni-forms>
			</view>
		</uni-popup>
	</view>

</template>

<script setup>
	import {
		onLoad,onShow
	} from '@dcloudio/uni-app'
	import * as api from '@/common/api.js';
	import config from '@/config.js';
	import * as loginServer from '@/common/login.js';
	import _ from 'lodash'
	import {
		ref,
		getCurrentInstance
	} from 'vue';
	import dayjs from 'dayjs'
	const app = getApp();

	const {
		proxy
	} = getCurrentInstance()

	const current = ref(0);
	const popYanZheng = ref(null);
	const form = ref({});
	const status = ref(0);
	const formPut = ref({});
	let paperId = ''
	onShow(() => {
		if (app.globalData.isLogin) {
			init();
		} else {
			app.firstLoadCallback = () => {
				init();
			};
		}
	})
	onLoad((option) => {
		uni.showLoading({
			title: '加载中'
		});
		paperId = option.id
	})
	function init(){
		api.getPaperInfo(paperId).then(res=>{
			form.value = res.data
			uni.hideLoading()
		})
		api.getState(paperId).then(res=>{
			status.value = res.msg
		})
	}
	let currUser
	function checkUserPhone() {
		currUser = uni.getStorageSync('currUser')
		if (!currUser) {
			loginServer.pcLogin().then(() => {
				currUser = uni.getStorageSync('currUser')
				if (currUser.phonenumber) {
					return true
				} else {
					popYanZheng.value.open()
					return false;
				}
			});
		} else {
			if (currUser.phonenumber) {
				return true
			} else {
				popYanZheng.value.open()
				return false;
			}
		}
	}
	function start(flag){
		//验证手机号
		if (checkUserPhone()) {
			goDoText(flag)	
		}
	}
	function goDoText(flag){
		let path = `/exam/subject?id=${paperId}&flag=${flag}`;
		uni.navigateTo({
			url: path
		});
		
	}
	function goResult(){
		let path = `/exam/result?id=${paperId}`;
		uni.navigateTo({
			url: path
		});
	}
	// 订阅
	function subscribe() {
		// 场馆预订成功通知 订场取消提醒 订单退款通知
		uni.requestSubscribeMessage({
			tmplIds: ['p7_a1SGyGvJeOdwx_GKl6UlrWiWpNnejUArbnEPf-k4'],
			success: (res) => {
				console.log('success:', res)
			}
		})
	}
	function submitForm(flag){
		if(!formPut.value.nickName){
			uni.showToast({
				title:`请输入姓名`,
				icon:'none'
			})
			return
		}
		if(!formPut.value.phonenumber){
			uni.showToast({
				title:`请输入手机号码`,
				icon:'none'
			})
			return
		}
		api.updateUserInfo(formPut.value).then(res=>{
			goDoText()
			loginServer.getCurrUser()
		})
	}
</script>

<style lang="scss" scoped>
	.card{background: #fff;border-radius: 30rpx;padding: 50rpx 40rpx;
	position: relative;top:-30rpx;
		.beif{font-size: 30rpx;}
	}
	.garybox{border-radius: 15rpx;background: #F5F8FA;padding: 30rpx 38rpx;margin-top: 30rpx;
		font-size: 30rpx;line-height: 2;color: #030303;
	}
	.redbox{border-radius: 15rpx;background: rgba(242, 156, 159, 0.36);padding: 30rpx 38rpx;
	margin-top: 30rpx;line-height: 1.5;
	.tt{color: RGBA(230, 0, 18, 1);margin-bottom:26rpx;
font-weight: 600;}
	}
	.popup-body{ background-color: #fff;padding: 50rpx;
		.tt{margin-bottom:40rpx;}
	}
	.coverbox{height: 240rpx;position: relative;
		.cover{width: 100%;height: 240rpx;}
		.name{position: absolute;color: #fff;
		font-size: 36rpx;top:28%;left: 40rpx;width: 8em;}
	}
</style>