<template>
	<view class="watermark-content">
		<canvas canvas-id="watermarkCanvas" id="watermarkCanvas" :style="{width:canvasWidth + 'px', height:canvasHeight + 'px'}"></canvas>
	</view>
</template>

<script setup>
	// export default {
// 	name:'hpy-watermark',
import { ref } from "vue";

const emit = defineEmits(['waterMark'])
		const props = defineProps({
			/**
			 * 文字文字位置（默认：左下角）可选值：左上角：topLeft、右上角：topRight、左下角：bottomLeft、右下角：bottomRight
			 */
			markAlign:{
				type:String,
				default:function(){
					return 'bottomLeft'
				}
			},
			/**
			 * 设置文本的水平对齐方式，默认：start，文本在指定的位置开始。
			 * end	文本在指定的位置结束。
			 * center 文本的中心被放置在指定的位置。
			 * left	文本左对齐。
			 * right	文本右对齐。
			 */
			textAlign:{
				type:String,
				default:function(){
					return 'start';
				}
			},
			/**
			 * 设置文本的垂直对齐方式，默认：alphabetic文本基线是普通的字母基线。
			 * top	文本基线是 em 方框的顶端。
			 * hanging	文本基线是悬挂基线。
			 * middle	文本基线是 em 方框的正中。
			 * ideographic	文本基线是表意基线。
			 * bottom	文本基线是 em 方框的底端。
			 */
			textBaseline:{
				type:String,
				default:function(){
					return 'alphabetic';
				}
			},
			/**
			 * 文字大小
			 */
			fontSize:{
				type:[Number, String],
				default:40
			},
			/**
			 * 文字颜色
			 */
			fontColor:{
				type:String,
				default:function(){
					return '#FFFFFF'
				}
			},
			/**
			 * 阴影颜色
			 */
			shadowColor:{
				type:String,
				default:function(){
					return 'rgba(0, 0, 0, 1.0)';
				}
			},
			/**
			 * 阴影边框大小
			 */
			shadowWidth:{
				type:[Number, String],
				default:2
			},
			/**
			 * 图片的质量，取值范围为 (0, 1]，不在范围内时当作1处理
			 */
			quality:{
				type:[Number, String],
				default:1
			},
			/**
			 * 目标文件的类型，只支持 'jpg' 或 'png'。默认为 'png'
			 */
			fileType:{
				type:String,
				default:function(){
					return 'png'
				}
			}
		})
				let canvasWidth = ref(0)
				let canvasHeight = ref(0)
			/**
			 * 增加水印
			 * @param {Object} {filePaths:['图片地址1', '图片地址2'], fillTexts:['水印1', '水印2']}
			 */
async function addWaterMark({ filePaths = [], fillTexts = [] }) {
				console.log('开始添加水印', filePaths, fillTexts);
				
				uni.showLoading({title:'图片处理中···'});
				try{
					for (const filePath of filePaths) {
						await drawImage(filePath, fillTexts.reverse());
					}
				}catch(e){
					// TODO handle the exception
				}finally{
					uni.hideLoading();
				}
			}
			/**
			 * 绘制单个图片
			 */
			async function drawImage(filePath, fillTexts){
				const ctx = uni.createCanvasContext('watermarkCanvas', this);
				return new Promise(resolve => {
					uni.getImageInfo({
						src: filePath,
						success: (image) => {
							console.log(image);
							
							canvasWidth.value = image.width;
							canvasHeight.value = image.height;
							ctx.clearRect(0, 0, image.width, image.height);
							setTimeout(()=>{
								ctx.drawImage(image.path, 0, 0, image.width, image.height);
								ctx.setFontSize(props.fontSize);
								ctx.setFillStyle(props.fontColor);
								// 设置阴影
								let shadowWidth = Number(props.shadowWidth + "");
								if(shadowWidth > 0){
									ctx.shadowColor = props.shadowColor;
									ctx.shadowOffsetX = shadowWidth;
									ctx.shadowOffsetY = shadowWidth;
								}
								// 设置水平对齐方式
								ctx.textAlign = props.textAlign;
								// 设置垂直对齐方式
								ctx.textBaseline = props.textBaseline;
								const maxText = fillTexts.reduce((text, val) => {
									return text.length >= val.length ? text : val;
								});
								fillTexts.forEach((mark, index) => {
									if(props.markAlign == "bottomRight"){
										ctx.fillText(mark, image.width - (ctx.measureText(maxText).width+60), image.height - (index*60+60));
									}else if(props.markAlign == "topLeft"){
										ctx.fillText(mark, 20, (index*60+60));
									}else if(props.markAlign == "topRight"){
										ctx.fillText(mark, image.width - (ctx.measureText(maxText).width+60), (index*60+60));
									}else{
										ctx.fillText(mark, 20, image.height - (index*60+60));
									}
								});
								ctx.draw(false, (() => {
									setTimeout(()=>{
										uni.canvasToTempFilePath({
											canvasId: 'watermarkCanvas',
											fileType:props.fileType,
											quality:Number(props.quality + "" || "1"),
											success: (res) => {
												console.log(res);
												
												emit('waterMark', res.tempFilePath);
											},
											fail:(err) => {
												console.log(err)
											},
											complete: () => {
												resolve();
											}
										}, this);
									}, 300);
								})());
							}, 200);
						},
						fail: (e) => {
							resolve();
						}
					});
				});
			}

			defineExpose({
				addWaterMark
			});
</script>

<style scoped>
	.watermark-content{width: 0;height: 0;overflow: hidden;}
</style>
