<template>
	<view>
		<view class="margin-top-sm list-box-shadow border-rad" style="width: 100% ;height: 650rpx;">
			<l-signature disableScroll backgroundColor="#fff" ref="signatureRef" :penColor="penColor" :penSize="penSize"
				:openSmooth="openSmooth"></l-signature>
		</view>
		<view v-if="signBtnType == 'pic' " class="flex justify-around list-box-shadow">
			<view class="flex align-center justify-center" style="border-radius: 80rpx;" @tap="onClick('undo')">
				<img :src="resetImg" style="width: 60rpx;height: 60rpx;" />
				<!-- <text class="font28" style="margin-left: 20rpx;">撤销</text> -->
			</view>
			<view class="flex align-center justify-center" style="border-radius: 80rpx;" @tap="onClick('clear')">
				<img :src="clearImg" style="width: 60rpx;height: 60rpx;" />
				<!-- <text class="font28" style="margin-left: 20rpx;">清空</text> -->
			</view>
			<view class="flex align-center justify-center" style="border-radius: 80rpx;" @tap="onClick('save')">
				<img :src="saveImg" style="width: 60rpx;height: 60rpx;" />
				<!-- <text class="font28" style="margin-left: 20rpx;">保存</text> -->
			</view>
			<!-- <button @click="onClick('openSmooth')">压感{{openSmooth?'开':'关'}}</button> -->
		</view>
		<!-- <view v-else class="flex justify-around list-box-shadow">
			
			<button @click="onClick('openSmooth')">压感{{openSmooth?'开':'关'}}</button>
		</view> -->
	</view>
</template>

<script>
	import {
		deepClone
	} from '../../common';
	export default {
		data() {
			return {
				clearImg: '../../static/img/signPannel/clear.png',
				resetImg: '../../static/img/signPannel/reset.png',
				saveImg: '../../static/img/signPannel/save.png',
				penColor: 'black',
				penSize: 5,
				url: '',
				openSmooth: true
			}
		},
		props: {
			signBtnType: {
				type: String,
				default: ''
			}
		},
		mounted() {

		},
		methods: {
			onClick(type) {
				if (type == 'openSmooth') {
					this.openSmooth = !this.openSmooth
					return
				}
				if (type == 'save') {
					this.$refs.signatureRef.canvasToTempFilePath({
						success: (res) => {
							// 是否为空画板 无签名
							if (res.isEmpty) {
								uni.showToast({
									title: '无签名内容，请签名',
									icon: 'none'
								});
							} else {
								// 生成图片的临时路径
								// app | H5 | 微信小程序 生成的是base64
								this.url = res.tempFilePath;
								this.$emit('recall', this.url);
							}
						}
					})
					return
				}
				if (this.$refs.signatureRef) {
					this.$refs.signatureRef[type]()
				}
			},
		}
	}
</script>

<style lang="less" scoped>
	.uni-searchbar {
		width: 100%;
		padding: 0rpx 0rpx 20rpx 0rpx !important;

	}

	.rotate-right {
		transform: rotate(-90deg);
	}

	.clearImg {
		height: 70rpx;
		width: 70rpx;
		flex-shrink: 0;
	}

	/deep/.uni-drawer--right {
		/* #ifdef H5 */
		padding-top: 45px;
		/* #endif */
		/* #ifdef APP-PLUS */
		padding-top: 90px;
		/* #endif */
		box-sizing: border-box;
	}

	.radio-wrap {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		box-sizing: border-box;
		padding: 0 20rpx;

		.radio-cover {
			width: 100%;
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;
			padding-bottom: 20rpx;
			border-bottom: 1rpx solid #DDDDDD;

			&:last-child {
				border-bottom: 0px;
			}

			uni-radio {
				margin-right: 10rpx;
			}
		}
	}
</style>
