<template>

	<view>

		<!-- #ifdef MP-WEIXIN -->

		<page-container

			v-if="usePageContainer && show"

			:show="show"

			:overlay="false"

			@leave="close"

		/>

		<!-- #endif -->

		<u-popup v-model="show" mode="bottom" :closeable="true" @close="close" close-icon-pos='top-right'

			:safe-area-inset-bottom="true" :mask-close-able="false">

			<view class="handwritten flex-col flex-ali-center">

				<text class="title">签字确认</text>

				<view class="">

					<canvas :style="{width: '686rpx',height: '480rpx',border:'1px solid #2979FF'}" disable-scroll="true"

						data-id="1" @touchstart="penStart" @touchmove="penMove" @touchend="penEnd"

						canvas-id="canvas"></canvas>

				</view>

				<view class="flex-row" style="margin-top: 80rpx;">

					<view class="retDraw" @click="retDraw">重写</view>

					<view style="width: 343rpx;height: 86rpx;">

						<u-button :throttle-time="0" @click="onConfirm" type="primary" :loading="loading"

							:custom-style="{borderRadius:'0'}">确定</u-button>

					</view>

				</view>

			</view>

		</u-popup>

	</view>

</template>



<script>

	import Mycanvas from "@/common/js/handwriting.js";

	export default {

		name: 'd-handwritten',

		props: {

			value: {

				type: Boolean,

				default: false

			},

			usePageContainer: {

				type: Boolean,

				default: false

			},

		},

		data() {

			return {

				show: this.value,

				canvas: null,

				loading: false

			}

		},

		watch: {

			value(v) {

				this.show = v

			},

			show(v) {

				this.$emit('input', v)

				if (v) {

					this.$nextTick(() => this.initCanvas())

				}

			},

		},

		mounted() {

			this.$nextTick(() => {

				if (this.show) this.initCanvas()

			})

		},

		methods: {

			initCanvas() {

				this.canvas = new Mycanvas({

					lineColor: '#1A1A1A',

					lineSise: 50,

					canvasName: 'canvas',

				}, this)

			},

			close() {

				this.show = false

			},

			retDraw() {

				if (this.canvas && typeof this.canvas.retDraw === 'function') {

					this.canvas.retDraw()

				}

			},

			penStart(event) {

				if (!this.canvas) return

				this.canvas.penStart(event)

			},

			penMove(event) {

				if (!this.canvas) return

				this.canvas.penMove(event)

			},

			penEnd(event) {

				if (!this.canvas) return

				this.canvas.penEnd(event)

			},

			onConfirm() {

				this.loading = true

				this.saveCanvas()

			},

			async saveCanvas() {

				if (!this.canvas || typeof this.canvas.saveCanvas !== 'function') {

					this.loading = false

					uni.showToast({ title: '签名板未就绪', icon: 'none' })

					return

				}

				try {

					const pic = await this.canvas.saveCanvas(this)

					this.loading = false

					const base64 = typeof pic === 'string' ? pic : (pic && pic.base64)

					if (!base64 && !(pic && pic.tempFilePath)) {

						uni.showToast({ title: '请先签名', icon: 'none' })

						return

					}

					this.show = false

					this.$emit('saveCanvas', pic)

				} catch (e) {

					this.loading = false

					uni.showToast({ title: '签名导出失败', icon: 'none' })

				}

			},

		},

	}

</script>



<style lang="scss" scoped>

	.handwritten {

		width: 750rpx;

		background: #FFFFFF;

		border-radius: 16rpx 16rpx 0px 0px;

		height: calc(840rpx + env(safe-area-inset-bottom));

		padding-bottom: env(safe-area-inset-bottom);

	}



	.title {

		font-size: 32rpx;

		font-family: PingFang SC-Regular, PingFang SC;

		font-weight: 400;

		color: #323233;

		margin-top: 30rpx;

		margin-bottom: 48rpx;

	}



	.retDraw {

		width: 343rpx;

		height: 86rpx;

		background: #FFFFFF rgba(41, 121, 255, 0);

		font-size: 32rpx;

		font-family: PingFang SC-Medium, PingFang SC;

		font-weight: 500;

		color: #2979FF;

		line-height: 86rpx;

		text-align: center;

	}

</style>

