<template>
	<view class="page">
		<view class="page-info">
			<view class="banner">
				<view class="title">{{tableData.schemeTitle}}</view>
				<view class="banner-info-top">
					<view>{{tableData.createDate}}</view>
					<!-- <view><u-icon name="eye"></u-icon>{{tableData.viewsNumber}}人</view> -->
				</view>
				<view class="banner-info-item">
					<!-- <image :src="tableData.coverImage" style="width: 100%; height: 100vw; border-radius: 10rpx; margin-top: 30rpx;"></image> -->
					<u-image width="100%" :src="imgurl+tableData.coverImage" border-radius="10" mode="widthFix"
						style="margin-top:8px;margin-right:8px;"></u-image>
				</view>
				<view class="">
					<view class="title">宣传内容</view>
					<rich-text v-if="tableData.promotionContent" :nodes="tableData.promotionContent"></rich-text>
				</view>
			</view>

		</view>
		<view class="page-footer" v-if="tableData.state=='5'">
			<view class="footer-service">
				<view class="fenxiang" @click="shareMsg">
					<u-icon name="zhuanfa" size="30"></u-icon>
					<text style="margin-left: 10px;">分享</text>
				</view>
			</view>
		</view>
		 <!-- 分享背景遮罩层 -->
		    <view
		      v-if="showShareModal"
		      class="share-mask"
		      @click="closeShareModal"w

		  <!-- 分享拉起框 -->
		    <view v-if="showShareModal"  class="share-modal"
      :class="{ 'share-modal-animate': showShareModal }">
		      <view class="share-option" @click="generatePoster">生成海报</view>
		      <!-- <view class="share-option" @click="wechatShare">微信分享</view> -->
			  <button class="share-option" open-type="share">分享微信</button>
		      <view class="share-option" @click="closeShareModal">取消</view>
		    </view>
		
		    <!-- 海报遮罩层 -->
		    <view v-if="showPosterMask" class="poster-mask">
		      <view class="poster-container">
				    <view style="text-align: center;font-weight: bold;">宣传海报</view>
		        <image v-if="posterUrl" :src="posterUrl" mode="aspectFit" style="height: 350px;"  @click="savePoster" ></image>
		        <view class="close-btn" @click="closePosterMask">×</view>
				  <!-- 新增的保存按钮 -->
				      <!-- <button class="save-btn" style="padding: 8px 0;border-radius: 15px;background-color: #3f9b6a;color: #fff;" @click="savePoster">保存到本地</button> -->
		      </view>
		    </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tableData: {},
				joinShow: false,
				form: {
					name: '',
					pahone: '',
				},
				pagesize: {
					id: '',
					pageNumber: 0,
					pageSize: 10,
				},
				imgurl: '',
				showShareModal: false, // 分享拉起框是否显示
				showPosterMask: false, // 海报遮罩层是否显示
				posterUrl: '' // 海报图片地址
			};
		},
		onLoad(option) {
			this.imgurl = this.$img
			if (option.id) {
				this.pagesize.id = option.id
			}

			this.$http.sendRequest('/cerePromotion/queryByPage', 'POST', this.pagesize, 1).then(res => {
				this.tableData = res.data.data.content[0]
			})
		},
		mounted() {

		},
		methods: {
			// 点击分享按钮
			    shareMsg() {
			      this.showShareModal = true;
			    },
			    // 关闭分享拉起框
			    closeShareModal() {
			      this.showShareModal = false;
			    },
			    // 生成海报
			    generatePoster() {
			      this.closeShareModal()
				  this.$http.sendRequest(`/cerePromotion/getSharePic/${this.tableData.id}`, 'GET','', 1).then(res => {
					 this.posterUrl = this.imgurl+res.data.data
					 this.showPosterMask = true;
				  })
				  
			      // setTimeout(() => {
			      //   this.posterUrl = 'https://dummyimage.com/800x600/ff0000/ffffff'; // 替换为真实的海报图片地址
			      //   this.showPosterMask = true;
			      // }, 1000);
			    },
			    // 关闭海报遮罩层
			    closePosterMask() {
			      this.showPosterMask = false;
			      this.posterUrl = '';
			    },
			    // 微信分享
			    wechatShare() {
			      // this.closeShareModal();
			      // uni.share({
			      //   provider: 'weixin',
			      //   scene: 'WXSceneSession',
			      //   type: 0,
			      //   title: this.tableData.schemeTitle,
			      //   summary: '分享描述',
			      //   href: `https://zhgw-uat.028wlkj.com/cdwlMall/merchant-h5/#/pagesA/projectManagement/projectDetails?id=${this.tableData.id}`, // 分享链接
			      //   success: function(res) {
			      //     console.log('分享成功', res);
			      //   },
			      //   fail: function(err) {
			      //     console.log('分享失败', err);
			      //   }
			      // });
			    },
				 onShareAppMessage() {
				    return {
				      title: this.tableData.schemeTitle,
					   imageUrl: this.imgurl+this.tableData.coverImage,
				      path: `/pagesA/projectManagement/projectDetails?id=${this.tableData.id}`,
				      success(res) {
				        uni.showToast({
				        	icon: 'none',
				        	title: '分享成功'
				        })
				      },
				      fail(err) {
				        console.log('分享失败', err);
				      }
				    };
				  },
				  // 保存图片到本地
				  savePoster() {
					  uni.previewImage({
					  			urls:[this.posterUrl],
					  			longPressActions: {
					  				itemList: ['保存图片'],
					  				success: function(data) {
					  					console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
					  				},
					  				fail: function(err) {
					  					console.log(err.errMsg);
					  				}
					  			}
					  		});
				  },
		}
	};
</script>

<style scoped lang="scss">
	.page {
		position: relative;
		width: 100%;
		min-height: 94vh;
		overflow-x: hidden;
		// overflow-y: auto;
	}

	.page-info {
		width: 100%;
		padding: 24rpx;
	}

	// 活动详情
	.banner {
		width: 100%;
		margin-top: 10rpx;
		border-radius: 30rpx;
		background-color: #fff;
		padding: 24rpx 30rpx;
		color: #888D9C;

		.title {
			font-weight: 700;
			color: #3D3D3D;
			font-size: 30rpx;
			margin-bottom: 30rpx;
		}

		.banner-info-top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 30rpx;
		}
	}

	// 活动信息
	.info-box {
		margin-top: 30rpx;

		.title {
			font-weight: 700;
			color: #3D3D3D;
			font-size: 28rpx;
			margin-bottom: 10rpx;
		}

		.info-item {
			font-size: 26rpx;
			line-height: 50rpx;
		}
	}

	/* 底部 */
	.page-footer {
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		justify-content: space-evenly;
		// align-items: center;
		// justify-content: center;
		width: 100%;
		height: 120rpx;
		background-color: #FFFFFF;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);

		.footer-btn {
			padding: 0 20px;
			margin-top: 20rpx;
		}

		.footer-service {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 90%;
			height: 100%;

			text {
				margin-top: 6rpx;
				line-height: 42rpx;
			}

			.fenxiang {
				text-align: center;
				background-color: #3f9b6a;
				width: 100%;
				padding: 7px 0;
				border-radius: 10px;
				color: #fff;
				// display: flex;
				font-size: 16px;
				align-items: center;
			}
		}
	}
.share-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 99;
}

.share-modal {
  position: fixed;
  bottom: -200px; /* 初始位置在屏幕外 */
  left: 0;
  right: 0;
  background-color: #fff;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  // padding: 10px;
  z-index: 100;
  transition: bottom 0.3s ease; /* 添加过渡效果 */
}

.share-modal-animate {
  bottom: 0; /* 动画结束位置 */
}

.share-option {
  padding: 15px;
  text-align: center;
  border-bottom: 1px solid #eee;
  background-color: #fff;

}

.poster-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 101;
}

.poster-container {
  position: relative;
  background-color: #fff;
  padding: 10px;
  border-radius: 10px;
  // height: 400px;
}

.close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 20px;
  cursor: pointer;
}
button{padding: 0;margin: 0; border: 1px solid transparent;line-height: 1;font-size: 14px;}
button::after{ border: none; }
</style>