<template>
	<view class="container">
		<view class="top">
			<image src="../../static/certifyProcess/learnCertifyBanner.png" mode="widthFix"></image>
		</view>
		<view class="certify_content">
			<view class="title">
				认证类别
			</view>
			<view class="list_wrapper">
				<view class="list_content" v-for="(certifyItem,idx) in certificates">
					<!-- <view class="isUnder" style="border: 2rpx solid #3671F4;" v-if="certifyItem.isAdopt=='1'">
						认证中
					</view> -->
					<view  :class="certifyItem.isAdopt=='1' ? 'isUnder' : certifyItem.isAdopt=='3' ? 'isAdopt' : ''" >
						<span v-if="certifyItem.isAdopt=='1'">认证中</span>
						<span v-if="certifyItem.isAdopt=='3'">通过认证</span>
					</view>
					<view class="" >
						<image :src="certifyItem.cerLogoUrl" mode="widthFix"></image>
					</view>
					<view class="" style="flex: 1;text-align: center;">
						<text class="certify_name">{{certifyItem.cerName}}</text>
					</view>
					
					<view class="view_btn" @click="switchDetail(certifyItem)" >
						<span>{{certifyItem.isAdopt=='3'?'查看证书':'认证详情'}}</span>
					</view>
				</view>
			</view>
			<view class="title">
				认证查询
			</view>
			<view class="list_wrapper">
				<navigator class="certify_enter" url="../authentication-query/authentication-query">
					认证查询入口
				</navigator>
			</view>
		</view>
		<view class="welfare_wrapper">
			<view class="title">
				精品福利
			</view>
			<view class="welfare_pic">
				<image src="/static/certifyProcess/welfare1.png" mode="widthFix" @click="showMask(1)"></image>
				<image src="/static/certifyProcess/welfare2.png" mode="widthFix" @click="showMask(2)"></image>
			</view>
		</view>
		<view class="question_wrppaer">
			<view class="title">
				常见问题
			</view>
			<view class="question_content" v-for="item in planFaqs">
				<view class="question">
					Q.{{item.question}}
				</view>
				<view class="answer">
					<text style="color:#3876F8">A.</text>
					<text style="color: #999999;">{{item.answer}}</text>
				</view>
			</view>
		</view>
	</view>
	<view class="mask"  v-if="mask_flag"></view>
	<view class="mask_content" v-if="mask_flag">
		<image :src="qrCode" mode="widthFix"></image>
		<view class="tips">{{maskTips}}</view>
		<text class="iconfont icon-guanbi" @click="mask_flag = false"></text>
	</view>
</template>

<script>
	import api from '../../api/api';
	export default{
		data(){
			return {
				certificates:[],
				planFaqs:[],
				boutiqueWelfares:[],
				mask_flag:false,
				qrCode:null,
				userId:uni.getStorageSync('cffp_userId')
			}
		},
		components:{},
		onLoad(){
			this.getLearnCertifyList();
		},
		methods:{
			getLearnCertifyList(){
				api.queryCertificateList({userId: this.userId}).then((res)=>{
					console.log(res)
					if(res['success']){
						this.certificates = res['data']['certificates'];
						this.planFaqs = res['data']['planFaqs'];
						this.boutiqueWelfares =res['data']['boutiqueWelfares'];
					}else{
						this.certificates = [];
						this.planFaqs = [];
						this.boutiqueWelfares = [];
					}
				})
			},
			switchDetail(certifyItem){
				//2通过跳到证书页，1跳到证书详情
				if(certifyItem.isAdopt == 3){
					uni.navigateTo({
						url:`../authentication-query/authentication-result?queryType=1`
					})
				}else{
					uni.navigateTo({
						url:`../certifyDetail/certifyDetail?certificateId=${certifyItem.certificateId}&userSignupId=null&status=${certifyItem.isAdopt}`
					})
				}
			},
			showMask(type){
					this.mask_flag = true;
					if(type==1){
						this.qrCode=this.boutiqueWelfares[0]['wechatCodeUrl'];
						this.maskTips = '请添加微信小助手获取 精品辅助资料';
					}
					if(type==2){
						this.qrCode=this.boutiqueWelfares[1]['wechatCodeUrl'];
						this.maskTips = '请扫码进入微信学习 考证交流群';
				}
			}
			
		}
	}
</script>

<style lang="scss">
	.certify_content{
		background: #F1F6FF;
		border-radius:24rpx 24rpx 0 0;
		padding: 30rpx;
		position: relative;
		top: -30rpx;
		.list_wrapper{
			margin-bottom: 40rpx;
			.list_content {
				display: flex;
				background: #fff;
				position: relative;
				margin-bottom: 20rpx;
				padding: 10rpx 20rpx;
				align-items: center;
				padding-left: 160rpx;
				justify-content: space-between;
				.isAdopt{
					position: absolute;
					border: 2rpx solid #06A632;
					text-align: center;
					color: #06A632;
					transform: rotate(-45deg);
					padding: 10rpx;
					left: 0;
					font-size: 28rpx;
				}
				.isUnder{
					position: absolute;
					border: 2rpx solid #3671F4;
					text-align: center;
					color: #3671F4;
					transform: rotate(-45deg);
					padding: 10rpx;
					left: 0;
					font-size: 28rpx;
				}
				image{
					width:80rpx!important;
				}
				.view_btn{			
					background: linear-gradient(306deg, #7EA8FF 0%, #4984FF 100%);	
					border-radius: 2px 2px 2px 2px;
					color: #fff;
					padding: 10rpx;
				}
			}
			.certify_enter{
				background: #fff;
				text-align: center;
				padding: 20rpx;
				text-decoration:underline;
				color: #3977FA;
			}
		}
	}
	.title{
		text-align: center;
		margin:0 20rpx 20rpx 20rpx;
		font-size:40rpx;
	}
	.welfare_wrapper{
		background: #fff;
		padding: 20rpx;
		margin-bottom: 30rpx;
		.welfare_pic{
			display: flex;
			justify-content: space-between;
			image{
				width: 46%!important;
			}
			image:nth-child(2){
				position: relative;
				right: 20rpx;
			}
		}
	}
	.question_wrppaer{
		padding: 30rpx;
		.question_content{
			margin-bottom: 20rpx;
			.question{
				font-size: 36rpx;
				margin-bottom: 20rpx;
			}
		}
	}
	.mask{
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		height: 100%;
		z-index: 1;
		background-color: rgba(0,0,0,.4);
	}
	.mask_content{
		width: 90%;
		background: #fff;
		margin: auto;
		z-index: 2;
		height: 40%;
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		.iconfont{
			display: inline-block;
			width: 80rpx;
			height: 80rpx;
			text-align: center;
			line-height: 80rpx;
			color: #fff;
			border-radius: 50%;
			background-color: rgba(0, 0, 0, 0.6);
			bottom: -100rpx;
			position: relative;
			right: 0;
			margin: 0 auto;
		}
		uni-image{
			width: 60%!important;
		}
		.tips{
			width: 100%;
			text-align: center;
		}
	}
</style>