<template>
	<view style="height:100vh;">
		<view class="wanl-share" style="padding-top: 0px;background:#F5F5FA">
			<view class="wanl-poster__poster" v-if="posterShow">
				<wanlPoster
					ref="wanlPoster"
					:img="image"
					:title="shareTitle" 
					:price="price" 
					:marketPrice="marketPrice"
					:page="page"
					:scene="scene"
					@success="posterSuccess"
					@close="closeShare"
				/>
			</view>
			<view class="wanl-share__share" style="position: fixed;bottom: 0;width: 100%;background: unset;z-index: 999;">
				<!-- <view class="head">
					<view class="content">
						<view class="text-lg">分享到 </view>
					</view>
				</view> -->
				<!-- <scroll-view class="scroll-x solid-bottom" scroll-x="true" show-scrollbar="false"
					:scroll-left="scrollAnimation" scroll-with-animation> -->
				<view class="scroll-x solid-bottom">
					<!-- #ifdef MP -->
					<!-- <view class="scroll-item">
						<button open-type="share">
							<view class="icons bg-green"><text class="wlIcon-31fenxiang"></text></view>
							<view class="project text-sm"><text>分享</text></view>
						</button>
					</view> -->
					<!-- #endif -->
					<view class="scroll-item" v-for="(value, index) in providerList" :key="index" v-if="value"
						@tap="share(value)">
						<!-- <view class="icons" :class="value.background"><text :class="value.icon"></text></view> -->
						<view class="project text-sm">
							<text>{{ value.name }}</text>
						</view>
					</view>
				</view>
				<!-- </scroll-view> -->
				<view class="footer" @tap="closeShare"><text>取消</text></view>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	/**
	 * WanlShare 分享 
	 * @description 分享组件 深圳前海万联科技有限公司 https://www.wanlshop.com（除万联官方内嵌系统，未经授权严禁使用）
	 * @著作权：WanlShop 登记号：2020SR0255711 版本：V1.0.0
	 * @property {Number} scrollAnimation 滚动位置
	 * @property {Number} shareType 分享类型 0.图文 1.纯文字 2.纯图片 5.小程序
	 * @property {String} shareTitle 分享标题
	 * @property {String} shareText 分享详情
	 * @property {String} image 分享图片 如果是图文分享，且是ios平台，20kb
	 * @property {String} page 分享链接
	 * @event {Function} change 关闭弹窗
	 */
	// import {mapState} from 'vuex';
	import wanlPoster from './wanl-poster.vue';
	export default {
		name: 'WanlShare',
		props: {
			scrollAnimation: {
				type: Number,
				default: 300
			},
			shareType: {
				type: Number,
				default: 5
			},
			modalName: {
				type: String,
				default: null
			},
			shareTitle: {
				type: String,
				default: ''
			},
			shareText: {
				type: String,
				default: ''
			},
			image: {
				type: String,
				default: ''
			},
			price: {
				type: String,
				default: ''
			},
			marketPrice: {
				type: String,
				default: ''
			},
			page: {
				type: String,
				default: ''
			},
			scene: {
				type: Object,
				default () {
					return {}
				}
			},
			isReport: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				providerList: [],
				providerListBak: [],
				posterShow: true,
				posterFilePath: ''
			};
		},
		components: {
			wanlPoster
		},
		computed: {
			// ...mapState(['common'])
		},
		created() {
			let user = uni.getStorageSync('wanlshop:user');
			if(user.isLogin){
				this.scene.u = user.id;
			}
			uni.getProvider({
				service: 'share',
				success: e => {
					let data = [];
					// #ifdef APP-PLUS
					for (let i = 0; i < e.provider.length; i++) {
						switch (e.provider[i]) {
							case 'weixin':
								// data.push({
								// 	name: '微信好友',
								// 	id: 'weixin',
								// 	icon: 'wlIcon-WeChat',
								// 	background: 'bg-green',
								// 	sort: 0
								// });
								break;
							case 'sinaweibo':
								// data.push({
								// 	name: '新浪微博',
								// 	id: 'sinaweibo',
								// 	icon: 'wlIcon-WeiBo',
								// 	background: 'red',
								// 	sort: 2
								// });
								break;
							case 'qq':
								// data.push({
								// 	name: 'QQ',
								// 	id: 'qq',
								// 	icon: 'wlIcon-QQ',
								// 	background: 'blue',
								// 	sort: 3
								// });
								break;
							default:
								break;
						}
					}
					// #endif
					// data.push(
					// {
					// 	name: '生成海报',
					// 	id: 'poster',
					// 	icon: 'wlIcon-classify',
					// 	background: 'gray',
					// 	sort: 4
					// }, 
					// {
					// 	name: '链接',
					// 	id: 'link',
					// 	icon: 'wlIcon-lianjie',
					// 	background: 'gray',
					// 	sort: 5
					// });
					// if (this.isReport) {
					// 	data.push({
					// 		name: '举报',
					// 		id: 'report',
					// 		icon: 'wlIcon-jubao',
					// 		background: 'gray',
					// 		sort: 6
					// 	});
					// }
					this.providerList = data.sort((x, y) => {
						return x.sort - y.sort;
					});
				},
				fail: e => {
					uni.showModal({
						content: '获取分享通道失败',
						showCancel: false
					});
				}
			});
		},
		methods: {
			async share(e) {
				this.toSave();
				return
				
				let url = this.common.appConfig.domain + this.page + '?' + this.$wanlshop.parseParams(JSON.parse(JSON.stringify(this.scene).replace('"gr"','"groups_id"')));
				// let url1 = this.page + '?' + this.$wanlshop.parseParams(JSON.parse(JSON.stringify(this.scene).replace('"gr"','"groups_id"')));
				let params = JSON.parse(JSON.stringify(this.scene).replace('"gr"','"groups_id"'))
				params.shareId = uni.getStorageSync('shareId')?uni.getStorageSync('shareId'):null;
				console.log(params,"9999",uni.getStorageSync('shareId'))
				let url1 = this.page + '?' + this.$wanlshop.parseParams(params);
				console.log(url1,"8888888")
				if (e.id == 'poster') {
					this.openPoster();
				} else if (e.id == 'close') {	
					this.closePoster();
				} else if (e.id == 'save') {	
					this.toSave();
				} else if (e.id == 'link') {
					this.$wanlshop.copy(url);
				} else if (e.id == 'report') {
					this.closePoster();
					this.complaint();
				} else {
					if (!this.shareTitle && (this.shareType === 1 || this.shareType === 0)) {
						uni.showModal({
							content: '分享内容不能为空',
							showCancel: false
						});
						return;
					}

					if (!this.image && (this.shareType === 2 || this.shareType === 0)) {
						uni.showModal({
							content: '分享图片不能为空',
							showCancel: false
						});
						return;
					}

					// 开始分享
					let shareOPtions = {
						provider: e.id,
						scene: e.type && e.type === 'WXSenceTimeline' ? 'WXSenceTimeline' :
						'WXSceneSession', //WXSceneSession”分享到聊天界面，“WXSenceTimeline”分享到朋友圈，“WXSceneFavorite”分享到微信收藏     
						type: this.shareType,
						success: (e) => {
							uni.showModal({
								content: '已分享',
								showCancel: false
							})
						},
						fail: (e) => {
							uni.showModal({
								content: e.errMsg,
								showCancel: false
							})
						}
					}
					
					switch (this.shareType) {
						case 0:
							shareOPtions.summary = this.shareText ? this.shareText : this.common.appConfig.poster_details;
							shareOPtions.imageUrl = this.$wanlshop.oss(this.image, 50, 50);
							shareOPtions.title = this.shareTitle;
							shareOPtions.href = url;
							break;
						case 1:
							shareOPtions.summary = this.shareText ? this.shareText : this.common.appConfig.poster_details;
							break;
						case 2:
							shareOPtions.imageUrl = this.$wanlshop.oss(this.image, 50, 50);
							break;
						case 5:
							var pages = getCurrentPages();
							var page = (pages[pages.length - 1]).route;
							// shareOPtions.imageUrl = this.image ? this.$wanlshop.oss(this.image, 50, 50) : this.$wanlshop.oss(this.common.appConfig.guide_logo, 100, 125);
							shareOPtions.imageUrl = this.image ? this.$wanlshop.oss(this.image, 50, 50) : this.common.uploaddata.cdnurl+this.common.appConfig.guide_logo;
							shareOPtions.title = this.shareTitle;
							shareOPtions.miniProgram = {
								// id: this.common.appConfig.mp_weixin_id,
								id:"gh_504737f2fcee",
								// path: page, //微信小程序ID
								path: url1, //微信小程序ID
								webUrl: url,
								type: 0
							};
							break;
						default:
							break;
					}
					// if(shareOPtions.type === 0 && plus.os.name === 'iOS'){//如果是图文分享，且是ios平台，则压缩图片 
					// 	shareOPtions.imageUrl = await this.compress();
					// }
					if (shareOPtions.type === 1 && shareOPtions.provider === 'qq') { //如果是分享文字到qq，则必须加上href和title
						shareOPtions.href = url;
						shareOPtions.title = this.shareTitle;
					}
					console.log(shareOPtions,"shareOPtions")
					uni.share(shareOPtions);
				}
				if (!this.posterShow) {
					this.closeShare();
				}
			},
			// 举报商品
			complaint() {
				this.$emit('change', 'complaint');
			},
			// 关闭模态框
			closeShare() {
				this.closePoster();
				this.$emit('change');
			},
			closePoster(){
				if(this.posterShow){
					this.providerList = JSON.parse(JSON.stringify(this.providerListBak));
				}
				this.posterShow = false;
				this.$emit('closePoster')
			},
			openPoster(){
				// 深度复制
				this.providerListBak = JSON.parse(JSON.stringify(this.providerList));
				this.posterShow = true;
			},
			// 生成海报成功
			posterSuccess(e){
				this.posterFilePath = e.tempFilePath;
				// for(var i = 0; i < this.providerList.length; i++) {
				// 	if(this.providerList[i].id == 'poster'){
				// 		this.providerList[i] = {
				// 			name: '保存海报',
				// 			id: 'save',
				// 			icon: 'wlIcon-xiazai',
				// 			background: 'bg-orange',
				// 			sort: 6
				// 		};
				// 	}
				// };
				this.providerList.unshift({
					name: '保存海报',
					id: 'save',
					icon: 'wlIcon-xiazai',
					background: 'bg-orange',
					sort: 6
				})
				this.providerList.push({
						name: '链接',
						id: 'link',
						icon: 'wlIcon-lianjie',
						background: 'gray',
						sort: 5
					}, {
					name: '关闭海报',
					id: 'close',
					icon: 'wlIcon-31guanbi',
					background: 'gray',
					sort: 6
				});
			},
			// 手动保存
			toSave(url) {
				console.log('ddddddddd',this.posterFilePath)
				// #ifdef H5
				// this.$wanlshop.msg('暂不支持H5保存，请长按图片保存');
				// #endif
				//#ifndef H5
				uni.getImageInfo({
					src: this.posterFilePath,
					success: (image)=> {
						uni.saveImageToPhotosAlbum({
							filePath: image.path,
							success: ()=> {
								uni.showToast({
									title: '海报已保存相册',
									icon: 'success',
									duration: 2000
								});
								this.closeShare();
							}
						});
					}
				});
				//#endif 
			}
			
		}
	};
</script>
<style lang="scss" scoped>
	page{
		height: calc(100vh - 44px);
	}
	.wanl-share{
		height: 100%;
		// 海报
		&__poster{}
		/* 分享 */
		&__share {
			background-color: #ffffff;
			border-radius: 11px 11px 0 0;
			min-height: 50rpx;
			padding-bottom: 0px;
			padding-bottom: env(safe-area-inset-bottom);
			.head {
				padding: 25rpx 25rpx 10rpx 25rpx;
				.content {
					justify-content: left;
					margin-left: 16rpx;
				}
			}
			.scroll-x {
				white-space: nowrap;
				width: 100%;
				padding: 24rpx 0;
				text-align: left;
				// height: 242rpx;
				display: flex;
				justify-content: center;
				.scroll-item {
					background: #fff;
					display: inline-block;
					font-size: 36rpx;
					// margin-left: 36rpx;
					margin: 0 10rpx;
					text-align: center;
					width: 200rpx;
					height: 50rpx;
					line-height: 50rpx;
					border-radius: 10rpx;
					&:last-child {
						// margin-right: 36rpx;
					}
					.icons {
						width: 100rpx;
						height: 100rpx;
						line-height: 100rpx;
						border-radius: 9999rpx;
						margin: 0 auto;
						font-size: 40rpx;
						display: block;
						&.gray {
							color: #606060;
							background-color: #f5f5f5;
						}
						&.red {
							color: #ffffff;
							background-color: #e6162c;
						}
						&.blue {
							color: #ffffff;
							background-color: #3e92e8;
						}
					}
					button {
						line-height: 1;
						background-color: rgba(0, 0, 0, 0);
						border: 0;
						padding: 0;
						&:after {
							border: 0;
						}
					}
					.project {
						// margin-top: 25rpx;
					}
				}
			}
			.footer {
				height: 90rpx;
				line-height: 90rpx;
				font-size: 30rpx;
			}
		}
	}
	::v-deep .uni-scroll-view-content{
		display: flex;
		justify-content: center;
	}
</style>