<template>
	<view v-if="modelValue">
		<view class="poster-layer" @touchmove.stop.prevent></view>
		<view class="poster" v-if="!isEmpty(data)">
			<view class="close" @click="onClose"><uni-icons type="closeempty" size="18" color="#666"></uni-icons></view>
			<view class="poster-wrap">
				<image v-if="path" :src="path" mode="widthFix" style="width: 300px; height: 460px;"></image>
				<l-painter ref="painter" @fail="fail" @done="done" @progress="progress" css="width: 300px; height: 460px;border-radius: 10px;" isCanvasToTempFilePath useCORS hidden @success="path = $event">
					<l-painter-view css="width:300px; background: #fff; height: 460px;border-radius: 0px;">
						
						<l-painter-view css="width:260px; height: 50px; margin-left: 20px; margin-top: 10px;">
							<l-painter-view css="position: absolute; top: 5px;">
								<l-painter-image :src="user.avatar" css="width: 40px; height: 40px; border-radius: 50%;" />
							</l-painter-view>
							<l-painter-view css="margin-left: 50px;">
								<l-painter-text :text="user.nickname" css="display:block; font-size: 16px; margin-bottom: 2px;" />
								<l-painter-text text="发现优质好物！一起开启优质购物之旅吧！" css="display:block; font-size:10px; color: red;" />
							</l-painter-view>
						</l-painter-view>
						
						<l-painter-view css="width:260px; margin-left: 20px; margin-top: 6px;">
							<l-painter-image :src="data.image" css="width: 260px; height: 200px; border-radius: 8px; object-fit: cover;" />
						</l-painter-view>
						
						<l-painter-view css="width:260px; height: 42px; margin-left: 20px; margin-top: 10px;">
							<l-painter-text :text="data.title" css="display:block; font-size:15px; line-clamp: 2;" />
						</l-painter-view>
						
						<l-painter-view css="width:260px; height: 42px; margin-left: 20px; margin-top: 8px;">
							<l-painter-text v-if="data.type == 'goods'" text="￥" css="font-size: 12px; margin-left: 2px; color: red; margin-top: 5px;" />
							<l-painter-text :text="data.type == 'point' ? data.point : data.sell_price" css="font-size: 16px; margin-left: 2px; color: red" />
							<l-painter-text v-if="data.type == 'point'" text="积分" css="font-size: 12px; margin-left: 2px; color: red; margin-top: 5px;" />
							<l-painter-text :text="'原价:' + (data.type == 'point' ? data.sell_price : data.market_price)" css="font-size: 12px; margin-left: 10px; margin-top: 4px; color: #666; text-decoration: line-through" />
						</l-painter-view>
						
						<l-painter-view css="width:260px; border-bottom: 1px dashed #ccc ; margin-left: 20px; margin-top: -5px;"></l-painter-view>
						
						<l-painter-view css="width:260px; margin-left: 20px;">
							<l-painter-view>
								<l-painter-text text="长按二维码或者扫描查看" css="font-size: 12px; margin-left: 2px; color: #888; margin-top: 12px; width: 190px;" />
								<l-painter-text text="购物狂欢，好礼不断！\n全球尖端商品尽在掌握！" css="margin-left: 2px; font-size: 10px; color: red; margin-top: 8px; width: 190px;" />
							</l-painter-view>
							<l-painter-view css="position: absolute; top: 10px; right: 5px;">
								<l-painter-qrcode :text="data.url" css="width: 60px; height: 60px;" />
							</l-painter-view>
						</l-painter-view>
						
					</l-painter-view>
				</l-painter>
				
			</view>
			
			<view class="poster-btn">
				<!-- #ifdef H5 -->
				<text>长按图片可以保存到手机</text>
				<!-- #endif -->
				<!-- #ifndef H5 -->
				<text v-if="nowProgress >= 1" class="btn" @click="saveImage">保存图片</text>
				<!-- #endif -->
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, watch } from "vue";
	import { useUserStore } from "@/store/user";
	import { isEmpty } from "@/el-ui/libs/check";
	
	const { user } = useUserStore();
	
	const props = defineProps({
		modelValue: {
			type: [Boolean,Number],
			default: false
		},
		data: {
			type: Object,
			default: {}
		}
	});
	
	const emits = defineEmits(["modelValue","update:modelValue"]);
	
	const path    = ref('');
	
	const done = (ev)=>{
		//console.log('done:',ev);
	}
	
	const nowProgress = ref(0);
	const progress = (ev)=>{
		nowProgress.value = ev;
	}
	
	const fail = (ev)=>{
		//console.log("fail:",ev);
	}
	
	const onClose = ()=>{
		emits("update:modelValue", !props.modelValue);
	}
	
	watch(()=>props.modelValue,(value)=>{
		if(value){
			// #ifdef H5
			document.getElementsByTagName('body')[0].style.overflow = 'hidden';
			// #endif
		}else{
			// #ifdef H5
			document.getElementsByTagName('body')[0].style.overflow = 'visible';
			// #endif
		}
	})
	
	const painter = ref();
	const saveImage = ()=>{
		painter.canvasToTempFilePathSync({
		  fileType: "png",
		  pathType: 'url',
		  quality: 1,
		  success: (tempFile) => {
			onClose();
		    // #ifndef MP
			uni.saveImageToPhotosAlbum({
			    filePath: tempFile.tempFilePath,
			    success: function () {
			        uni.showToast({
			        	icon:'success',
			        	title: "保存成功",
			        	duration: 3000
			        });
			    }
			});
		    // #endif
			
			// #ifdef MP
			uni.getSetting({
				success: (res) => {
					//如果没有相册权限
					if (!res.authSetting["scope.writePhotosAlbum"]) {
						//向用户发起授权请求
						uni.authorize({
							scope: "scope.writePhotosAlbum",
							success: () => {
								//授权成功保存图片到系统相册
								uni.saveImageToPhotosAlbum({
									filePath: tempFile.tempFilePath,
									success(res) {
										uni.showToast({
											title: '已保存到相册',
											icon: 'success',
											duration: 2000
										})
									}
								})
							},
							//授权失败
							fail: () => {
								uni.showModal({
									title: "您已拒绝获取相册权限",
									content: "是否进入权限管理，调整授权？",
									success: (res) => {
										if (res.confirm) {
											//调起客户端小程序设置界面，返回用户设置的操作结果。（重新让用户授权）
											uni.openSetting({
												success: (res) => {
													console.log(res.authSetting);
												}
											});
										} else if (res.cancel) {
											uni.showToast({
												title: "已取消！",
											});
										}
									}
								});
							},
						});
					} else {
						//如果已有相册权限，直接保存图片到系统相册
						uni.saveImageToPhotosAlbum({
							filePath: tempFile.tempFilePath,
							success(res) {
								uni.showToast({
									title: '已保存到相册',
									icon: 'success',
									duration: 2000
								})
							},
							fail: (res) => {
								uni.hideLoading();
								uni.showToast({
									title: res.errMsg,
								});
							}
						});
					}
				},
				fail: (res) => {}
			});
			// #endif
			
		  },
		});
	}
</script>

<style lang="scss" scoped>
	.show {
		display: block;
	}
	.hide {
		display: none;
	}
	.poster-layer {
		z-index: 211191;
		position: fixed;
		width: 100%; 
		height: 100%; 
		background: rgba(0,0,0,0.5); 
		left: 0; 
		top: 0;
		background-repeat: no-repeat;
		background-size: 90%;
		background-position-x: right;
	}
	.poster {
		position: fixed;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
		z-index: 211192;
		border-radius: 5px;
		margin-top: -20px;
		width: 300px;
		height: 495px;
		overflow: hidden;
		.close {
			position: absolute;
			top: 10px;
			right: 10px;
			z-index: 211199;
		}
		.poster-wrap {
			width: 300px;
			height: 460px;
			background-color: #fff;
		}
		.poster-btn {
			width: 300px;
			height: 30px;
			position: absolute;
			bottom: -10px;
			text-align: center;
			color: #fff;
			font-size: 12px;
			text {
				&.btn {
					padding: 6px 30px;
					border-radius: 15px;
					background-image: linear-gradient(to right, #fc4a46, #f97060);
				    background-size: cover;
				}
			}
		}
	}
</style>