<template>
	<view>
		<view style="position: absolute;">
			<view style="width: 750rpx ;height:100vh;background-color: #FFFFFF;">
				<l-signature landscape disableScroll ref="signatureRef" :penColor="penColor" :penSize="penSize" :openSmooth="openSmooth"></l-signature>
			</view>
			<view class="btn">
				<u-button size="small" style="margin-right: 30rpx;" @click="onClick('clear')" type="success" text="清空"></u-button>
				<u-button size="small" style="margin-right: 120rpx;" @click="onClick('undo')" type="success" text="上一步"></u-button>
				<u-button size="small" @click="onClick('save')" type="primary" text="确认保存"></u-button>
				<!-- uvue 不支持 openSmooth -->
				<!-- <button @click="onClick('openSmooth')">{{ openSmooth ? '笔画加粗' : '笔画变细' }}</button> -->
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			penColor: 'black',
			penSize: 10,
			// 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);
						// 生成图片的临时路径
						// H5 生成的是base64
						// this.url = res.tempFilePath;
						uni.$emit('updateData', res.tempFilePath);
						uni.navigateBack({
							delta: 1
						});
					}
				});
				return;
			}
			if (this.$refs.signatureRef) this.$refs.signatureRef[type]();
		}
	}
};
</script>
<style scoped>
.btn {
	width: 600rpx;
	height: 120rpx;
	display: flex;
	position: relative;
	top: -560rpx;
	left: -280rpx;
	z-index: 11;
	transform: rotateZ(90deg);
}
</style>
