<template>
<view class="success">
	<canvas canvas-id="firstCanvas" id="firstCanvas" :style="{width: width+'px',height: height+'px'}" v-if="type ==1">
	</canvas >
	<swiper class="sw" :indicator-dots="true" :autoplay="false" :interval="4000" :duration="1000">
		<swiper-item  class="swl" v-for="i in this.list.imgs">
			<view class="sImgList" @click="previewImg(i)">
				<image :src="i" class="sImg" mode="aspectFit"></image>
			</view>
		</swiper-item>
	</swiper>
</view>
</template>

<script>
export default {
	onReady: function (e) {
		this.getWidth()
		// 获取信息
		this.list = this.$store.state.user.information
		if(this.type == 1) {
			this.huatu()
		}else {
			console.log(this.list.imgs)
		}
		
	},
	computed: {
		// 时间戳转换
		time() {
			return this.getTime(this.list.valid_time)
		},
		// 证书高度
		height() {
			return this.width*3/2
		},
		// 字体大小
		font() {
			const size = Math.ceil((this.width-375)/20+15)
			console.log(size)
			return size +'rpx 黑体'
		},
	},
	data() {
		return {
			img1: require('@/static/img/s1.jpg'),
			img2: require('@/static/img/su2.jpg'),
			width: '',
			type: 1,
			list: {
				id: "9",
				type: "2",
				name: "京",
				idcard: "怀疑自己",
				phone: "快递积极",
				province: "安徽省",
				city: "铜陵市",
				area: "郊区",
				detail_address: "古茗",
				job: "李静",
				job_year: "1",
				uid: "33776",
				saver: "刺激感了",
				logo: "/Uploads/Picture/2021-11-17/6194a421bb357.jpg",
				add_time: "1637131806",
				status: "1",
				paid: "1",
				valid_time: "1668673114",
				check_time: "1637137114",
				pay_time: "1637131815",
				pay_money: "0.01",
				order_id: "20211117101575758703",
				grade: "1",
				grade_info: {
					id: "3",
					type: "2",
					year: "3",
					name: "3年企业会员",
					grade: "1",
					price: "0.01"
				}
			}
		}
	},
	onLoad(options) {
		// 企业或个人
		this.type = options.type
	},
	methods: {
		// 查看图片
		previewImg(current) {
			console.log(current);
			uni.previewImage({
				current,
				urls: this.list.imgs
			})
		},
		// 时间戳转换成时间
		getTime(time) {
			const num =13 - (time+'').length;
			let l = 1;//倍数
			for (let i = 0; i < num; i++) {
				l+='0';
			}
			// 重新解析为数字
			l = parseInt(l)
			const date = new Date(parseInt(time) * l);
			const year = date.getFullYear();
			const mon = date.getMonth() + 1;
			const day = date.getDate();
			const hours = date.getHours();
			const minu = date.getMinutes();
			const sec = date.getSeconds();
			return year + '-' + mon + '-' + day 
			// + ' ' + hours + ':' + minu + ':' + sec;
		},
		// 获取屏幕宽度
		getWidth() {
			this.width = (document.body.clientWidth || document.documentElement.clientWidth);
		},
		huatu() {
			var context = uni.createCanvasContext('firstCanvas')
			context.font = this.font;
			// 设置颜色
			context.fillStyle = "#000";
			const width = this.width
			const height = this.height
			// 绘制文字（参数：要写的字，x坐标，y坐标）
			context.drawImage(this.img1 ,0 ,0,width,height)
			// 企业名称
			if(this.list.unit != null) {
				context.fillText(this.list.unit, width/3.2, height/2.15);
			}
			// 个人会员姓名
			if(this.list.name != null) {
				context.fillText(this.list.name, width/3.2, height/2.15);
			}
			// 会员编号
			if(this.list.id != null) {
				context.fillText(this.list.id, width/1.32, height/13.8);
			}
			// 有效日期
			if(this.list.valid_time != null) {
				context.fillText( this.time, width/3.6, height/1.31);
			}
			context.stroke()
			context.draw()
		}
	}
}
</script>

<style lang="scss" scoped>
page {
	height: 100%;
}
#firstCanvas {
	margin: auto auto;
}
.sw {
	min-height: 500px;
	margin: auto auto;
	.swl {
	margin: auto auto;
	}
}
	.sImgList {
		.sImg {
			width: 100%;
			height: 500px;
		}
	}
</style>
