<!-- @closeShareShow 打开底部弹出框  -->
<!-- @shareImgShow 分享图片弹出框遮罩层点击事件 -->
<!-- @clickmask 关闭底部弹出框-->

<template>
	<view class="shareBottom">
		<PopManager :show="shareBottomShow" :type="type" @clickmask="closeShareBottom">
			<view class="viewMain">
				<view class="mainTitle">
					<!--  #ifdef H5||APP-PLUS -->
					<view class="titleButton" @click="shareImgShow" :style="{width:postType==3||postType==4||postType==6||postType==7?'33%':'50%'}">
						<view class="buttonImage">
							<image :src="imgfixUrls+ 'merchant/shareWx.png'"></image>
						</view>
						<view class="buttonText"><text>微信好友</text></view>
					</view>
					<!-- #endif -->
					<!-- #ifdef MP-WEIXIN -->
					<view class="titleButton" :style="{width:postType==3||postType==4||postType==6||postType==7?'33%':'50%'}">
						<button open-type="share" class="shareButton"></button>
						<view class="wxShareView">
							<view class="buttonImage">
								<image :src="imgfixUrls+ 'merchant/shareWx.png'"></image>
							</view>
							<view class="buttonText"><text>微信好友</text></view>
						</view>
					</view>
					<!-- #endif -->
					<view class="titleButton" @click="goHb" :style="{width:postType==3||postType==4||postType==6||postType==7?'33%':'50%'}">
						<view class="buttonImage">
							<image :src="imgfixUrls+ 'merchant/shareHb.png'"></image>
						</view>
						<view class="buttonText"><text>生成海报</text></view>
					</view>
					<view class="titleButton" @click="goTg" :style="{width:postType==3||postType==4||postType==6||postType==7?'33%':'50%'}"
					 v-if="postType==3||postType==4||postType==6||postType==7">
						<view class="buttonImage">
							<image :src="imgfixUrls+ 'merchant/tgsc.png'"></image>
						</view>
						<view class="buttonText"><text>推广素材</text></view>
					</view>
				</view>
				<view class="closeButton" @click="closeShareBottom"><text>关闭</text></view>
			</view>
		</PopManager>
		<!-- #ifdef H5 -->
		<PopManager :show="shareShow" :type="'top'" @clickmask="closeShareShow">
			<cover-view>
				<cover-image :src="imageRoot + 'share.png'" class="coverImg"></cover-image>
			</cover-view>
		</PopManager>
		<!-- #endif -->
		<PopManager :show="iscardPost" :type="'center'" @clickmask="iscardPost = false">
			<view class="iconfont icon-roundclose col-f card-postImageClose f-28" @click="closeCardPost"></view>
			<view class="card-postImage-box">
				<image :src="cardPostImage"  mode="" v-if="postType !== '13'"></image>
				<image :src="cardPostImage"  mode="" style="width: 90vw;height: 80vh;" v-else></image>
			</view>
			<view class="f-28 saveCrad t-c col-6 b-f" @click="saveCardImage(cardPostImage)">保存名片</view>
		</PopManager>
		<PopManager :show="showCommunity" type="center" @clickmask="showCommunity = false">
			<view  v-if="showCommunity" style="width: 90vw;height: 80vh;padding: 30upx;overflow: hidden;background-color: #323332;border-radius: 20upx;">
				<posterlate :postId="postId" :postType="postType"></posterlate>
			</view>
		</PopManager>
	</view>
</template>

<script>
	import App from '@/common/js/app.js';
	// #ifdef H5
	import wxApi from '@/common/js/wxApi.js';
	// #endif
	import PopManager from '@/components/template/PopManager.vue';
	import posterlate from '@/components/template/posterlate';
	export default {
		data() {
			return {
				shareType: 'top',
				type: 'bottom',
				// shareShow:false
				cardPostImage: null,
				iscardPost: false,
				img:'',
				showCommunity:false
			};
		},
		components: {
			PopManager,
			posterlate
		},
		props:{
			// 分享图片显示
			shareShow: {
				type: Boolean,
				default: false
			},
			// 分享弹出框显示
			shareBottomShow: {
				type: Boolean,
				default: false
			},
			// 海报类型 详情见海报接口
			postType: {
				type: String,
				default: ''
			},
			// 商户或商品id
			postId: {
				type: String,
				default: ''
			},
			isCard: {
				type: Boolean,
				default: function() {
					return false
				}
			}
		},
		mounted() {
			this.img = this.imgfixUrl;
		},
		methods: {
			closeShareShow() {
				this.$emit('closeShareShow');
			},
			shareImgShow() {
				this.$emit('shareImgShow', 'imageShow');
			},
			saveCardImage(cardImageUrl) {
				let _this = this;
				uni.downloadFile({
					url: cardImageUrl,
					success: (result) => {
						if (result.statusCode === 200) {
							uni.saveImageToPhotosAlbum({
								filePath: result.tempFilePath,
								success: function(res) {
									App.showSuccess('保存成功')
								},
								complete: function() {
									uni.hideLoading()
								}
							});
						}
					}
				});
			},
			goHb() {
				let _this = this,
					isCard = this.isCard;
				console.log(_this.postId,_this.postType);
				// debugger
				if (isCard) {
					uni.showLoading({})
					if(_this.postType == 12 || _this.postType == 13  || _this.postType == 14){
						App._post_form('&do=Poster', {
							type: _this.postType,
							id: _this.postId
						}, res => {
							_this.setData({
								cardPostImage: res.data.url,
								iscardPost: true
							})
						}, false, () => {
							uni.hideLoading()
						});
					}else{
						App._post_form('&do=Poster', {
							type: '11',
							id: _this.postId
						}, res => {
							_this.setData({
								cardPostImage: res.data.url,
								iscardPost: true
							})
						}, false, () => {
							uni.hideLoading()
						});
					}
					
					_this.$emit('gohb', 'showPost')
				} else {
					if(_this.postType == 12 || _this.postType == 13){
						_this.showCommunity = true;
						_this.closeShareBottom();
					}else{
						App.navigationTo({
							url: 'pages/mainPages/poster/poster?id=' + _this.postId + '&type=' + _this.postType
						});
					}
				}
				// _this.shareImgShow();
			},
			goTg() {
				let _this = this
				App.navigationTo({
					url: 'pages/subPages/shareMaterials/index?id=' + _this.postId + '&type=' + _this.postType
				});
			},
			closeShareBottom() {
				this.$emit('clickmask');
			},
			closeCardPost() {
				this.iscardPost = false;
			}
		}
	};
</script>

<style lang="less">
	.coverImg {
		width: 750upx;
	}

	.closeButton {
		height: 88upx;
		width: 750upx;
		text-align: center;

		>text {
			line-height: 88upx;
			font-size: 28upx;
			color: rgba(51, 51, 51, 1);
		}
	}

	.buttonText {
		text-align: center;

		>text {
			font-size: 24upx;
			color: rgba(51, 51, 51, 1);
		}
	}

	.buttonImage {
		margin: auto;
		width: 120upx;
		height: 120upx;

		>image {
			width: 120upx;
			height: 120upx;
		}
	}

	.titleButton {
		position: relative;
		margin: 47upx 0 0 0;
		display: inline-block;
		width: 50%;
	}

	.mainTitle {
		width: 750upx;
		height: 255upx;
		border-bottom: 1upx solid rgba(238, 238, 238, 1);
	}

	.shareBottom {
		font-size: 0;
	}

	.viewMain {
		width: 750upx;
		height: 344upx;
		padding-bottom: 140upx;
		background: rgba(255, 255, 255, 1);
		border-radius: 20upx 20upx 0upx 0upx;
	}

	.shareButton {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		background: rgba(0, 0, 0, 0);
	}

	.wxShareView {
		width: 100%;
		height: 100%;
	}

	.card-postImage-box {
		width: 700upx;
	}

	.card-postImage-box>image {
		width: 100%;
		height: 700upx;
		border-radius: 10upx;
	}

	.card-postImageClose {
		text-align: right;
		margin-bottom: 40upx;
		font-size: 48upx;
	}

	.saveCrad {
		width: 300upx;
		height: 80upx;
		line-height: 80upx;
		border-radius: 40upx;
		margin: 40upx auto 0 auto;
	}
</style>
