<template>
	<view>
		<!-- #ifdef H5 -->
		<view v-if="isWechat" @click="onWeixin" class="share-weixin" :style="{ 'background-image': 'url('+domain+'/static/mobile/share/share.png)' }"></view>
		<!-- #endif -->
		<view class="share" :class="{ show: modelValue }">
			<view class="close" @click="onClose">
				<uni-icons type="closeempty" color="#888" size="20"></uni-icons>
			</view>
			<view class="share-list">
				<view v-if="providerList.length > 0" class="share-box" v-for="(item,index) in providerList" :key="index" @click="share(item)">
					<image :src="item.img"></image>
					<view>{{item.name}}</view>
				</view>
				<view v-if="providerList.length <= 0" class="share-empty">
					分享功能未开通
				</view>
			</view>
			<view class="cancel" @click="onClose">取消分享</view>
		</view>
	</view>
</template>

<script setup>
	import { onMounted, ref } from "vue";
	import { browser } from "@/el-ui/libs/check";
	import { useAppStore } from "@/store/app";
	
	const appStore = useAppStore();
	
	const props = defineProps({
		modelValue: {
			type: [Boolean,Number],
			default: false
		},
		params: {
			type: Object,
			default: {
				title: "",
				url: "",
				text: "",
				image: ""
			}
		}
	});
	
	const emits = defineEmits(["modelValue","update:modelValue","share"]);
	
	const onClose = ()=>{
		emits("update:modelValue", !props.modelValue);
	}
	
	const providerList = ref([]);
	const domain = uni.$http.getDomain();
	onMounted(()=>{
		// #ifdef APP-PLUS
		uni.getProvider({
			service: 'share',
			success: (e) => {
				let data = []
				for (let i = 0; i < e.provider.length; i++) {
					switch (e.provider[i]) {
						case 'weixin':
							data.push({
								id: 'weixin',
								name: '微信',
								img: domain + "/static/mobile/share/icon_weixin.png",
								sort:0
							})
							data.push({
								id: 'weixin',
								name: '朋友圈',
								type:'WXSenceTimeline',
								img: domain + "/static/mobile/share/icon_pengyouquan.png",
								sort:1
							})
							break;
						case 'sinaweibo':
							data.push({
								id: 'sinaweibo',
								name: '新浪微博',
								img: domain + "/static/mobile/share/icon_weibo.png",
								sort:2
							})
							break;
						case 'qq':
							data.push({
								id: 'qq',
								name: 'QQ',
								img: domain + "/static/mobile/share/icon_qq.png",
								sort:3
							})
							break;
						default:
							break;
					}
				}
				
				providerList.value = data.sort((x,y) => {
					return x.sort - y.sort
				});
			},
			fail: (e) => {
				uni.showModal({
					content:'获取分享通道失败',
					showCancel:false
				})
			}
		});
		// #endif
		
		providerList.value.push({
			id: 'poster',
			name: '商品海报',
			img: domain + "/static/mobile/share/icon_poster.png",
			sort:4
		});
		
		let browsers = browser();
		if(browsers.type=="h5" && browsers.isWechat){
			providerList.value.push({
				id: 'wechat',
				name: '微信好友',
				img: domain + "/static/mobile/share/icon_weixin.png",
				sort:5
			});
		}
	})
	
	const isWechat = ref(false);
	const onWeixin = ()=>{
		isWechat.value = !isWechat.value;
	}
	
	const share = async (e)=>{
		if(e.id=="wechat"){
			emits("update:modelValue", !props.modelValue);
			isWechat.value = true;
			return false;
		}else if(e.id=="poster"){
			emits("share",e);
			return false;
		}
		
		const { name } = appStore.getApp();
		const text = props.params.text.length > 0 ? props.params.text : "您的好友向您分享购物商城【"+name+"】";
		if(props.params.image.length <= 0){
			uni.showModal({
				content:'分享失败，获取分享图片为空',
				showCancel:false
			});
			return ;
		}
		
		let shareOPtions = {
			provider: e.id,
			scene: e.type && e.type === 'WXSenceTimeline' ? 'WXSenceTimeline' : 'WXSceneSession', //WXSceneSession”分享到聊天界面，“WXSenceTimeline”分享到朋友圈，“WXSceneFavorite”分享到微信收藏     
			type: e.id == 'qq' ? 1 : 0,
			success: (e) => {
				uni.showModal({
					content: '已分享',
					showCancel:false
				})
			},
			fail: (e) => {
				uni.showModal({
					content: e.errMsg,
					showCancel:false
				})
			},
			complete:function(){
				console.log('分享操作结束!')
			}
		}
		
		switch (shareOPtions.type){
			case 0:
				shareOPtions.summary = props.params.text;
				shareOPtions.imageUrl = props.params.image;
				shareOPtions.title = props.params.title;
				shareOPtions.href = props.params.url;
				break;
			case 1:
				shareOPtions.summary = props.params.text;
				break;
			default:
				break;
		}
		
		if(shareOPtions.type === 0 && plus.os.name === 'iOS'){//如果是图文分享，且是ios平台，则压缩图片
			shareOPtions.imageUrl = await compress();
		}
		
		if(shareOPtions.type === 1 && shareOPtions.provider === 'qq'){//如果是分享文字到qq，则必须加上href和title
			shareOPtions.href = props.params.url;
			shareOPtions.title = props.params.title;
		}
		
		uni.share(shareOPtions);
	}
	
	const compress = ()=>{
		let img = props.params.image;
		
		return new Promise((res) => {
			var localPath = plus.io.convertAbsoluteFileSystem(img.replace('file://', ''));
			plus.io.resolveLocalFileSystemURL(localPath, (entry) => {
				entry.file((file) => {// 可通过entry对象操作图片
					if(file.size > 20480) {// 压缩后size 大于20Kb
						plus.zip.compressImage({
							src: img,
							dst: img.replace('.jpg', '2222.jpg').replace('.JPG', '2222.JPG'),
							width: '10%',
							height: '10%',
							quality: 1,
							overwrite: true
						}, (event) => {
							console.log('success zip****' + event.size);
							let newImg = img.replace('.jpg', '2222.jpg').replace('.JPG', '2222.JPG');
							res(newImg);
						}, function(error) {
							uni.showModal({
								content:'分享图片太大,需要请重新选择图片!',
								showCancel:false
							})
						});
					}
				});
			}, (e) => {
				console.log('Resolve file URL failed: ' + e.message);
				uni.showModal({
					content:'分享图片太大,需要请重新选择图片!',
					showCancel:false
				})
			});
		})
	}
</script>

<style lang="scss" scoped>
	/* #ifdef H5 */
	.share-weixin {
	  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;
	}
	/* #endif */
	.share {
		box-shadow:0px 1px 10px #999;
		position: fixed;
		left: 0;
		bottom: 0;
		border-radius: 15rpx;
		background-color: #fff;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		min-height: 300rpx;
		font-size: 28rpx;
		border: 1px solid #ccc;
		z-index: 276;
		overflow: hidden;
		transition:all .3s cubic-bezier(.65,.7,.7,.9);
		transform:translate3d(0,100%,0);
		&.show {
			transform:translate3d(0,0,0);
			z-index: 100001;
		}
		.close {
			position: absolute;
			top: 10rpx;
			right: 10rpx;
		}
		.share-list {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			padding-top: 25rpx;
			.share-box {
				width: 25%;
				height: 215rpx;
				text-align: center;
				image {
					width: 115rpx;
					height: 115rpx;
				}
			}
		}
		.cancel {
			width: 100%;
			height: 95rpx;
			line-height: 95rpx;
			position: absolute; 
			bottom: 0rpx; left: 0rpx; 
			z-index: 1; color: #000; font-size: 44rpx; 
			cursor: pointer; 
			text-align: center;
			font-size: 32rpx;
			border-top: 1px solid #ebebeb;
		}
	}
</style>