<template>
	<view class="container">
		<view class="top">
			<text class="iconfont icon-youjiantou zuojiantou" @click="goBack()" style="top: 20rpx;"></text>
			<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="" style="display: flex;">
				<view class="welfareone" @click="showMask(1)">
					<view class="text-one">
						<text class="">福利一</text>
					</view>
					<text class="text-title">精品辅助资料</text>
					<view class="text-t-bottom">
					</view>
					<text class="text-footer-content">高质量辅导资料 限时赠送</text>
					<text class="text-footer">微信小助手领取</text>
				</view>
				<view class="welfareone"  @click="showMask(2)">
					<view class="text-one">
						<text class="" style="color: #FFD06B ;">福利二</text>
					</view>
					<text class="text-title">学习考证交流</text>
					<view class="text-t-bottom">
					</view>
					<text class="text-footer-content">同行精英+学习指点+实战经验</text>
					<text class="text-footer" style="margin-left: 100rpx;">进入交流群</text>
				</view>
			</view>
			
		<!-- 	<view class="welfare_pic">
				<image src="/static/certifyProcess/welfare1.png" mode="widthFix" ></image>

				<image src="/static/certifyProcess/welfare2.png" mode="widthFix"></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: {
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			getLearnCertifyList() {
				api.queryCertificateList({
					userId: uni.getStorageSync('cffp_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&cerCode=${certifyItem.cerCode}`
					})
				} else {
					let certificateId = certifyItem.isAdopt != 1 ? certifyItem.certificateId : null
					uni.navigateTo({
						url: `../certifyDetail/certifyDetail?certificateId=${certificateId}&userSignupId=${certifyItem.userSignupId}&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 dashed #06A632;
					text-align: center;
					color: #06A632;
					transform: rotate(-45deg);
					padding: 10rpx;
					left: 0;
					font-size: 28rpx;
				}

				.isUnder {
					position: absolute;
					border: 2rpx dashed #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;
			}
		}
	}

	.welfareone {
		width: 330rpx;
		height: 350rpx;
		background: url('../../static/Group1760.png') no-repeat;
		background-size: 100%;

		.text-one {
			// position: absolute;
			width: 110rpx;
			height: 30rpx;
			text-align: center;
			color: #5C9BFE;
			transform: rotate(-45deg);
			margin-top: 40rpx;
			left: 40rpx;
			font-size: 24rpx;
		}

		.text-title {
			position: absolute;
			margin-left: 80rpx;
			color: #5C9BFE;
			font-weight: 600;
			font-size: 32rpx;
		}
		.text-t-bottom{
			position: absolute;
			margin-top: 50rpx;
			margin-left: 80rpx;
			width: 220rpx;
			height: 4rpx;
			background: linear-gradient(90deg, #F3B933 0%, #5C9BFE 0%, rgba(127,176,254,0) 100%);
			border-radius: 6rpx;
			opacity: 1;
		}
		.text-footer-content{
			position: absolute;
			margin-left: 80rpx;
			font-size: 26rpx;
			width: 210rpx;
			margin-top: 60rpx;
			color: #999999;
		}
		.text-footer{
			position: absolute;
			margin-top: 170rpx;
			font-size: 30rpx;
			color: #FFFFFF;
			margin-left: 70rpx;
		}
	}
	.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 {
			margin-top: 40rpx;
			width: 60% !important;
		}

		.tips {
			width: 100%;
			text-align: center;
			// font-size: 28rpx;
		}
	}
</style>
