<template>
	<view class="container" :style="themeColor()">
		<block v-if="!loading">
			<view class="poster-wrap">
				<image v-if="poster" :src="poster" mode="widthFix" :show-menu-by-longpress="true"/>
			</view>
			 
			<!-- #ifdef H5 -->
			<view class="tips">长按识别图中二维码</view>
			<!--  #endif -->

			<!-- #ifdef MP -->
			<view class="btn-poster-save primary-btn-bg" @click="save">保存海报</view>
			<!--  #endif -->

			<u-popup :show="show" @close="show = false" mode="center" :round="'var(--rounded-big)'" :safe-area-inset-bottom="false" :customStyle="{'overflow':'hidden'}">
				<view class="dialog-popup">
					<view class="title">提示</view>
					<view class="message">您拒绝了保存图片到相册的授权请求，无法保存图片到相册，如需正常使用，请授权之后再进行操作。</view>
					<view class="action-wrap">
						<view @click="closeDialog">取消</view>
						<view class="flex items-end">
							<button type="default" class="authorization-btn" open-type="openSetting" @opensetting="closeDialog" hover-class="none">立即授权</button>
						</view>
					</view>
				</view>
			</u-popup>
		</block>

		<loading-page :loading="loading"></loading-page>

		<!-- #ifdef MP-WEIXIN -->
		<!-- 小程序隐私协议 -->
		<wx-privacy-popup ref="wxPrivacyPopupRef"></wx-privacy-popup>
		<!-- #endif -->
	</view>
</template>

<script setup lang="ts">
	import { img, getToken, redirect, goback } from '@/utils/common';
	import { ref,nextTick } from 'vue';
	import { onLoad } from '@dcloudio/uni-app'
	import { getPoster } from '@/app/api/system'
	import { useShare } from '@/hooks/useShare'
    import { useLogin } from '@/hooks/useLogin'

	const show = ref(false);
	const loading = ref(true);
	
	const closeDialog = ()=> {
		show.value = false;
	}

	const wxPrivacyPopupRef:any = ref(null)

	const { setShare } = useShare()

	onLoad((option:any) => {

		if(!option.id) {
            let parameter = {
                url:'/addon/shop/pages/index',
                title: '缺少会员id',
                mode: 'reLaunch'
            };
            goback(parameter);
			return;
		}

		if(!getToken()){
            useLogin().setLoginBack({ url: '/addon/shop_fenxiao/pages/promote_code', param: { id: option.id, mid: option.mid } });
		    return;
		}

		getPosterFn(option.id);

		let share = {
			title: "分销推广",
			desc: "分销推广"
		}

		setShare({
			wechat:{
				...share
			},
			weapp:{
				...share
			}
		});
		// #ifdef MP
		nextTick(()=>{
			if(wxPrivacyPopupRef.value) wxPrivacyPopupRef.value.proactive();
		})
		// #endif
	})
	
	// 获取分享海报
	const poster = ref('');
	const getPosterFn = (id: any) => {
		loading.value = true;
		let obj = {
			type: 'fenxiao',
			param: {'member_id': id}
		}
		getPoster(obj).then((res:any) => {
			poster.value = res.data && img(res.data) || '';
			loading.value = false;
		})
	}

	// 保存海报
	const save = ()=> {
		// #ifdef MP
		uni.downloadFile({
			url: poster.value,
			success: res => {
				if (res.statusCode === 200) {
					uni.saveImageToPhotosAlbum({
						filePath: res.tempFilePath,
						success: () => {
							uni.showToast({
								title: '保存成功',
								icon: 'none'
							});
						},
						fail: err => {
							if(err.errno == 104){
							    let msg = '用户未授权隐私权限，将图像保存到相册失败';
							    uni.showToast({title: msg, icon: 'none'})
							}else if (err.errMsg == "saveImageToPhotosAlbum:fail auth deny" ||
									err.errMsg == "saveImageToPhotosAlbum:fail:auth denied") {
									show.value = true; 
							}else if(err.errMsg == "saveImageToPhotosAlbum:fail cancel"){
								let msg = '用户取消将图片保存到相册';
								uni.showToast({title: msg, icon: 'none'})
							}else{
								uni.showToast({title: err.errMsg, icon: 'none'})
							}
						}
					});
				} else {
					uni.showToast({
						title: '下载失败',
						icon: 'none'
					});
				}
			},
			fail: res => {
				uni.showToast({
					title: res.errMsg,
					icon: 'none'
				});
			}
		});
		// #endif
	}
</script>

<style lang="scss">
	.container {
		overflow: hidden;
		width: 100vw;
		min-height: 100vh;
		background-color: var(--page-bg-color);
	}

	.poster-wrap {
		width: calc(100vw - var(--sidebar-m) * 2);
		margin: var(--sidebar-m);
		line-height: 1;

		image {
			border-radius: 20rpx;
			overflow: hidden;
			width: 100%;
		}
	}

	.swiper {
		height: 1240rpx;
	}

	.btn-poster-save {
		margin: 30rpx 20rpx 30rpx;
		height: 80rpx;
		line-height: 80rpx;
		color: #fff;
        font-weight: 500;
		text-align: center;
		border-radius: 100rpx;
		font-size:26rpx;
	}

	.tips {
		text-align: center;
		color: var(--text-color-light6);
		margin-top: var(--top-m);
		font-size: 28rpx;
	}

	.dialog-popup {
		width: 580rpx;
		background: #fff;
		border-radius: var(--rounded-small);
		overflow: hidden;
		height: 100%;
		margin-bottom: -2rpx;
		margin-right: -4rpx;

		.title {
			padding: 30rpx 30rpx 0 30rpx;
			text-align: center;
			font-size: 32rpx;
			font-weight: 500;
			color: #333;
		}

		.message {
			padding: 0 var(--popup-sidebar-m);
			color: #333;
			text-align: center;
			line-height: 1.3;
			margin-top: 30rpx;
		}

		.action-wrap {
			margin-top: 60rpx;
			height: 80rpx;
			display: flex;

			&>view {
				flex: 1;
				text-align: center;
				border: 0;

				&:first-child {
					border-top: 2rpx solid #eee;
					color: var(--text-color-light6);
					height: 80rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}

				button {
					border: none;
					border-top: 2rpx solid transparent;
					padding: 0;
					margin: 0;
					width: 100%;
					height: 80rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}
		.authorization-btn{
			background-color: #07c160;
			color: #fff;
			font-size: 28rpx;
			border-radius: 0;
		}
	}
</style>