<template>
	<view class="container" style="padding-top: 60rpx;background: #fff;">
		<text class="iconfont icon-youjiantou zuojiantou" @click="goBack()" 
		:style="{top:queryType==1? '16rpx':'20rpx'}"></text>
		<view class="others" v-if="queryType == 2">
			<text>身份信息</text>
			<view class="others_item">
				<text>姓名：</text><input class="uni-input" type="text" placeholder="请输入姓名" v-model="userName"/>
			</view>
			<view class="others_item">
				<text>认证编号：</text><input class="uni-input" type="text" placeholder="请输证书编号" v-model="authenticationCode"/>
			</view>
		</view>
		<view class="certifyListContent" v-if="userCertificates?.length>0">
			<view class="certifyInfoItem" v-for="item in userCertificates" :key="item.cerNo" @click="previewImg(item)">
				<h4>{{item.cerName}}</h4>
				<view class="certifyImgBox">
					<image :src="item.cerUrl" alt="" srcset="" mode="widthFix"></image>
					<view>认证编号：{{item.authenticationCode}}</view>
					<view v-if="item.cerCode=='CFFP-003'">有效期至：{{dateFormat(item.endDate)}}</view>
				</view>
			</view>
		</view>
		<!-- 没有证书 -->
		<view class="noSign" v-if="userCertificates?.length==0">
			<h4>暂没有取得证书！</h4>
		</view>
	</view>
</template>

<script>
	import api from '../../api/api';
	import common from '../../common/common';
	import dataHandling from "@/util/dataHandling";
	export default{
		data(){
			return {
				userName:null,
				authenticationCode:null,
				queryType:null,
				userCertificates:[],
				cerCode:null
			}
		},
		components:{},
		onLoad(options){
			this.userName = options.userName;
			this.authenticationCode = options.authenticationCode;
			this.queryType =  options.queryType;
			this.cerCode = options.cerCode;
			this.getResult();
		},
		methods:{
			dateFormat(val){
				return dataHandling.dateFormat2(val,'yyyy-MM-dd')
			},
			goBack(){
				uni.navigateBack({  
					delta: 1  
				});
			},
			// 预览图片
			previewImg(e){
				// 预览图片
				uni.previewImage({
					urls:[e.cerUrl],
					longPressActions: {
						itemList: ['发送给朋友', '保存图片'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			getResult(){
				const  param = {
					queryType:(this.queryType=='null' || this.queryType=='undefined')?undefined:this.queryType,
					userId:uni.getStorageSync('cffp_userId'),
					userName:(this.userName == 'null' || this.userName == 'undefined')?undefined:this.userName,
					authenticationCode:(this.authenticationCode == 'null' || this.authenticationCode == 'undefined') ?undefined:this.authenticationCode
				}
				api.userCertificateResult(param).then((res)=>{
					if(res['success']){
						if(res['data']['userCertificates']){
							if(this.cerCode){
								this.userCertificates = res['data']['userCertificates'].filter((item,idx)=>{
									return item.cerCode == this.cerCode
								});
							}else{
								this.userCertificates = res['data']['userCertificates'];
							}
							
						}
					}else{
						uni.showToast({
							title: res['message'],
							duration: 2000,
							icon: 'none'
						})
						return;
					}
				});
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.others{
		padding:30rpx;
		margin-top: 30rpx;
		.others_item{
			display: flex;	
			margin-bottom: 20rpx;
			border-bottom: 2rpx #CECECE solid;
			height: 80rpx;
			align-items: center;
			.uni-input{
				height: 80rpx;
			}
		}
	}
	.noSign{
		text-align: center;
		margin-top: 10%;
	}
	.certifyListContent{
		.certifyInfoItem{
			background-color: #fff;
			// margin-bottom: 10rpx;
			border-bottom: 10rpx #FBFBFB solid;
			padding: 20rpx 0;
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			image{
				max-width: 100%;
				height: auto;
				margin: 0 auto;
			}
			.certifyImgBox{
				display: flex;
				flex-direction: column;
				align-items: flex-start;
			}
		}
		.certifyInfoItem:last-child{
			border-bottom: 0;
		}
	}
	
</style>