<template>
	<view class="popup_wrapper" @click="closeClick">
		<!-- <canvas canvas-id="myCanvas" id="myCanvas" type="2d" @disable-scroll="true" @longpress="longpressClick"
			@touchmove="moveHandle" :style="{
			width: 300 + 'px',
			height: 487 + 'px',
		  }" @error="canvasIdErrorCallback"></canvas> -->
		  <view class="cancelBtn" @click="cancelClick">
		  	<image style="width: 64rpx;height: 64rpx;" src="../../static/images/service_close.png" mode="aspectFill"></image>
		  </view>
		<view class="targetView" @click.stop="targetClick">
			<view class="target_title">联系方式</view>
			<view class="image_wrapper">
				<image class="image" :src="base64Image" show-menu-by-longpress mode="aspectFill"></image>
			</view>
			<!-- <view class="target_line"></view> -->
			<!-- <view class="cancel" @click.stop="cancelClick">确认</view> -->
		</view>
		
	</view>
</template>

<script lang="ts" setup>
	import { getCurrentInstance, nextTick, onMounted, ref } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import registerApi from '@/api/register'

	const emit = defineEmits(['close'])
	const instance = getCurrentInstance();
	const base64Image = ref('')
	const hideCanvas = ref(false)

	onMounted(() => {

		registerApi.getNotice({ type: 'contact' }).then((res) => {

			base64Image.value = extractImageUrl(res.data.noticeContent)
			console.log('contact', res, base64Image.value);
			// initCanvasContext()
		}).catch(() => {
			// initCanvasContext()	
		})
	})
	function targetClick() {
		
	}
	function cancelClick() {
		emit('close')
	}
	
	function extractImageUrl(htmlString) {
		const regex = /<img[^>]+src="([^">]+)"/;
		const match = htmlString.match(regex);
		return match ? match[1] : null;
	}

	function canvasIdErrorCallback(e) {
		console.error('canvasIdErrorCallback', e.detail.errMsg)
	}

	function initCanvasContext() {

		const query = uni.createSelectorQuery().in(instance)
		query.select('#myCanvas')
			.fields({
				node: true,
				size: true
			})
			.exec((res) => {
				console.log(res)
				const canvas = res[0].node
				const ctx = canvas.getContext('2d')
				const dpr = wx.getSystemInfoSync().pixelRatio || 1
				const width = res[0].width
				const height = res[0].height
				// 计算物理像素尺寸，并取整
				const physicalWidth = Math.floor(width * dpr);
				const physicalHeight = Math.floor(height * dpr);
				canvas.width = physicalWidth
				canvas.height = physicalHeight

				ctx.scale(dpr, dpr)
				drawCommon(ctx, width, height)

				if (base64Image.value) {
					const img = canvas.createImage()
					img.src = base64Image.value
					img.onload = () => {
						ctx.drawImage(img, 5, 52, 290, 390)
						console.log('图片绘制成功')
					}
				}
				// const nameWidth = ctx.measureText('智航保-保保（彭保主）').width
				// const img = canvas.createImage()
				// img.src = '/static/images/service_sex_2.png'
				// img.onload = () => {
				// 	ctx.drawImage(img, 76 + nameWidth, 80, 16, 16)
				// 	console.log('图片绘制成功22')
				// }
				// const avatarImg = canvas.createImage()
				// avatarImg.src = '/static/images/logo.png'
				// avatarImg.onload = () => {
				// 	ctx.drawImage(avatarImg, 20, 75, 50, 50)
				// 	console.log('图片绘制成功33')
				// }
				// const code = canvas.createImage()
				// code.src = '/static/images/logo.png'
				// code.onload = () => {
				// 	ctx.drawImage(code, 30, 150, 240, 240)
				// 	console.log('图片绘制成功44')
				// }
			})
	}



	const drawCommon = (ctx, width, height) => {

		ctx.fillStyle = '#ffffff'
		createRoundedRectPath(ctx, 0, 0, width, height, 16);
		let y = 50
		ctx.font = 'bold 15px sans-serif';
		ctx.fillStyle = '#2B2B2B';
		ctx.fillText('联系方式', 120, 50);
		y += 21
		y += 22
		let x = 76;
		// ctx.fillText('智航保-保保（彭保主）', x, y);

		y += 21
		ctx.font = '10px sans-serif';
		ctx.fillStyle = '#808080';
		// ctx.fillText('广东 深圳', x, y);

		y = 240 + 150 + 32
		x = 78
		// ctx.fillText('扫一扫上面的二维码图案，加我为朋友', x, y);
		y += 20

		ctx.beginPath();
		ctx.lineWidth = 1;
		ctx.strokeStyle = '#ECEDEF'
		ctx.moveTo(0, y);
		ctx.lineTo(x + width, y)
		ctx.stroke(); // 设置裁剪区域
		y += 30
		ctx.fillStyle = '#EE0D24'
		ctx.font = 'normal 15px PingFangSC';
		ctx.fillText('确认', 135, y)
	};
	const createRoundedRectPath = (
		ctx : CanvasRenderingContext2D,
		x : number,
		y : number,
		width : number,
		height : number,
		radius : number
	) => {
		ctx.beginPath();
		ctx.moveTo(x + radius, y);
		ctx.arcTo(x + width, y, x + width, y + height, radius);
		ctx.arcTo(x + width, y + height, x, y + height, radius);
		ctx.arcTo(x, y + height, x, y, radius);
		ctx.arcTo(x, y, x + width, y, radius);
		ctx.closePath();
		ctx.fill(); // 设置裁剪区域
	}
	// 保存Canvas内容
	const saveCanvas = () => {

		const query = uni.createSelectorQuery().in(instance)
		query.select('#myCanvas')
			.fields({
				node: true,
				size: true
			})
			.exec((res) => {
				console.log(res)
				const canvas = res[0].node
				const ctx = canvas.getContext('2d')

				uni.canvasToTempFilePath({
					canvasId: 'myCanvas',
					canvas: canvas,
					success: (res) => {
						hideCanvas.value = true
						uni.showShareImageMenu({
							path: res.tempFilePath,
							success: (res) => {
								console.log('showShareImageMenu success', res);
								emit('close');
							},
							fail: (error) => {
								console.log('showShareImageMenu error', error);
								emit('close');
							}
						})
					},
					fail: (err) => {
						console.log('保存失败', err);
						uni.showToast({ title: '保存失败', icon: 'none' });
					},
					// 关键：传递组件实例
				});
			})
	};
	function longpressClick() {
		saveCanvas()
	}
	function contentClick() {

	}
	function moveHandle() {
		// e.preventDefault();
		// e.stopPropagation();	
		// return false;
	}
	function closeClick() {
		emit('close');
	}
</script>

<style lang="scss" scoped>
	.popup_wrapper {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 999;
		overflow: hidden;
		flex-direction: column;
		.cancelBtn {
			display: flex;
			flex-direction: row-reverse;
			width: 660rpx;
			height: 70rpx;
		}
		.targetView {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 600rpx;
			height: 963rpx;
			background: #FFFFFF;
			border-radius: 32rpx;

			.target_title {
				display: flex;
				margin-top: 50rpx;
				justify-content: center;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 30rpx;
				color: #000000;
				line-height: 42rpx;
				text-align: left;
				font-style: normal;
			}

			.image_wrapper {
				display: flex;
				height: 739rpx;
				width: 600rpx;
				margin-top: 20rpx;

				.image {
					height: 739rpx;
					width: 600rpx;
				}
			}

			.target_line {
				margin-top: 20rpx;
				width: 100%;
				height: 1rpx;
				background: #ECEDEF;
			}
			.cancel {
				display: flex;
				justify-content: center;
				align-items: center;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 30rpx;
				color: #EE0D24;
				line-height: 42rpx;
				text-align: left;
				font-style: normal;
				width: 100%;
				height: 88rpx;
			}
		}
	}
</style>