<template>
	<NavBar />
	<view class="container">
		<view class="swiper">
			<HomeSwiper :position="1" />
		</view>
		<view class="title">
			<PageTitle :title="$t('menu.partner')" />
		</view>
		<view class="shareLink">
			{{ composeLink() }}
			<CopyIcon :value="composeLink()" :size="28" />
		</view>
		<view class="shareCodeList" v-if="shareCode">
			<view class="shareCard" v-for="(size, index) in codeSizes" :key="size">
				<text class="shareName">{{ $t('partner.promotionLink.size') }}{{ index + 1 }}</text>
				<view class="shareCodeContent">
					<l-qrcode :ref="`size_${size}`" :value="shareCode" :size="size" :marginSize="1" bgColor="#fff" />
				</view>
				<view class="btnWrapper">
					<button class="primaryButton download" @click="() => downLoadQRCode(size)">
						<image src="/static/partner/download.png" mode="aspectFit" style="width: 16px; height: 16px"></image>
						{{ $t('common.download') }}
					</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			shareCode: undefined,
			codeSizes: [80, 91, 106, 119]
		};
	},
	methods: {
		composeLink() {
			if (this.shareCode) {
				return `http://47.238.103.157:81/${this.shareCode}`;
			}
		},
		downLoadQRCode(size) {
			const el = this.$refs[`size_${size}`][0];
			el.canvasToTempFilePath({
				success: (res) => {
					this.image = res.tempFilePath;
					console.log('res.tempFilePath==>', res.tempFilePath);
					// #ifdef H5
					var oA = document.createElement('a');
					oA.download = `${this.shareCode}_${size}x${size}`;
					oA.href = res.tempFilePath;
					document.body.appendChild(oA);
					oA.click();
					oA.remove();
					// #endif

					// #ifndef H5
					uni.saveImageToPhotosAlbum({
						filePath: res.tempFilePath,
						success: () => {
							uni.showToast({
								icon: 'success',
								title: this.$t('common.success.saveDone'),
							});
						}
					});
					// #endif
				},
				fail(err) {
					console.log('err:::', err);
				}
			});
		}
	},
	onLoad(params) {
		this.shareCode = params.shareCode;
	}
};
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
