<template class="sign">
	<view class="container" style="margin-bottom: 0;">
		<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 line_pass"></text>
			<text class="num actived pass">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">8/8</text>
		</view>
		<view class="signatureContent" v-if="!applyParam.personalSignOssPath">
			<e-signature  :style="{'width':'100vw','height':'80vh'}" :showCanvas="showCanvas" ref="signatureComponent" @sendImage="getImage"></e-signature>
		</view>
		<image :src="applyParam.personalSignOssPath" mode="widthFix" v-if="applyParam.personalSignOssPath"></image>
		<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:''
				}
	        }
	    },
		components:{eSignature},
		onLoad(options) {
			if(uni.getStorageSync('applyId')){
				this.queryById(uni.getStorageSync('applyId'),null)
			}else if(options.shareId){
				this.queryById(options.shareId,null)
			}else{
				this.queryById(null,uni.getStorageSync('cffp_userId'))
			}
		},
	    methods: {
			save(){
				if(this.applyParam.personalSignOssPath){
					this.saveApplyInfo();
				}else{
					this.$refs.signatureComponent.finish()
				}
				
			},
			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)=>{
					console.log(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.navigateTo({
								url: `application-result?partnerLevel=${this.applyParam.partnerLevel}&areaName=${this.applyParam.areaName}`,
								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">
	@import 'applyCommon.scss';
	// uni-page-wrapper{
	// 	overflow: hidden!important;
	// }
	.signatureContent{
	    // padding: 0 36rpx 20rpx 26rpx;
		background: #fff;
		margin-top: 20rpx;
		height: 100%;
	}
	.signature_action{
	    display: flex;
	    justify-content: space-evenly;
	    margin-top: 20rpx;
	    uni-image{max-width: 120rpx;max-height: 120rpx;}
	}
</style>