<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="item" v-for="(item,index) in certificateList" :key="index">
				<view class="flex_box">
					<h3>编号：{{item.certificateNo}}</h3>					
				</view>
				<view class="imgBox flex_box flex_between" >
					<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>
		<z-navigation></z-navigation>
	</view>
</template>
<script>
	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
			}
		},
		//第一次加载
		onLoad(e) {
			console.log('收到的值', e);
			// this.pageType = e.type
		},
		//页面显示
		onShow() {
			this.getList()
		},
		beforeDestroy() {

		},
		onPullDownRefresh() {
			uni.stopPullDownRefresh()
		},
		computed: {
			...mapState(['userInfo']),
		},
		//方法
		methods: {
			// 图片预览
			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.thisInfo = undefined
			},
			showMore(item){
				this.thisInfo = item
				this.showTestTips = true
			}
		}
	};
</script>
<style lang="scss" scoped>
	@import '@/style/mixin.scss';
	
	.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>