<template>
	<view>
		<view class="wrapper">
			<u-navbar title="签名" placeholder safeAreaInsetTop autoBack> </u-navbar>
			<view class="handBtn">
				<button @click="clear" class="wriBtn">重写</button>
				<button @click="subCanvas" class="subBtn">确定</button>
			</view>
			<view class="handCenter">
				<view class="handWriting">
					<l-signature ref="signatureRef" disableScroll openSmooth :penSize="8" landscape backgroundColor="#fff" ></l-signature>
				</view>
			</view>
			<view class="handRight">
				<view class="handTitle">请签名</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {

			};
		},
		onLoad(data) {
			if (data.type) {
				this.type = parseInt(data.type);
			}
		},
		methods: {
			/**
			 * 清空
			 */
			clear() {
				this.$refs.signatureRef.clear();
			},
			base64ToBlob(base64Data, contentType) {
				contentType = contentType || '';
				var byteCharacters = atob(base64Data);
				var byteNumbers = new Array(byteCharacters.length);
				for (var i = 0; i < byteCharacters.length; i++) {
					byteNumbers[i] = byteCharacters.charCodeAt(i);
				}
				var byteArray = new Uint8Array(byteNumbers);
				return new Blob([byteArray], {
					type: contentType
				});
			},
			base64ToBlobUrl(base64String, contentType) {
				var blob = this.base64ToBlob(base64String, contentType);
				var blobUrl = URL.createObjectURL(blob);
				return blobUrl;
			},
			//完成
			async subCanvas() {
				let that = this;
				let url, realUrl;
				this.$refs.signatureRef.canvasToTempFilePath({
					success: (res) => {
						console.log("签字", res);
						// 是否为空画板 无签名
						if (res.isEmpty) {
							uni.showToast({
								title: '还未书写签名',
								icon: 'none',
							});
							return
						}
						// 生成图片的临时路径

						// H5 生成的是base64
						url = res.tempFilePath;
						// #ifdef H5
						var base64String = url;
						var base64 = base64String.substring(base64String.indexOf(',') + 1)
						var contentType = 'image/jpeg'; // 设置正确的 MIME 类型
						realUrl = that.base64ToBlobUrl(base64, contentType);
						// #endif

						// #ifndef H5
						url = url;
						// #endif

						that.$api.fileApi.uploadFile(url).then(res => {
							uni.$u.toast('上传成功');
							console.log("上传成功",res);
							console.log("签名类型", that.type);
							let fileResult = JSON.stringify([res]);
							if (that.type === 0) {
								uni.$emit('czgqm', fileResult);
							}
							if (that.type === 1) {
								uni.$emit('yhqm', fileResult);
							}
							that.$goBack()
						})
					}
				})
			},
		}
	};
</script>

<style>
	page {
		background: #fbfbfb;
		height: auto;
		overflow: hidden;
	}

	.wrapper {
		width: 100%;
		height: 95vh;
		margin: 40rpx 0;
		overflow: hidden;
		display: flex;
		align-content: center;
		flex-direction: row;
		justify-content: center;
		font-size: 28rpx;
	}

	.handWriting {
		background: #fff;
		width: 100%;
		height: 95vh;
	}

	.handRight {
		display: inline-flex;
		align-items: center;
	}

	.handCenter {
		border: 4rpx dashed #e9e9e9;
		flex: 5;
		overflow: hidden;
		box-sizing: border-box;
	}

	.handTitle {
		transform: rotate(90deg);
		flex: 1;
		color: #666;
	}

	.handBtn button {
		font-size: 28rpx;
	}

	.handBtn {
		height: 95vh;
		display: inline-flex;
		flex-direction: column;
		justify-content: space-between;
		align-content: space-between;
		flex: 1;
	}

	.delBtn {
		position: absolute;
		top: 250rpx;
		left: 0rpx;
		transform: rotate(90deg);
		color: #666;
	}

	.delBtn image {
		position: absolute;
		top: 13rpx;
		left: 25rpx;
	}

	.subBtn {
		position: absolute;
		bottom: 52rpx;
		left: -3rpx;
		display: inline-flex;
		transform: rotate(90deg);
		background: #EA5504;
		color: #fff;
		margin-bottom: 30rpx;
		text-align: center;
		justify-content: center;
	}

	.wriBtn {
		position: absolute;
		bottom: 15%;
		left: -3rpx;
		display: inline-flex;
		transform: rotate(90deg);
		background: #fff;
		color: #000;
		margin-bottom: 30rpx;
		text-align: center;
		justify-content: center;
	}

	/*Peach - 新增 - 保存*/

	.saveBtn {
		position: absolute;
		top: 375rpx;
		left: 0rpx;
		transform: rotate(90deg);
		color: #666;
	}

	.previewBtn {
		position: absolute;
		top: 500rpx;
		left: 0rpx;
		transform: rotate(90deg);
		color: #666;
	}

	.undoBtn {
		position: absolute;
		top: 625rpx;
		left: 0rpx;
		transform: rotate(90deg);
		color: #666;
	}

	.black-select {
		width: 60rpx;
		height: 60rpx;
		position: absolute;
		top: 30rpx;
		left: 25rpx;
	}

	.red-select {
		width: 60rpx;
		height: 60rpx;
		position: absolute;
		top: 140rpx;
		left: 25rpx;
	}

	.color_pic {
		width: 70rpx;
		height: 70rpx;
		border-radius: 25px;
		position: absolute;
		top: 60rpx;
		left: 18rpx;
		border: 1px solid #ddd;
	}
</style>