<template>
	<view class="box position-relative">
		<image class="bg" src="../../static/img/zgxy.png" mode="widthFix"></image>
		<view class="content">
			<view class="flex">
				<image class="avImg" :src="info.photo" mode="scaleToFill"></image>
				<view class="title padding-b-10">
					<view class="item flex">
						<view class="name">
							姓<text class="jg1"></text>名：
						</view>
						<view class="text">
							{{info.name}}
						</view>
					</view>
					<view class="item flex">
						<view class="name">
							性<text class="jg1"></text>别：
						</view>
						<view class="text">
								{{info.gender_name}}
						</view>
					</view>
					<view class="item flex">
						<view class="name">
							证件号：
						</view>
						<view class="text">
								{{info.idcard}}
						</view>
					</view>
				</view>
			</view>
			<view class="according">
				<view class="indentation padding-t-10">
					依据 Q /ZG2001-2018和 Q /ZG3001-2018评价标准及母婴健康专委会服务网人才入库规定，经母婴健康专委会服务网审核，您的信息符合入库条件，同意加入人才库，特此证明。
				</view>
				<view class="indentation padding-t-20">
					According to the evaluation standards of Q/ZG2001-2018 and Q/ZG3001-2018, as well as the talent storage regulations of the Maternal and Child Health Special Committee Service Network, after review by the Maternal and Child Health Special Committee Service Network, your information meets the storage conditions and you agree to join the talent pool. This is to certify.
				</view>
			</view>
			<view class="lsbox margin-b-30 padding-t-10 padding-b-10">
				<view class="item flex">
					<view class="name">
						岗位职业：
					</view>
					<view class="text">
						{{info.job}}
					</view>
				</view>
				<view class="item flex">
					<view class="name">
						入库登记：
					</view>
					<view class="text">
						{{info.level_name}}
					</view>
				</view>
				<view class="item flex">
					<view class="name">
						入库编号：
					</view>
					<view class="text">
						{{info.code}}
					</view>
				</view>
				<view class="item flex">
					<view class="name">
						入库日期：
					</view>
					<view class="text">
						{{info.date}}
					</view>
				</view>
			</view>
			<div class="qrCode" ref="qrCodeDiv"></div>
			<view class="tip">
				扫码可查看在线版本证书
			</view>
		</view>
	</view>
</template>

<script>
	import {
		cert
	} from '@/api/certificate.js'
	import {
		getUserInfo
	} from '@/api/login.js'
	import QRCode from 'qrcodejs2';
	export default {
		data() {
			return {
				id:1,
				typeList: [{
					type: 0,
					name: '男'
				}, {
					type: 1,
					name: '女'
				}],
				info:{},
			}
		},
		onLoad(res) {
			const that = this;
			if(!res.id){
				getUserInfo().then((res)=>{
					that.id = res.data.uid;
					
					
					that.$nextTick(
						() => {
							that.bindQRCode();
						}
					)
				}).catch((res)=>{
					console.log(res);
				});
			}else{
				that.id = res.id;
				that.cert();
				that.$nextTick(
					() => {
						that.bindQRCode();
					}
				)
			}
		},
		methods: {
			bindQRCode() {
				new QRCode(this.$refs.qrCodeDiv, {
					render: "canvas",
					text:this.$store.state.baseURL+this.$store.state.urlFile+'/pages/certificate/showCertificate?id=' +this.id,
					width: 100,
					height: 100,
					colorDark: "#333333", //二维码颜色
					colorLight: "#ffffff", //二维码背景色
					correctLevel: QRCode.CorrectLevel.L //容错率，L/M/H
				})
			},
			cert(){
				cert({
					id:this.id
				}).then((e)=>{
					this.info = e.data.info;
				}).catch((e)=>{
					
				})
			}
		}
	}
</script>

<style lang="scss">
	.box {
		.bg {
			width: 750rpx;
		}

		.content {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			padding: 0 80rpx;
			padding-top: 150rpx;

			.title {
				padding-left: 20rpx;
				flex-grow: 1;
				align-self: flex-end;
				

				.jg1 {
					width: 1em;
					display: inline-block;
				}
			}

			.according {
				padding-top: 100rpx;

				.indentation {
					text-indent: 2em;
				}
			}

			.avImg {
				width: 160rpx;
				height: 215rpx;
				background-color: red;
			}
		}
	}

	.item {
		font-weight: bold;
		padding-top: 20rpx;

		.name {
			font-size: 28rpx;
		}

		.text {
			flex-grow: 1;
			border-bottom: 1px solid rgb(90, 90, 86);
		}
	}
	.qrCode{
		margin: 0 auto;
		width: 200rpx;
		height: 200rpx;
	}
	.tip{
		text-align: center;
		margin-top: 10rpx;
	}
</style>