<template>
	<view class="page">
		<z-nav-bar title="我的证书"></z-nav-bar>
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>		
		<view class="list" v-if="certificateList.length > 0">
		<view class="" style="margin: 10rpx;">
			【 共 {{certificateList.length}} 个证书 】
		</view>		
			<view class="item" v-for="(item,index) in certificateList" :key="index">
				<view class="flex_box flex_between align-items_box">
					<h3 style="font-size: 28rpx;">编号：{{item.certificateNo}}</h3>	
					
					<text class="small_btn border_radius_10" 
					style="display: block;font-size: 28rpx; color: #55aaff; border:1px solid #55aaff"
					v-if="item.certificateUrlList.length <= 0" 
					@click="showSubmit(item.id)">立即获取证书</text>
					
				</view>
				<view class="imgBox flex_box flex_between" v-if="item.certificateUrlList.length > 0">
					<view class="img" v-for="(item1,index1) in item.certificateUrlList" :key="index1">
						<image @click="preveImg(item1)" :src="item1" mode="widthFix"></image>
					</view>		
					<view class="info flex_box align-items_box">
						<text class="small_btn border_radius_10 moreBtn" @click="showMore(item)">详细信息</text>
					</view>
				</view>
				
			</view>
		</view>
		<view class="" v-else>
			<u-divider text="您还未获得证书"></u-divider>
		</view>
		<u-popup key="1" :show="showTestTips" :round="10" @close="closeManager">
			<view class="padd20 " v-if="thisInfo">
				<view class="mtb20" style="text-align: center;">
					<h3>证书详情</h3>
				</view>
				
				<view class="info">
					<view>证书类型：{{thisInfo.type}}</view>
					<view>获得时间：{{thisInfo.createTime}}</view>					
					<view class="">
						获得途径：{{thisInfo.title}}学习获得
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup key="2" :show="showSubmitInfoBlank" :round="10" @close="closeManager" z-index="998"
			overlay-style="z-index:998">
			<view class="guanli userinfoPup">
				<view class="" style="text-align: center; margin-bottom: 40rpx;">
					<h3>信息确认</h3>
					<text style="color: #666;">请确认以下证书信息</text>
				</view>
				<view class="tips border_radius_10">
					<!-- {{submitInfo.name}}-{{submitInfo.photo}} -->
					<view class="flex_box align-items_box item">
						<text class="mr20rpx">证书姓名：</text>
						<text class="mr20rpx">
							{{submitInfo.name && submitInfo.name != '' && submitInfo.name != null ? submitInfo.name : '未设置'}}
						</text>
						<text class="small_btn border_radius_10"
							v-if="!submitInfo.name || submitInfo.name != '' || submitInfo.name != null"
							@click="onPageJump('/pages/mine/userInfo/persData')" style="margin-left: 20rpx ; display: block; height: 30px; line-height: 30rpx;">
							{{submitInfo.name && submitInfo.name != '' && submitInfo.name != null ? '去修改' : '去设置'}}
						</text>
					</view>
					<view class="flex_box align-items_box item">
						<text class="mr20rpx">证书照片：</text>
						<image @click="preveImg(submitInfo.photo)" class="mr20rpx"
							v-if="submitInfo.photo && submitInfo.photo != '' && submitInfo.photo != null"
							:src="submitInfo.photo" mode="widthFix" style="width:100rpx; height:140rpx;"></image>
						<text class="mr20rpx" v-else>未上传</text>
						<text class="small_btn border_radius_10"
							v-if="!submitInfo.photo || submitInfo.photo != '' || submitInfo.photo != null"
							@click="onPageJump('/pages/mine/userInfo/persData')"
							style="margin-left: 20rpx ;display: block; height: 30px;  line-height: 30rpx;">{{submitInfo.photo && submitInfo.photo != '' && submitInfo.photo != null ? '去修改' : '去上传'}}</text>
						</text>
					</view>
				</view>
				<view class="btn_box_certificate"><button @click="createCertificate">立即生成证书</button></view>
			</view>
		</u-popup>
		<z-navigation></z-navigation>
	</view>
</template>
<script>
	import debounce from "@/common/debounce.js";
	import $http from '@/config/requestConfig.js';
	// import permission from "@/js_sdk/wa-permission/permission.js"
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				certificateList: [],
				showTestTips:false,
				thisInfo : undefined,
				certificateFlag:false,
				showSubmitInfoBlank:false,
				submitInfo: {
					img: undefined, // 证件图
					name: '' // 姓名
				},
				thisCertificateId:undefined
			}
		},
		//第一次加载
		onLoad(e) {
			console.log('收到的值', e);
			// this.pageType = e.type
		},
		//页面显示
		async onShow() {
			this.getList()
			var userObj = await this.getUserData()
			if (userObj) {
				this.submitInfo.name = userObj.name
				this.submitInfo.photo = userObj.photo
				// this.showSubmitInfoBlank = true
			}
		},
		beforeDestroy() {

		},
		onPullDownRefresh() {
			uni.stopPullDownRefresh()
		},
		computed: {
			...mapState(['userInfo']),
		},
		//方法
		methods: {
			async showSubmit(id) {	
					this.thisCertificateId = id
					this.showSubmitInfoBlank = true				
			},
			async getUserData() {
				let that = this;
				var Ss = undefined
				// 获取个人信息
				if (this.userInfo.id != undefined) {
					await this.$http
						.post('book/user/info/' + this.userInfo.id)
						.then(async (res) => {
							Ss = res.user;
							console.log('that.userData at line 698个人中心:', res.user)
						});
					return Ss
				}
			},
			// 生成证书
			createCertificate() {
				debounce(async () => {
					if(this.certificateFlag) return
					
					if (this.submitInfo.name && this.submitInfo.name != null && this.submitInfo.name != '' &&
						this.submitInfo.photo && this.submitInfo.photo != null && this.submitInfo.photo != '') {
					
					} else {
						uni.showModal({
							title: '提示',
							content: "真实姓名或证书照片未设置，请设置完成后再来生成证书吧",
							cancelText: '稍后设置',
							confirmText: '立即设置',
							success: (res) => {
								if (res.confirm) {
									uni.navigateTo({
										url: '/pages/mine/userInfo/persData'
									})
								}
							}
						})
						return
					}	
					this.certificateFlag = true
					uni.showLoading({
						title:'正在生成'
					})
					var data = {
						 "id": this.thisCertificateId   //证书id
					}
					// console.log('证书提交数据',data,this.performanceScore.userScore);	
					$http.request({
							url: "common/class/generateCertificateClass",
							method: "POST",
							data,
							header: { //默认 无 说明：请求头
								'Content-Type': 'application/json'
							},
						})
						.then(async (res) => {
							uni.hideLoading()							
							if (res.code == 0) {
								console.log('证书返回值', res);
								uni.showToast({
									title: '生成成功',
									icon: 'success'
								})
								setTimeout(() => {
									this.getList()
									this.closeManager()
									// this.getScore()
								}, 300)
							} else {
								uni.showToast({
									title: res.errMsg,
									icon: 'none'
								})
							}
							setTimeout(()=>{
								this.certificateFlag = false
							},300)
							
						}).catch(e => {
							 this.certificateFlag = false
							uni.hideLoading()
							uni.showToast({
								title: e.errMsg,
								icon: 'none'
							})
						});
				},300)
				
			},
			// 图片预览
			preveImg(url) {
				console.log('dianjile fangda tu');
				uni.previewImage({
					urls: [url],
					current: 0
				});
			},
			
			getList() {
				// console.log('获取课程详情');
				uni.showLoading({
					title: '正在加载'
				})
				$http.request({
						url: "common/userCertificate/getUserCertificateList",
						method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
						data: {},
						header: { //默认 无 说明：请求头
							'Content-Type': 'application/json'
						},
					})
					.then(res => {
						if (res.code == 0) {
							res.certificateList.forEach(item => {
								item.certificateUrl && item.certificateUrl != '' ? item.certificateUrlList = item.certificateUrl.split(',') : item.certificateUrlList = []
							})
							this.certificateList = res.certificateList
						} else {
							this.certificateList = []
						}
						console.log('证书接口请求结果', res);
						uni.hideLoading()
					}).catch(e => {
						uni.hideLoading()
						console.log(e, '数据报错')

						// this.status = 3
						uni.showToast({
							title: e.errMsg,
							icon: 'error'
						})
					});
			},
			closeManager(){
				this.showTestTips = false
				this.showSubmitInfoBlank = false
				this.thisInfo = undefined
			},
			showMore(item){
				this.thisInfo = item
				this.showTestTips = true
			},
			// 跳转
			onPageJump(url, id, modeType) {
				uni.navigateTo({
					url: `${url}?id=${id}&type=${modeType}`
				});
			},
		}
	};
</script>
<style lang="scss" scoped>
	@import '@/style/mixin.scss';
	.btn_box_certificate {
		margin-top: 70rpx;
		padding-bottom: 20rpx;
	
		button {
			font-size: 32rpx;
			@include theme('btn_bg') color: #fff;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 50rpx;
		}
	}
	.guanli {
		padding: 40rpx;
	
		h3 {
			text-align: center;
			margin-bottom: 20rpx;
			color: #333;
		}
	
		.item {
			color: #333;
			margin-bottom: 20rpx;
	
			.personbox {
				display: inline-block;
				color: #666;
			}
	
		}
	
		.arryItem {
			.arryItemSub {
				display: inline-block;
				color: #666;
				// padding-left: 80rpx;
			}
		}
	
		text {
			font-size: 30rpx;
		}
	}
	.userinfoPup {
		.tips {
			// .item{justify-content: space-around;}
		}
	
		.small_btn {
			color: #55aaff;
			border: #55aaff 1px solid;
		}
	}
	.page {
		background-color: #ffffff;
		padding: 0 20rpx;
		min-height: 100vh;
	}
	.item{margin-bottom: 20rpx;
	h3{font-weight: normal; margin: 20rpx 0;}
	}
	.img{width: 36%; overflow: hidden;
		image{width: 100%; height: 100%;}
	} 
	.imgBox{overflow: hidden;}
	.moreBtn{
		color: #55aaff; border: #55aaff 1px solid;
	}
	.padd20{padding: 20rpx;}
	.mtb20{margin-bottom: 20rpx;}
</style>