<template class="sign">
	<view class="container" style="margin-bottom: 0;" >
		<view class="top">
			<text class="iconfont icon-youjiantou zuojiantou" @click="goBack()"></text>
			<text>申请加盟</text>
		</view>
		<view class="page">
			<text class="num actived pass">1</text>
			<text class="line line_pass"></text>
			<text class="num actived pass">2</text>
			<text class="line line_pass"></text>
			<text class="num actived pass">3</text>
			<text class="line line_pass"></text>
			<text class="num actived pass">4</text>
			<text class="line line_pass"></text>
			<text class="num actived pass">5</text>
			<text class="line line_pass"></text>
			<text class="num actived pass">6</text>
	 		<text class="line"></text>
			<text class="num">7</text>
	<!--		<text class="line line_pass"></text>
			<text class="num actived">8</text> -->
		</view>
		<view class="title">
		    <view>
		      <text class="line"></text>电子签名<text style="font-size: 20rpx;font-weight: normal;">（请书写工整，字迹清晰）</text>
		    </view>
		    <text class="page_mark">6/7</text>
		</view>
		<!--这里必须用v-show否则打回重新签名时会获取不到dom元素-->
		<view class="signatureContent" v-show="!applyParam.personalSignOssPath">
			<!-- :style="{'height':'80vh'}" -->
			<e-signature   :showCanvas="showCanvas" ref="signatureComponent" @sendImage="getImage" ></e-signature>
			<view class="clearBox">
				<view class="imgBox" >
					<image src="../../static/clear.png" @click="clearImg" mode="widthFix"></image>
				</view>
			</view>
			
		</view>
		<image :src="applyParam.personalSignOssPath" mode="widthFix" v-if="applyParam.personalSignOssPath"></image>
		<!-- <view class="imgBox" style="margin-top: 20rpx;">
			<image src="../../static/clear.png" @click="clearImg" mode="widthFix"></image>
		</view> -->
		<view class="fixed" url="bank-card" @click="save()">
		   {{(this.applyParam.approvalStatus== 0 || this.applyParam.approvalStatus == 2)?'我自愿签订合伙人合同书':'下一步'}}
		</view>
	</view>
</template>

<script>
	import eSignature from '@/components/eSignature/eSignature.vue';
	import api from '../../api/api';
	import { nextTick } from "vue";
	export default {
	    data() {
	        return {
				//打开canvas绘制签名
				showCanvas: true,
				//是否展示操作菜单
				completionSignPath: '' ,//签名
				applyParam:{
					personalSignOssPath:'',
					approvalStatus:''

				},
				touchMoveHandler:null,
				isScrollLocked: false // 新增滚动锁定状态
	        }
	    },
		components:{eSignature},
		onLoad(options) {
			this.shareId = options.shareId
		},
		onShow() {
			if(uni.getStorageSync('applyId')){
				this.queryById(uni.getStorageSync('applyId'),null)
			}else if(this.shareId){
				this.queryById(this.shareId,null)
			}else{
				this.queryById(null,uni.getStorageSync('cffp_userId'))
			}
			// this.norebound()
			this.lockScroll()
		},
		beforeDestroy() {
			console.log('组件销毁');
		  this.releaseScroll(); // 确保组件销毁时释放
		},
		// 页面隐藏时立即解锁
		onHide() {
		  this.releaseScroll();
		},
		
		// 页面卸载时强制清理
		onUnload() {
			
		  this.releaseScroll();
		},
	    methods: {
			 // // 锁定滚动
			 //  lockScroll() {
			 //    // #ifdef H5
			 //    if (this.touchMoveHandler) return; // 避免重复绑定
			    
			 //    this.touchMoveHandler = (e) => {
			 //      e.preventDefault();
			 //    };
			    
			 //    document.body.addEventListener(
			 //      'touchmove', 
			 //      this.touchMoveHandler, 
			 //      { passive: false }
			 //    );
			 //    // #endif
			 //  },
			 // 锁定滚动 - 修改后的方法
			     lockScroll() {
			       if (this.isScrollLocked) return;
			       
			       // #ifdef H5
			       // 阻止触摸事件默认行为
			       this.touchMoveHandler = (e) => {
			         // 检查触摸事件是否发生在签名区域内
			         const signatureArea = document.querySelector('.signatureContent');
			         if (signatureArea && signatureArea.contains(e.target)) {
			           e.preventDefault();
			         }
			       };
			       
			       document.body.addEventListener('touchmove', this.touchMoveHandler, { passive: false });
			       // #endif
			       
			       // 在App端也需要禁用滚动
			       // #ifdef APP-PLUS
			       const pages = getCurrentPages();
			       const page = pages[pages.length - 1];
			       const webview = page.$getAppWebview();
			       webview.setStyle({
			         scrollIndicator: 'none',
			         scrollsToTop: false,
			         bounce: 'none'
			       });
			       // #endif
			       
			       this.isScrollLocked = true;
			     },
			  // // 释放滚动
			  //   releaseScroll() {
			  //     // #ifdef H5
			  //     if (this.touchMoveHandler) {
			  //       document.body.removeEventListener(
			  //         'touchmove', 
			  //         this.touchMoveHandler
			  //       );
			  //       this.touchMoveHandler = null;
			  //     }
			  //     // #endif
			  //   },
			  // 释放滚动 - 修改后的方法
			      releaseScroll() {
			        if (!this.isScrollLocked) return;
			        
			        // #ifdef H5
			        if (this.touchMoveHandler) {
			          document.body.removeEventListener('touchmove', this.touchMoveHandler);
			          this.touchMoveHandler = null;
			        }
			        // #endif
			        
			        // 在App端恢复滚动
			        // #ifdef APP-PLUS
			        const pages = getCurrentPages();
			        const page = pages[pages.length - 1];
			        const webview = page.$getAppWebview();
			        webview.setStyle({
			          scrollIndicator: 'auto',
			          scrollsToTop: true,
			          bounce: 'vertical'
			        });
			        // #endif
			        
			        this.isScrollLocked = false;
			      },
			goBack() {
				this.releaseScroll()
				uni.navigateBack({
					delta: 1  
				});
			},
			// 禁止微信浏览器回弹效果
			norebound(){
				// #ifdef H5
				// document.body.addEventListener("touchmove",function(e)
				//     e.preventDefault();
				// ,passive:false)
				document.body.addEventListener('touchmove', function(e) {
					e.preventDefault()
				}, { passive: false })
				// #endif
			},
			save(){
				if(this.applyParam.personalSignOssPath){
					this.saveApplyInfo();
				}else{
					this.$refs.signatureComponent.finish()
				}
				this.releaseScroll()
			},
			clearImg(){
				//0-未提交，1-待审核，2-审核未通过，3-审核通过
				if((this.applyParam.personalSignOssPath && this.applyParam.approvalStatus == 2) ||
				 (this.applyParam.personalSignOssPath && this.applyParam.approvalStatus == 0)
				 ){
					this.applyParam.personalSignOssPath = null;
				}else{
					this.$refs.signatureComponent.clear();
				}
			},
			queryById(id,userId){
				api.queryById({id:id,userId:userId}).then((res)=>{
					if(res['success']){
						this.applyParam = res['data']['data'];
					}
				})
			},
			getImage(e){
				api.saveDigitalSignatures({imgStr:e}).then((res)=>{
					if(res['success']){
						// this.applyParam.personalSignOssPath = e;
						this.applyParam.personalSignOssPath = res['data']['filePath'];
						this.saveApplyInfo();
					}
				})
			},
			saveApplyInfo(){
				if(this.applyParam.approvalStatus== 0 || this.applyParam.approvalStatus == 2){
					this.applyParam = {
						...this.applyParam,
						operatStep:99
					}
					api.saveApplyInfo(this.applyParam).then((res)=>{
						if(res['success']){
							// 发送广播
							uni.setStorageSync('Refresh_query')
							uni.$emit("ckqueryById", true);
							uni.navigateTo({
								url: `application-result?partnerLevel=${this.applyParam.partnerLevel}&areaName=${this.applyParam.areaName}&shareId=${this.shareId}`,
								success: res => {},
								fail: () => {},
								complete: () => {}
							});
						}else{
							uni.showToast({
								title: res['message'],
								duration: 2000,
								icon: 'none'
							})
							return;
						}
					})
				}else{
					uni.navigateTo({
						url: `application-result?partnerLevel=${this.applyParam.partnerLevel}&areaName=${this.applyParam.areaName}&approvalStatus=${this.applyParam.approvalStatus}`,
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				}
				
			}
	    }
	}
</script>

<style lang="scss" scoped>
	@import 'applyCommon.scss';
	.container{
		background-color: #fff;
		// 新增样式
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		overflow: hidden;
		-webkit-overflow-scrolling: touch;
	}
	.signatureContent{
		background: #fff;
		margin-top: 20rpx;
		height: auto;
		position: relative;
		// 新增样式
		touch-action: none; /* 禁用触摸操作 */
	}
	.signature_action{
	    display: flex;
	    justify-content: space-evenly;
	    margin-top: 20rpx;
	    uni-image{max-width: 120rpx;max-height: 120rpx;}
	}
	.clearBox{
		display: flex;
		align-items: center;
		justify-content: center;
		.imgBox{
			display: flex;
			align-items: center;
			width: 120rpx;
			height: 120rpx;
		}
	}
	
</style>