<template>
	<view class="popup" catchtouchmove="true" :class="getValue() && complete ? 'show' : 'none'"
    @touchmove.stop.prevent="moveHandle" @click.stop="stop">
		<!-- 背景底色 -->
		<view class="mask" @click="close('mask')"></view>
		<view class="layer attr-content">
			<view class="specification-wrapper">
				<scroll-view class="specification-wrapper-content" scroll-y="true">
					<view>{{popurl}}隆福大厦哦哦浪费到到啦f佛发大水了佛</view>
					
					<web-view src="http://localhost:8080/#/pages/help/private"></web-view>
				</scroll-view>
			</view>
		
		
		</view>
		<!-- 关闭按钮 -->
		<view class="close" @click="close('close')" v-if="showClose != false">
		  <image class="close-item" :src="closeImage"></image>
		</view>
	</view>
</template>

<script>
	export default {
		name:"popup",
		// data(){
		// 	return{
		// 		popurl:''
		// 	}
		// },
		emits: ["input",  "open", "close"],
		props:{
			// true 组件显示 false 组件隐藏
			value: {
			  Type: Boolean,
			  default: false
			},
			modelValue: {
			  Type: Boolean,
			  default: false
			},
			// 需要打开的地址
			popurl:{
				Type:String,
				default:"",
			},
			isshow:{
				Type:Boolean,
				defult:false
			},
			// 是否显示右上角关闭按钮
			showClose: {
			  Type: Boolean,
			  default: true
			},
			// 关闭的x 图像
			closeImage: {
			  Type: String,
			  default: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAAEyUlEQVR42sSZeWwNURTGp4OqtBo7sSXELragdkpQsRRJ1Zr4hyJiJ9YgxNIg1qANiT+E1i5IY0kVVWtQEbuEKLFGUSH27/ANN5PXmTvzupzkl/tm8t6b7517lnvvC0lKSjJ8WmnQAUSDFqABqALKgl8gD7wE90E2SAeXwFf1SxISErQeVtKHwCgwFsSDSIf3hYFKoCkYDBaDdyAViHdueHmoF6FtwDLQ23b/E7gM7oIcejIERIDaoBFoC8qA8mA8SQNz6W1XC9GY+nCQCCYAk/c+gF0gBZwH312+IxR0BCPBUIaH2A+wHsxHCHxx+gLT5QGN6a2JfG8uvVCDws9oiDQYlxkMGfHyQvARlADTwcXk5OT6foV2kS8ATXidymlcyen1a/Jjl9IJh3hPkjELYqO8Cu0KjjNZvtETw5jFBWXPmGSTGQKSeOn5iQ0kVLL0CINfPNcPbDMKyRCbGzEMBJ+ZD8cChYFdqGTqfsWT8otPGoVsEHsMwxDFs3shNsxJ6BrQ0Po8OGUUkVHsNCVml+cntB1jUWwn2GEUsTEMrASbDK+2CCQ0kYX6nfLLisMmKqUr0S60M+jG10vAm+JSCa8+x7CKlzHwaktV6DiObzUzPJIxFO1BQ12wGtTReO9GetVgY/kjNJzZbcWmTjHfxw51AsRqvL8eOAtmsJuFu3g1l+1ZLB5eDTVZ3K0P7tL0TkWOpSg61kVkBtuuNRthGs+wtJST5aQI7cEbkkRXNYVKgX6kIdYuUhYzMQwxN8tiExCLFqHNeSF9/aem0BzGp5PYQCJ7c/Gsk1RfuSD6U1dNpcDf9ZigTmKbMRZ9iVTsHscGJluW2FMf1SSQWGnBmaB6kCJVTVVNJZE++Cx9drEllS1KMCINpURFmEbBWA63Fz9s95cGIdJgp/zXmT4pZcOvSUzuZttTbblmnc3PIjjmidDXvKgdhMh0JdbzuCjWrbNOVovjS5P7bkPJ/mBESkz2BO0166ybNeJ431S2q+01NntuIq3E0amzjiZtk9tssWyTDzO4525bACK9NAUn68TtkNhpEXpOSagRml+S6iLSSeweHv242Qhl13rRyvoDvDlKyTQny/ZQJ+1iH7vVbEx7OR5UiKVIO7VicgvHCtwrudloMIV7/0uadVYW57O4Wvvi8v4pymlKkrpwvsDeLLZAY2pkwbAB3PSQfC+4cH7l4k1ZH8zkZRq8ecO+Z5rN40JJqnXFuGfaxPCTLjcn0OZOpnArXw8HY4paIbw5CcMgXq6HN2/mt6+XGLrN15tBryIUGavMpCTrfKcDCKkAceA9S8nhAOehhSUyhXpkBxxnP4YM1InugP7cBkjBPcqVUWFYCEROxXiQz5JlXV+IfKh7mpfJac+lZ6V87QXVClBkTc7YWsWTPSDyitfzUTlJlj8TbvE6jluDOdwZ+jX57GLO3ADeuyZrDYi86vV81FD2UVGsmT+5Zl0BnkhoseOEaogL46pqO4v/IqUEyalIR4h85BgjHv6+aUWRMbb7EstX6O0cpT1Gco0ry8fWygLDMjmDnQeBt3Qe7uVfkeugDwVLcsVzGsuwLXbV+I63XNAkG5r/hvgRqgqWs6pJPKrsbvz/Q6yyun0w/h6lP+BnzrCpfPMT2L8FGAA7k1GZ/vnaqAAAAABJRU5ErkJggg=="
			},
		},
		created() {
		  let that = this;
		  if (that.getValue()) {
		    that.open();
		  }
		},
		watch:{
		  popurl(){
			  
			  let that = this
			  return that.popurl
		  }
		},
		mounted() {},
		methods: {
			open(e) {
				console.log("zujian popup open",e)
			},
			getValue() {
			  // #ifndef VUE3
			  return this.value;
			  // #endif
			
			  // #ifdef VUE3
			  return this.modelValue;
			  // #endif
			},
			
			// 监听 - 弹出层收起
			close(s) {
			  let that = this;
			  if (new Date().getTime() - that.openTime < 400) {
			    return false;
			  }
			  if (s == "mask") {
			    if (that.maskCloseAble !== false) {
			      that.$emit("input", false);
			      that.$emit("close", "mask");
			      that.$emit("update:modelValue", false);
			    }
			  } else {
			    that.$emit("input", false);
			    that.$emit("close", "close");
			    that.$emit("update:modelValue", false);
			  }
			},
		},
	}
</script>

<style lang="scss" scoped>
/*  弹出层 */
.popup {
	position: fixed;
	left: var(--window-left);
	right: var(--window-right);
	bottom: var(--window-bottom);
	top: var(--window-top);
	// height: 60%;
	z-index: 21;
	overflow: hidden;
	
	&.show {
	  display: block;
	
	  .mask {
	    animation: showPopup 0.2s linear both;
	  }
	
	  .layer {
	    animation: showLayer 0.2s linear both;
	    bottom: var(--window-bottom);
	  }
	}
	
	&.hide {
	  .mask {
	    animation: hidePopup 0.2s linear both;
	  }
	
	  .layer {
	    animation: hideLayer 0.2s linear both;
	  }
	}
	
	&.none {
	  display: none;
	}
	
	.mask {
	  position: fixed;
	  left: var(--window-left);
	  right: var(--window-right);
	  top: 0;
	  height: 100%;
	  z-index: 1;
	  background-color: rgba(0, 0, 0, 0.65);
	}
	
	.layer {
	  display: flex;
	  flex-direction: column;
	  position: fixed;
	  left: var(--window-left);
	  right: var(--window-right);
	  bottom: var(--window-bottom);
	  z-index: 99;
	  border-radius: 10rpx 10rpx 0 0;
	  background-color: #fff;
	  // 设置ios刘海屏底部横线安全区域
	  padding-bottom: constant(safe-area-inset-bottom);
	  padding-bottom: env(safe-area-inset-bottom);
	  
	  .specification-wrapper {
	    width: 100%;
	    padding: 30rpx 25rpx;
	    box-sizing: border-box;
	  
	    .specification-wrapper-content {
	      width: 100%;
	      max-height: 900rpx;
	      min-height: 300rpx;
	  
	      &::-webkit-scrollbar {
	        /*隐藏滚轮*/
	        display: none;
	      }
	  
	      .specification-header {
	        width: 100%;
	        display: flex;
	        flex-direction: row;
	        position: relative;
	        margin-bottom: 40rpx;

	      }
	  
	      .specification-content {
	        font-weight: 500;
	  
	        .specification-item {
	          margin-bottom: 40rpx;
	  
	          &:last-child {
	            margin-bottom: 0;
	          }
	        }
	      }
	    }
	  
	    .close {
	      position: absolute;
	      top: 30rpx;
	      right: 25rpx;
	      width: 50rpx;
	      height: 50rpx;
	      text-align: center;
	      line-height: 50rpx;
	  
	      .close-item {
	        width: 40rpx;
	        height: 40rpx;
	      }
	    }
	  }
	  

	}
	
	@keyframes showPopup {
	  0% {
	    opacity: 0;
	  }
	
	  100% {
	    opacity: 1;
	  }
	}
	
	@keyframes hidePopup {
	  0% {
	    opacity: 1;
	  }
	
	  100% {
	    opacity: 0;
	  }
	}
	
	@keyframes showLayer {
	  0% {
	    transform: translateY(120%);
	  }
	
	  100% {
	    transform: translateY(0%);
	  }
	}
	
	@keyframes hideLayer {
	  0% {
	    transform: translateY(0);
	  }
	
	  100% {
	    transform: translateY(120%);
	  }
	}
	
}
</style>