<template>
	<view class="container">
		<text class="iconfont icon-youjiantou zuojiantou" @click="goBack()" style="top:20rpx"></text>
		<view class="certifyIntro" v-html="certificateInfo.cerIntroduce"></view>
		<view class="certifySignInfo">
			<view class="ulBox">
				<view class="liBox"><text>报名时间：</text><text>{{dateFormat(certificateInfo.startDate)}} - {{dateFormat(certificateInfo.endDate)}}</text></view>
				<view class="liBox"><text>考试费用：</text><text style="color: #F15A1F;">￥{{certificateInfo.examinationPrice}}</text></view>
				<view class="liBox"><text>培训费用：</text><text style="color: #F15A1F;">￥{{certificateInfo.trainPrice}}</text></view>
				<view class="liBox"><text>培训课程：</text><text>{{certificateInfo.courseName}}</text></view>
				<view class="liBox"><text>培训方式：</text><text>{{certificateInfo.trainType == 1 ? '线上培训' : '/'}}</text></view>
				<view class="liBox"><text>考试方式：</text><text>{{certificateInfo.examinationType == 1 ? '线上考试' : '/'}}</text></view>
				<view class="liBox"><text>及格分数：</text><text>{{certificateInfo.passScore}}</text></view>
			</view>
			<view class="eqrocdeContent" v-if="certificateInfo.wechatCodeUrl">
				<image :src="certificateInfo.wechatCodeUrl" alt="" srcset="" mode="widthFix"></image>
				<text>请扫二维码进群学习~</text>
			</view>
		</view>
		<!-- 荣誉证书 -->
		<view class="certifyImgBox">
			<h3>荣誉证书</h3>
			<image :src="certificateInfo.cerUrl" alt="" srcset="" mode="widthFix"></image>
		</view>
		<!-- 考试计划 -->
		<view class="examPlanning">
			<h3>考试计划</h3>
			<view class="content" v-html="certificateInfo.examPlan"></view>
		</view>
		<!-- 考试认证流程 -->
		<view class="examProcessContainer">
			<h3>考试认证流程</h3>
			<view class="ulBox">
				<view class="liBox">
					<view>
						<image src="../../static/certifyProcess/onlineSign.png" alt="" srcset="" mode="widthFix"></image>
					</view>
					<view>
						<h4>线上报名</h4>
						<view>点击右下方“立即报名”，提交信息，选择时间 并缴费后即可完成报名。</view>	
					</view>
				</view>
				<view class="liBox">
					<view>
						<image src="../../static/certifyProcess/onlineExam.png" alt="" srcset="" mode="widthFix"></image>
					</view>
					<view>
						<h4>线上考试</h4>
						<view>考试必须在电脑端进行，通过浏览器访问考试链 接进行考试。电脑须配置摄像头设备用于考前人 脸和身份验证、考中监考等。考试前请确认设备 网络、摄像头可正常运行！</view>	
					</view>
				</view>
				<view class="liBox">
					<view>
						<image src="../../static/certifyProcess/getCertify.png" alt="" srcset="" mode="widthFix"></image>
					</view>
					<view>
						<h4>获得证书</h4>
						<view>考试分及格后，即可获得证书</view>	
					</view>
				</view>
				<view class="liBox">
					<view>
						<image src="../../static/certifyProcess/feedback.png" alt="" srcset="" mode="widthFix"></image>
					</view>
					<view>
						<h4>填写反馈</h4>
						<view>培训完成后，请填写培训反馈，考试质量进行评估。</view>	
					</view>
				</view>
			</view>
			<!-- 报名按钮区域 -->
			<view class="signBtnContent">
				<view class="consultBtn" @click="tokefu()">咨询客服</view>
				<view class="signBtn" @click="getDetail()">
					<text v-if="status == '1'">上传个人信息</text>
					<text v-else-if="status == '3'">查看</text>
					<text v-else>立即报名</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import api from "@/api/api";
	import dataHandling from "@/util/dataHandling";
	export default {
		data() {
			return {
				certificateInfo:{},
				userId: uni.getStorageSync('cffp_userId'),
				status:"",
				userSignupId:""
			};
		},
		onLoad(options) {
			this.status = options.status
			this.userSignupId = options.userSignupId
			this.queryCertificateInfo(options.certificateId,this.userSignupId)
		},
		methods:{
			goBack(){
				uni.navigateBack({  
					delta: 1  
				});
			},
			queryCertificateInfo(certificateId,userSignupId){
				const params = {
					certificateId:certificateId!='null'?certificateId:null,
					userSignupId:userSignupId!='null'?userSignupId:null
				}
				api.queryCertificateInfo(params).then(res=>{
					console.log(res)
					if(res['success']){
						this.certificateInfo = res['data']['certificateInfo'];
					}
				})
			},
			getDetail(){
				if(this.status != 1 && this.status != 3 &&this.status !== null){
					if(uni.getStorageSync('loginType')=='visitor'){
						uni.redirectTo({
							url:'/components/login/login'
						})
						try {
						    uni.clearStorageSync();
						} catch (e) {
							// console.log(e)
						    // error
						}
						return false
					}else{
						this.registerNow()
					}
				}else {
					this.uploadinfo()
				}
			},
			uploadinfo(){
				uni.navigateTo({
					url:`/pages/certifyDetail/uploadinformation?userSignupId=${this.userSignupId}&status=${this.status}`
				})
			},
			// 去立即报名页面
			registerNow(){
				const param = {
					productType:'1',
					productId:this.certificateInfo.fileId,
					userId:this.userId,
					dataSource:1
				}
				api.saveOrder(param).then(res=>{
					if(res['success']){
						this.orderId = res['data']['id'];
						uni.navigateTo({
							url:`/pages/orderConfirm/orderConfirm?fileId=${this.certificateInfo.fileId}&orderId=${this.orderId}`
						})
					}else{
						uni.showToast({
							title: res['message'],
							duration: 2000
						});
						return;
					}
				})
			},
			dateFormat(val){
				return dataHandling.dateFormat(val,'yyyy-MM-dd')
			},
			tokefu(){
				let url = 'http://q.url.cn/abkzV9?_type=wpa&qidian=true'  // URL是要跳转的外部地址 作为参数
				uni.navigateTo({
				  url: '/components/webview?url=' + url
				  // page.json定义的路径 传url 到webview界面去接收 实现跳转
				})
			}
		}
	}
</script>

<style lang="scss">
	.container{
		// padding-top: 40rpx;
		.certifyIntro{
			padding:60rpx 30rpx 20rpx;
			text-indent: 60rpx;
			line-height: 1.5;
			border-bottom: 1px solid #e4e4e4;
			background-color: #fff;
		}
		.certifySignInfo{
			padding: 20rpx 30rpx;
			line-height: 2;
			background-color: #fff;
			margin-bottom: 10rpx;
		}
		.certifyImgBox,.examPlanning,.examProcessContainer{
			padding: 20rpx 30rpx;
			margin-bottom: 10rpx;
			background-color: #fff;
		}
		.examPlanning{
			h3{
				font-size: 32rpx;
				margin-bottom: 30rpx;
			}
			.content{
				h4{
					margin-bottom: 10rpx;
					color: #333;
					margin-left: 24rpx;
				}
				view{
					margin-bottom: 20rpx;
					margin-left: 65rpx;
					color: #666;
				}	
			}
			
		}
		.eqrocdeContent{
			display: flex;
			flex-direction: column;
			align-items: center;
			image{
				width: 40% !important;
			}
		}
		.certifyImgBox{
			h3{
				font-size: 32rpx;
				margin-bottom: 30rpx;
			}
			image{
				width: 70% !important;
				transform: translateX(20%);
			}
		}
		.examProcessContainer{
			h3{
				font-size: 32rpx;
				margin-bottom: 30rpx;
			}
			.liBox{
				margin-bottom: 20rpx;
				display: flex;
				view{
					image{
						width: 40rpx !important;
						height: 40rpx;
						margin-right: 10rpx;
					}
					h4{
						color: #333;
						margin-bottom: 10rpx;
					}
					view{
						color: #666;
					}
				}
			}
		
		}
		.signBtnContent{
			margin-top: 30rpx;
			display: flex;
			justify-content: space-around;
			width: 100%;
			.consultBtn{
				display:flex;
				justify-content: center;
				align-items: center;
				background-color: #EAEFFF;
				color: #3671F4;
				border-radius: 80rpx;
				width: 40%;
				height: 90rpx;
			}
			.signBtn{
				display:flex;
				justify-content: center;
				align-items: center;
				background-color: #3671F4;
				color: #fff;
				border-radius: 80rpx;
				width: 40%;
				height: 90rpx;
			}
		}
	}
</style>
