<template>
	<view class="container">
		<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">
		    <!-- <signature-pad *ngIf="!isSignatureShow" #signaturePad [options]="signaturePadOptions" (onBeginEvent)="drawStart()" (onEndEvent)="drawComplete()">
		    </signature-pad> -->
		    <!-- <img [src]="imgStr" alt="签名" *ngIf="isSignatureShow"> -->
			<view style="width: 750rpx ;height: 750rpx;">
			    <l-signature disableScroll backgroundColor="#ddd" ref="signatureRef" :penColor="penColor" :penSize="penSize" :openSmooth="openSmooth" ></l-signature>
			</view>
			<!-- <view>
			    <button @click="onClick('clear')">清空</button>
			    <button @click="onClick('undo')">撤消</button>
			    <button @click="onClick('save')">保存</button>
			    <button @click="onClick('openSmooth')">压感{{openSmooth?'开':'关'}}</button>
			</view> -->
		</view>
		<div class="signature_action">
		    <image src="../../static/clear.png" alt="清除" @click="onClick('clear')"></image>
		    <image src="../../static/revoke.png" alt="上一步" @click="onClick('undo')"></image>
		</div>
		<view class="fixed" url="bank-card">
		   保存并下一步
		</view>
	</view>
</template>

<script>
	export default {
	    data() {
	        return {
	            title: 'Hello',
	            penColor: 'red',
	            penSize: 5,
	            url: '',
	            openSmooth: true
	        }
	    },
	    methods: {
	        onClick(type) {
	             if(type == 'openSmooth') {
	                 this.openSmooth = !this.openSmooth
	                 return
	             }
	            if (type == 'save') {
	                this.$refs.signatureRef.canvasToTempFilePath({
	                    success: (res) => {
	                        // 是否为空画板 无签名
	                        console.log(res.isEmpty)
	                        // 生成图片的临时路径
	                        // app | H5 | 微信小程序 生成的是base64
	                        this.url = res.tempFilePath
	                    }
	                })
	                return
	            }
	            if (this.$refs.signatureRef)
	                this.$refs.signatureRef[type]()
	        }
	    }
	}
</script>

<style lang="scss">
	@import 'applyCommon.scss';
	.signatureContent{
	    margin: 0 13px 20px 13px;
	    background: #f8f8f8;
	}
	.signature_action{
	    display: flex;
	    justify-content: space-evenly;
	    margin-top: 20px;
	    uni-image{max-width: 60px;max-height: 60px;}
	}
</style>