<template>
	<view class="container" :class="{isActive:isCode}">
		<custom-navbar title="资质认证" :showBack="true" backgroundColor="#fff"></custom-navbar>
		<view class="nocode" v-if="!isCode">
			<view class="node-title"> 输入验证码查看证件信息 </view>
			<view class="container-code">
				<view class="code-input">
					<input class="uni-input" v-model="value" maxlength="4" placeholder="请输入验证码"
						placeholder-class="code-input-placeholder" />
				</view>

				<jp-verification-literalness ref="literalness" :contentWidth="115"
					:contentHeight="35"></jp-verification-literalness>
			</view>
			<view class="node-btn" :class="{ active: value.length == 4 }" @click="submit">
				查询
			</view>
		</view>
		<view class="isCode" v-if="isCode">
			<view class="isCode-title">资质认证</view>
			<view class="isCode-card" v-if="syrdetail.health_card">
				<view class="isCode-card-title">
					<image class="isCode-card-title__img" src="/static/images/syr/card.png" mode="aspectFit" />
					健康证
				</view>
				<view  class="isCode-card-card">
					<image class="isCode-card-card__img" :src="syrdetail.health_card" mode="widthFix" >
					</image>
					<wmWatermark text="美融融专用">
					</wmWatermark>
				</view>
				
			</view>
			<view class="isCode-card" v-if="syrdetail.qualifications[0]">
				<view class="isCode-card-title">
					<image class="isCode-card-title__img" src="/static/images/syr/card.png" mode="aspectFit" />
					资质证书
				</view>
				<view  class="isCode-card-card">
					<image class="isCode-card-card__img" :src="syrdetail.qualifications[0]" mode="widthFix">
					</image>
					<wmWatermark text="美融融专用">
					</wmWatermark>
				</view>
				
			</view>
			<view class="isCode-card" v-if="syrdetail.uscc_photo">
				<view class="isCode-card-title">
					<image class="isCode-card-title__img" src="/static/images/syr/card.png" mode="aspectFit" />
					营业执照
				</view>
				<view  class="isCode-card-card">
					<image class="isCode-card-card__img" :src="syrdetail.uscc_photo" mode="widthFix">
					</image>
					<wmWatermark text="美融融专用">
					</wmWatermark>
				</view>
				
			</view>
			<view class="isCode-card" v-if="syrdetail.shop_photo">
				<view class="isCode-card-title">
					<image class="isCode-card-title__img" src="/static/images/syr/card.png" mode="aspectFit" />
					门头照片
				</view>
				<view  class="isCode-card-card">
					<image class="isCode-card-card__img" :src="syrdetail.shop_photo" mode="aspectFill">
					</image>
				</view>
				
			</view>
		</view>
		 <!-- 隐藏的canvas，用于绘制水印 -->
		   <canvas 
		         canvas-id="watermark-canvas" 
		         style="width: 1px; height: 1px; position: absolute; left: -9999rpx; top: -9999rpx;"
		       ></canvas>
	</view>
</template>

<script>
	import wmWatermark from "@/components/wm-watermark/wm-watermark.vue";
	import request from "../../utils/request";
	export default {
		components: {
			wmWatermark
		},
		data() {
			return {
				value: "",
				syrdetail: {},
				id: null,
				isCode: false, //验证是否通过
			};
		},
		props: {
			tabsPopList: {
				type: Array,
				default: () => [],
			},
		},
		onLoad(options) {
			console.log(options);
			this.id = options.id;
			this.getShopDetail(options.id);
		},
		methods: {
			// 在页面的 methods 中定义方法
			previewWithWatermark(imgUrl) {
			  uni.downloadFile({
			    url: imgUrl,
			    success: (downloadRes) => {
			      if (downloadRes.statusCode === 200 && downloadRes.tempFilePath) {
			        // 确认临时路径存在
			        this.addWatermark(downloadRes.tempFilePath);
			      } else {
			        console.error('图片下载失败，状态码：', downloadRes.statusCode);
			      }
			    },
			    fail: (err) => {
			      console.error('下载失败', err);
			    }
			  });
			},
			
			// 添加水印并预览
			addWatermark(originalImgPath) {
			  // 获取图片信息（宽高）
			  uni.getImageInfo({
			    src: originalImgPath,
			    success: (imgInfo) => {
			      const { width, height } = imgInfo; // 原图宽高
			      
			      // 步骤2：创建canvas（大小与原图一致）
			      const canvasId = 'watermark-canvas'; // canvas 标识（需在页面中定义对应canvas）
			      const ctx = uni.createCanvasContext(canvasId, this);
			      
			      // 步骤3：绘制原图到canvas
			      ctx.drawImage(originalImgPath, 0, 0, width, height);
			      
			      // 步骤4：绘制文字水印（可自定义样式）
			      const watermarkText = '我的水印'; // 水印文字
			      ctx.setFontSize(20); // 字体大小
			      ctx.setFillStyle('rgba(255, 255, 255, 0.5)'); // 文字颜色（半透明）
			      ctx.setTextAlign('center'); // 文字对齐方式
			      ctx.setTextBaseline('middle'); // 文字基线
			      
			      // 旋转水印（可选，-30度倾斜）
			      const rotateAngle = -30 * Math.PI / 180; // 角度转弧度
			      const gap = 100; // 水印间距
			      
			      // 重复绘制水印（铺满图片）
			      for (let y = 0; y < height; y += gap) {
			        for (let x = 0; x < width; x += gap) {
			          ctx.save(); // 保存当前状态
			          ctx.translate(x, y); // 移动到指定位置
			          ctx.rotate(rotateAngle); // 旋转
			          ctx.fillText(watermarkText, 0, 0); // 绘制文字
			          ctx.restore(); // 恢复状态
			        }
			      }
			      
			      // 绘制完成后导出图片
			      ctx.draw(false, () => {
			        // 步骤5：将canvas转为临时图片路径
			        uni.canvasToTempFilePath({
			          canvasId: canvasId,
			          width: width,
			          height: height,
			          destWidth: width, // 输出图片宽度（与原图一致）
			          destHeight: height, // 输出图片高度（与原图一致）
			          success: (res) => {
			            const watermarkImgPath = res.tempFilePath; // 带水印的图片路径
			            // 步骤6：预览带水印的图片
			            uni.previewImage({
			              urls: [watermarkImgPath], // 预览的图片数组
			              current: 0 // 初始显示第几张
			            });
			          },
			          fail: (err) => {
			            console.error('canvas转图片失败', err);
			          }
			        }, this);
			      });
			    },
			    fail: (err) => {
			      console.error('获取图片信息失败', err);
			    }
			  });
			},
			// 获取手艺人详情
			getShopDetail(id) {
				request
					.post("/user/syrdetail", {
						id,
					})
					.then((res) => {
						this.syrdetail = res.data;
					})
					.catch((err) => {
						console.log(err);
					});
			},
			submit() {
				if (this.value.length == 4) {
					this.isCode = this.$refs.literalness.verification(this.value);
					if(!this.isCode){
						uni.showToast({
							title: "验证码错误",
							icon: 'none',
							duration: 2000
						});
					}
					console.log(this.isCode);
				}
			},
		},
	};
</script>

<style lang="less">
	.container {
		background-color: #fff;
		min-height: 100vh;

		.nocode {
			padding: 0 48rpx;

			.node-title {
				font-weight: 500;
				font-size: 32rpx;
				color: #333333;
				line-height: 45rpx;
				text-align: center;
				font-style: normal;
				margin-top: 53rpx;
			}

			.container-code {
				display: flex;
				align-items: center;
				padding-bottom: 14rpx;
				border-bottom: 2rpx solid rgba(247, 249, 252, 1);

				.code-input {
					flex: 1;

					.code-input-placeholder {
						font-weight: 400;
						font-size: 28rpx;
						color: #c5c5c7;
						line-height: 40rpx;
						text-align: left;
						font-style: normal;
					}
				}

				margin-top: 90rpx;
				display: flex;
				flex-wrap: nowrap;
			}

			.node-btn {
				width: 644rpx;
				height: 96rpx;
				background: #f7f9fc;
				border-radius: 48rpx;
				font-weight: 500;
				font-size: 28rpx;
				color: #8e929f;
				line-height: 40rpx;
				text-align: left;
				font-style: normal;
				margin-top: 60rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.node-btn.active {
				color: #fff;
				background: #ff3344;
			}
		}

		.isCode {
			.isCode-title {
				font-weight: 500;
				font-size: 32rpx;
				color: #000000;
				line-height: 45rpx;
				text-align: left;
				font-style: normal;
			}
		}
	}

	.isActive {
		background-color: transparent;
		padding: 25rpx 20rpx;
		.isCode-card{
			padding: 30rpx;
			background: #fff;
			border-radius: 20rpx;
			margin-top: 20rpx;
			
			
			.isCode-card-title{
				font-weight: 400;
				font-size: 30rpx;
				color: #333333;
				line-height: 42rpx;
				text-align: left;
				font-style: normal;
				display: flex;
				align-items: center;
				&__img{
					width: 36rpx;
					height: 30rpx;
					margin-right: 13rpx;
				}
			}
			.isCode-card-card{
				margin-top: 20rpx;
				width: 650rpx;
				// height: 300rpx;
				border-radius: 20rpx;
				position: relative;
				&__img{
					width: 650rpx;
					// height: 300rpx;
					border-radius: 20rpx;
				}
			}
		}
	}
</style>