<template>
	<!-- #ifdef APP-PLUS -->
	<view class="ev-w-100vw">
		<view @click="getElRect1('Poster1')" class="ev-m-32 ev-fr-s-c pt20">
			<view class="card1 Poster1 d-c d-b-s pr">
				<image crossorigin="anonymous" data-etype="image" :data-enode="info.img1" :src="info.img1" mode="aspectFit" class="card-bg Poster1"></image>
				<image
					v-if="detail.headPath"
					crossorigin="anonymous"
					data-etype="image"
					:data-enode="detail.headPath"
					:src="detail.headPath"
					class="headPath Poster1"
					mode="widthFix"
				></image>
				<view style="z-index: 1;">
					<image crossorigin="anonymous" data-etype="image" :data-enode="info.img2" :src="info.img2" mode="widthFix" class="icon-img Poster1"></image>
					<view :data-enode="$t('MN_T_1') + '：' + (detail.memberCode || '')" class="Poster1 mb20 pr" style="z-index: 1;color: rgb(255, 255, 0);">
						{{ $t('MN_T_1') + '：' + (detail.memberCode || '') }}
					</view>
					<view :data-enode="$t('PER_DA_14') + '：' + (detail.memberName || '')" class="Poster1 mb20 pr white" style="z-index: 1;">
						{{ $t('PER_DA_14') + '：' + (detail.memberName || '') }}
					</view>
					<view :data-enode="$t('PER_DA_15') + '：' + (detail.pkGradeVal || '')" class="Poster1 mb20 pr white" style="z-index: 1;">
						{{ $t('PER_DA_15') + '：' + (detail.pkGradeVal || '') }}
					</view>
					<view :data-enode="$t('S_C_83') + '：' + (detail.pkCountryVal || '')" class="Poster1 mb20 pr white" style="z-index: 1;">
						{{ $t('S_C_83') + '：' + (detail.pkCountryVal || '') }}
					</view>
				</view>
				<view class="d-s-c">
					<view :data-enode="$t('S_L_4') + '：'" class="Poster1 pr white" style="z-index: 1;">{{ $t('S_L_4') + '：' }}</view>
					<view :data-enode="detail.countryCode || ''" class="Poster1 f28 ml10 pr white" style="z-index: 1;">{{ detail.countryCode || '' }}</view>
				</view>
			</view>
			<view class="card2 Poster1 d-c d-b-s pr">
				<view class="d-s-c">
					<view :data-enode="$t('PER_DA_18') + '：'" class="Poster1 white pr" style="z-index: 1">{{ $t('PER_DA_18') + '：' }}</view>
					<view :data-enode="detail.globalCode || ''" class="Poster1 white pr ml10 f28" style="z-index: 1">{{ detail.globalCode || '' }}</view>
				</view>

				<!-- <image crossorigin="anonymous" data-etype="image" :data-enode="info.img2" :src="info.img2"
					mode="widthFix" class="icon-img Poster1" style="margin-bottom: 0;flex-shrink: 0;"></image> -->
				<image crossorigin="anonymous" data-etype="image" :data-enode="info.img1 || ''" :src="info.img1 || ''" mode="aspectFit" class="card-bg Poster1"></image>
				<view class="awardsIcon-box d-c d-c-c">
					<image
						crossorigin="anonymous"
						data-etype="image"
						:data-enode="detail.awardsIcon || ''"
						:src="detail.awardsIcon || ''"
						mode="widthFix"
						class="awardsIcon Poster1"
					></image>
					<!-- <view :data-enode="detail.pkAwardsVal || ''" class="Poster1 mt20 pr white">{{ detail.pkAwardsVal || '' }}</view> -->
					<view :data-enode="detail.pkAwardsVal" class="Poster1 white" style="z-index: 1;">{{ detail.pkAwardsVal }}</view>
				</view>
				<view class="d-b-e ww100" style="height: 412rpx;">
					<view>
						<view :data-enode="$t('S_L_5') + '：' + (detail.registerTime || '')" class="Poster1 pr white" style="z-index: 1;">
							{{ $t('S_L_5') + '：' + (detail.registerTime || '') }}
						</view>
					</view>
				</view>
			</view>
		</view>
		<button class="normal-sub-btn mt20" @click="downImage('Poster1')">{{ $t('S_C_45') }}</button>

		<Eposter width="750" height="1334" :list="list" backgroundColor="rgb(255, 255, 255)" @on-success="onSuccess" @on-error="onErrorFunc" ref="Eposter"></Eposter>
		<!-- <image crossorigin="anonymous"  class="ev-w-100vw" :src="posterImg" mode="widthFix"></image> -->
	</view>
	<!-- #endif -->
	<!-- #ifdef H5 -->
	<view class="main">
		<div id="myImage">
			<view class="bg-card">
				<image class="img" src="/static/bg/ele-user.png"></image>
				<view class="content">
					<view class="logo"><image src="/static/images/logo.png"></image></view>
				</view>
				<view class="user-bottom">
					<!-- 	<view class="user-atatar">
		 				<image :src="userInfo.headPath"></image>
		 			</view> -->
				</view>
				<div class="user-infos">
					<view class="user" style="color: #ffff00;">{{ $t('MN_T_1') }}:{{ userInfo.memberCode }}</view>
					<div class="user">{{ $t('PER_DA_14') }}：{{ userInfo.memberName }}</div>
					<div class="user">{{ $t('ENU_PER_TY_1') }}：{{ userInfo.pkGradeVal }}</div>
					<div class="user">{{ $t('S_C_83') }}：{{ userInfo.pkCountryVal }}</div>
				</div>
				<div class="code">{{ $t('S_L_4') }}：{{ userInfo.countryCode }}</div>

				<div class="logo-img" v-if="userInfo.headPath"><img :src="userInfo.headPath" /></div>
			</view>
			<view class="bg-card">
				<image class="img" src="/static/bg/ele-user.png"></image>
				<view class="content">
					<view class="logo bh">
						<!-- <image src="../../static/images/logo.png"></image> -->
						{{ $t('PER_DA_18') }}：{{ userInfo.globalCode }}
					</view>
				</view>
				<view class="logos">
					<image crossorigin="" v-if="userInfos.awardsIcon" :src="userInfos.awardsIcon"></image>
					<view class="award">{{ userInfo.pkAwardsVal }}</view>
				</view>
				<div class="code">{{ $t('S_L_5') }}：{{ datatime(userInfo.registerTime) }}</div>
				<!-- <div class="time">
						{{$t('S_L_5')}}：{{ datatime(userInfo.registerTime) }}
					 </div> -->
			</view>
		</div>
		<u-button type="success" shape="circle" class="btn" @click="saveImage">{{ $t('S_C_45') }}</u-button>
		<a id="link"></a>
		<view style="height: 20rpx;"></view>
	</view>
	<!-- #endif -->
</template>

<script>
import Eposter from '@/components/evils-el-poster/Poster.vue';
import img1 from '@/static/bg/ele-user.png';
import img2 from '@/static/bg/ele-logo.png';
import html2canvas from 'html2canvas';
export default {
	components: {
		Eposter
	},
	data() {
		return {
			list: [],
			info: {
				img1: img1,
				img2: img2,
				name: '',
				time: '',
				desc: ''
			},
			detail: {
				memberCode: '',
				memberName: '',
				registerTime: '',
				pkCountry: 1,
				pkCountryVal: '',
				countryCircularIcon: '',
				countrySquareIcon: '',
				pkSettleCountry: 1,
				pkSettleCountryVal: '',
				settleCountryCircularIcon: '',
				settleCountrySquareIcon: '',
				pkGrade: 0,
				pkGradeVal: '',
				pkAwards: 0,
				pkAwardsVal: '',
				awardsIcon: '',
				currencyIcon: '',
				registerAuthority: 0,
				registerFans: 1,
				registerShare: 1,
				headPath: '',
				consumeAchieve: '',
				payTime: '',
				globalCode: '',
				countryCode: ''
			},
			posterImg: '',
			downImg: [],
			userInfo: '',
			userInfos: ''
		};
	},
	computed: {},
	onLoad() {
		this.getData();
		
	},
	methods: {
		saveImage() {
			const options = {
				backgroundColor: null // null或transparent可将canvas背景设置为透明
			};
			html2canvas(document.querySelector('#myImage'), options).then(canvas => {
				const image = canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream');
				const link = document.getElementById('link');
				link.setAttribute('download', '电子会员卡.png');
				link.setAttribute('href', canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream'));
				link.click();
			});
		},
		getCard(){
			let self = this;
			self._get('member/api/member/get-card', {}, res => {
				self.userInfos.gradeIcon = 'data:image/png;base64,' + res.data.gradeIconStr;
				self.userInfos.awardsIcon = 'data:image/png;base64,' + res.data.awardsIconStr;
			});
		},
		getData() {
			let self = this;
			self._get('member/api/member/get-info', {}, res => {
				// if (self.detail.headPath) {
				// 	self.getImg(self.detail.headPath, 'headPath');
				// }
				// if (self.detail.awardsIcon) {
				// 	self.getImg(self.detail.awardsIcon, 'awardsIcon');
				// }
				// self.detail.headPath = '/static/bg/card1.png';
				// self.detail.awardsIcon = '/static/bg/card2.png';

				// #ifndef H5
				self.detail = res.data;
				console.log(self.detail);
				// #endif
				// #ifdef H5
				self.userInfos = res.data;
				self.userInfo = res.data;
				// if (res.data.gradeIconStr) {
				// 	self.userInfos.gradeIconStr = 'data:image/png;base64,' + res.data.gradeIconStr;
				// 	self.userInfos.gradeIconStr.replace(/[\r\n]/g, '');
				// }
				// if (res.data.awardsIconStr) {
				// 	self.userInfos.awardsIconStr = 'data:image/png;base64,' + res.data.awardsIconStr;
				// 	self.userInfos.awardsIconStr.replace(/[\r\n]/g, '');
				// }
				// #endif
				// #ifdef H5
				self.getCard();
				// #endif
			});
		},
		datatime(value) {
			var data = new Date(value);
			const month = data.getMonth() < 9 ? '0' + (data.getMonth() + 1) : data.getMonth() + 1;
			var date = data.getDate() <= 9 ? '0' + data.getDate() : data.getDate();
			let dates = data.getFullYear() + '-' + month + '-' + date;
			return dates;
		},
		getImg(url, name) {
			uni.getImageInfo({
				src: url,
				success: res => {
					console.log('res11111', res);
					this.detail[name] = res.path;
				},
				fail: res => {
					this.detail[name] = '';
					uni.hideLoading();
					console.log('res', res.errMsg);
				}
			});
		},
		downImage(elClass) {
			this.$refs.Eposter.createForElRect(elClass, false);
		},
		getElRect1(elClass) {
			this.$refs.Eposter.createForElRect(elClass, false);
		},
		onSuccess(val) {
			console.log('success  ');
			this.posterImg = val;
			this.downloadImg(this.posterImg);
		},
		startDownload(item) {
			let listData = [];
			listData = [item];
			let self = this;
			uni.showLoading({
				title: self.$t('S_C_63')
			});
			self.downImg = [];
			if (listData.length > 0) {
				let n = 0;
				listData.forEach((item, index) => {
					console.log(listData);
					uni.downloadFile({
						//获得的临时地址
						url: item,
						success: res => {
							n++;
							console.log('获取url', res);
							if (res.statusCode == 200) {
								self.downImg = [...self.downImg, res.tempFilePath];
								if (listData.length == n) {
									uni.hideLoading();
									self.downloadImg();
								}
							} else {
								uni.hideLoading();
								uni.showModal({
									title: self.$t('w_0408')
								});
								console.log(res);
							}
						},
						fail(err) {
							n++;
							uni.hideLoading();
							uni.showModal({
								title: self.$t('w_0408')
							});
							console.log(err);
						}
					});
				});
			}
			self.sharePop = true;
		},
		downloadImg() {
			let self = this;
			let n = 0;
			uni.showLoading({
				title: self.$t('w_0413')
			});
			self.downImg = [this.posterImg];
			self.downImg.forEach((item, index) => {
				// 图片保存到本地
				uni.saveImageToPhotosAlbum({
					filePath: item,
					success(data) {
						n++;
						if (n == self.downImg.length) {
							uni.showToast({
								icon: 'none',
								title: self.$t('w_0311'),
								duration: 2000
							});
							uni.hideLoading();
						}
					},
					fail(err) {
						if (err.errMsg === 'saveImageToPhotosAlbum:fail auth deny') {
							uni.showToast({
								title: self.$t('w_0412'),
								icon: 'none',
								duration: 1000
							});
							setTimeout(() => {
								uni.openSetting();
							}, 1000);
						}
						uni.hideLoading();
						uni.showModal({
							title: self.$t('w_0406')
						});
						return;
					},
					complete(res) {
						console.log('complete');
					}
				});
			});
		},
		onErrorFunc(err) {
			console.log(`err`, err);
		}
	}
};
</script>

<style lang="scss">
/* #ifndef H5 */
.card1 {
	width: 665rpx;
	height: 387rpx;
	position: relative;
	margin: 20rpx auto;
	padding: 20rpx;
	box-sizing: border-box;
}

.card2 {
	width: 665rpx;
	height: 387rpx;
	position: relative;
	margin: 20rpx auto;
	padding: 20rpx;
	box-sizing: border-box;
}

.icon-img {
	position: relative;
	z-index: 1;
	width: 48rpx;
	margin-bottom: 20rpx;
}

.awardsIcon-box {
	position: absolute;
	left: 50%;
	top: 5%;
	z-index: 0;
}

.awardsIcon {
	width: 222rpx;
}

.headPath {
	width: 210rpx;
	// height: 210rpx;
	// border-radius: 15rpx;
	position: absolute;
	right: 24rpx;
	top: 8rpx;
	z-index: 0;
}

.card-bg {
	width: 665rpx;
	height: 387rpx;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 0;
}
/* #endif */
/* #ifdef H5 */
.user {
	color: #fff;
	font-size: 24rpx;
	margin-bottom: 20rpx;
}
.user-infos {
	position: absolute;
	top: 80rpx;
	left: 20rpx;
}
.logo-img {
	position: absolute;
	z-index: 1;
	right: 50rpx;
	top: 30rpx;
	img {
		width: 216rpx;
		// height: 276rpx;
	}
}
.logos {
	right: 20%;
	top: 10%;
	position: absolute;
	image {
		// margin-top: -95rpx;
		width: 200rpx;
		height: 200rpx;
	}
	.award {
		color: #fff;
		font-size: 24rpx;
		text-align: center;
	}
}
.time {
	color: #fff;
	font-size: 20rpx;
	position: absolute;
	bottom: 20rpx;
	right: 20rpx;
}
.code {
	color: #fff;
	font-size: 20rpx;
	position: absolute;
	bottom: 20rpx;
	left: 20rpx;
}
page {
	background-color: #f2f2f2;
}
.user-info {
	margin-left: 20rpx;
	color: #fff;
	font-size: 24rpx;
}
.user-bottom {
	position: absolute;
	bottom: 30rpx;
	display: flex;
	left: 30rpx;
	width: 100%;
}
.cardNum {
	position: absolute;
	right: 20rpx;
	top: 20rpx;
	font-size: 24rpx;
	color: #fff;
}
.logo {
	image {
		width: 50rpx;
		height: 35rpx;
		margin: 20rpx 0 0 20rpx;
	}
}
.bh {
	color: #fff;
	font-size: 28rpx;
	padding: 20rpx;
}
.content {
	position: relative;
	z-index: 1;
}
.logo {
	position: absolute;
}
.bg-card {
	position: relative;
	width: 690rpx;
	height: 410rpx;
	margin: 30rpx auto;
	.img {
		position: absolute;
		width: 690rpx;
		height: 410rpx;
	}
}
.btn {
	background-color: #fb3024;
	border: none;
	height: 92rpx;
	line-height: 92rpx;
	font-size: 30rpx;
	margin: 40rpx auto;
	width: 690rpx;
}
.user-atatar {
	image {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}
}
/* #endif */
</style>
