<template>
	<view>
		<view style="width: 750rpx; height: 950rpx;">
			<l-signature disableScroll ref="signatureRef" :penColor="penColor" :penSize="penSize"
				:minLineWidth="2" :openSmooth="openSmooth" :bounding-box="bBox"></l-signature>
		</view>
		<!-- <uni-popup ref="popup" type="bottom">
			<l-signature v-if="show" beforeDelay="1000" disableScroll backgroundColor="#000" ref="signatureRef2" :penColor="penColor"
				:penSize="penSize" :minLineWidth="2" :openSmooth="openSmooth"></l-signature>
		</uni-popup> -->
		<view>
			<!-- <button @click="open">弹出</button> -->
			<button @click="onClick('clear')">清空</button>
			<button @click="onClick('undo')">撤销</button>
			<button @click="onClick('save')">保存</button>
			<button @click="bBox = !bBox">bBox{{bBox?'开':'关'}}</button>
			<button @click="onClick('openSmooth')">压感{{openSmooth?'开':'关'}}</button>
		</view>
		<view style="background-color: #2196f3; text-align: center;">
			<view style="border: 2px dashed #fff; display: inline-block;">
				<image :src="url" v-if="url" style="width: 370rpx;"  mode="widthFix"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				penColor: 'red',
				penSize: 16,
				url: '',
				show: false,
				openSmooth: true,
				bottomHeight: 0,
				bBox: false,
				customBar: this.CustomBar || 0,
			}
		},
		methods: {
			open() {
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup.open()
				this.show = true
			},
			onClick(type) {
				if (type == 'openSmooth') {
					this.openSmooth = !this.openSmooth
					return
				}
				if (type == 'save') {
					this.$refs.signatureRef.canvasToTempFilePath({
						quality: 0.8,
						success: (res) => {
							this.url = res.tempFilePath
						}
					})
					return
				}
				if (this.$refs.signatureRef)
					this.$refs.signatureRef[type]()
			}
		}
	}
</script>

<style>
</style>