<template>
  <view class="multi-select-dropdown">
	  <!-- 直接调用toggleDropdown -->
   
    <!-- 遮罩层 -->
    <view class="dropdown-mask" v-show="isOpen" @click.stop="closeDropdown"></view>
    
    <!-- 下拉内容 - 修改为底部弹出 -->
    <view class="dropdown-content bottom-popup" v-show="isOpen">
     <view class="boxImg">
		 <view class="preview-image">
		 	<image  
				v-if="imgType == 'orderPoster'"
				:src="localImage" 
				mode="widthFix" 
				
			></image>
			<image
				:src="localImage" 
				mode="widthFix"
				 v-if="imgType == 'sharePoster'"
			></image>
			<view class="btnBottom" :style="{bottom:btnBottom}">
					 <view class="desTxt">
					 	{{shareTxt}}
					 </view>
					 <view class="closeBtn" @click.stop="closeDropdown">
						 <view class="closeBox">
						 	<view class="iconfont icon-guanbi" ></view>
						 </view>
					 </view>
			</view>
		 </view>
     	
		
     </view>
	
    </view>
  </view>
</template>

<script>
	import {setWechatShare,initJssdkShare,setWechatShareDirectly} from '@/util/fiveshare';
	import dataHandling from "@/util/dataHandling";
	import api from "@/api/api";
export default {
  name: 'sharePosterPop',
  props: {
    // 分享的海报
    generatedImage: {
      type: String,
      default: ''
    },
	// 分享的海报链接
	sharePosterUrl: {
	  type: String,
	  default: ''
	},
	// 分享的海报数据
	sharePosterObj: {
	  type: Object,
	},
	btnBottom:{
		type: String,
		default: ''
	},
	shareTxt:{
		type: String,
		default: '长按图片分享给朋友'
	},
	imgType:{
		type:String,
		default:'sharePoster'
	}
  },
  data() {
    return {
      isOpen: false,
	  localImage: '' // 内部存储图片
    }
  },
  computed: {
   
  },
  watch: {
      // 监听父组件传递的图片变化
      generatedImage(newVal) {
        if (newVal) {
          this.localImage = newVal
        }
      }
    },
  mounted() {
  	
  },
  beforeDestroy() {
  	console.log('销毁了');
  },
  methods: {
    toggleDropdown() {
      if (this.isOpen) {
        this.closeDropdown()
      } else {
        this.openDropdown()
      }
    },
    openDropdown() {
      this.isOpen = true
      // 禁止页面滚动
      document.body.style.overflow = 'hidden'
    },
    closeDropdown() {
      this.isOpen = false
	  this.$emit('closePoster')
      // 恢复页面滚动
      document.body.style.overflow = ''
    },
	// 触摸开始
	    handleTouchStart() {
			// 显示识别选项
			this.showActionSheet();
	      // this.pressTimer = setTimeout(() => {
	      //   this.showScanHint = true;
	        
	      // }, this.longPressDuration);
	    },
		 // 显示操作菜单
		    showActionSheet() {
		      if (typeof wx !== 'undefined') {
		        uni.showActionSheet({
		          itemList: ['识别二维码'],
		          success: (res) => {
		            switch (res.tapIndex) {
		              case 0:
		                this.scanQRCode();
		                break;
		            }
		          }
		        });
		      }
		    },
		    
		    // 识别二维码
		    scanQRCode() {
		      if (typeof wx !== 'undefined') {
		        wx.scanQRCode({
		          needResult: 1,
		          scanType: ["qrCode"],
		          success: (res) => {
		            const result = res.resultStr;
					console.log('扫描结果',result);
		            // this.$emit('qrScanned', result);
		          }
		        });
		      }
		    },
  }
}
</script>

<style lang="scss" scoped>
.multi-select-dropdown {
  position: relative;
  display: inline-block;
  .dropdown-content {
    position: fixed;
    left: 50%;
    top: 0%;
	transform: translateX(-50%);
	color: #fff;
	padding: 50rpx;
	box-sizing: border-box;
    z-index: 1100;
    transition: transform 0.3s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
    
    &.bottom-popup {
      // transform: translateY(0);
    }
	.boxImg{
		
		width: 550rpx;
		height:550rpx;
		.preview-image{
			display: block;
			position: relative;
			width: 100%;
			.btnBottom{
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				box-sizing: border-box;
				margin-top: 20rpx;
				position: absolute;
				bottom: -16%;
				.desTxt{
					font-size: 32rpx;
					font-weight: 500;
				}
				.btnBox{
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					.itemBtn{
						.top{
							display: flex;
							align-items: center;
							justify-content: center;
							flex-direction: column;
							.commonIcon{
								font-size: 30rpx;
								color: #fff;
								width: 80rpx;
								height: 80rpx;
								background-color: #2d2b2c;
								border-radius: 10rpx;
								display: flex;
								align-items: center;
								justify-content: center;
							}
							.bottom{
								color: #fff;
								font-size: 24rpx;
							}
						}
					}
				}
				
				.closeBtn{
					margin-top: 20rpx;
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					.closeBox{
						width: 60rpx;
						height: 60rpx;
						background-color: #2d2b2c;
						border-radius: 50%;
						display: flex;
						align-items: center;
						justify-content: center;
						.icon-guanbi{
							font-size: 26rpx;
							color: #fff;
						}
					}
				}
			}
		}
		
	}
	
  }
  
  .dropdown-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
  }
	/* 所有iPad竖屏 */
	@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
	  /* 竖屏样式 */
	  .boxImg {
	        width: 350rpx !important;
	        height: 350rpx !important;
	      }
	      .btnBottom {
	        bottom: -21% !important;
			.desTxt{
				font-size: 26rpx !important;
			}
	      }
	}
	
	/* 所有iPad横屏 */
	@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
	  /* 横屏样式 */
	  .boxImg {
	        width:650rpx !important;
	        height:650rpx !important;
	      }
	      
	      .btnBottom {
	        bottom: -15% !important;
	      }
	}
}
</style>