<script setup>
	import { NIcon, useThemeVars } from "naive-ui";
	import VividImagePreview from "./VividImagePreview.vue";

	/**
	 * 功能说明：
	 * 设置宽高后，图片将按比例缩放到完整显示较小的边，长的边会进行裁剪
	 * */

	import { nextTick, onMounted, ref } from "vue";
	const themeVars = useThemeVars();

	const props = defineProps({
		src: {
			type: String,
			default: "",
		},
		prevSrc: {
			type: String,
			default: "",
		},
		height: {
			type: Number,
			default: null,
		},
		width: {
			type: Number,
			default: null,
		},
		radius: {
			type: String,
			default: "0px",
		},
		isPreview: {
			type: Boolean,
			default: false,
		},
		crossOrigin: {
			type: Boolean,
			default: false,
		},
	});

	const HbImgWrap = ref();
	const HbImg = ref();
	let imgHeight = 0;
	let imgWidth = 0;

	function calcImg() {
		// 图片宽高比
		const WHPercent = imgWidth / imgHeight;
		// 图片高宽比
		const HWPercent = imgHeight / imgWidth;
		// 容器高度
		let divHeight = imgHeight;
		if (props.height) {
			divHeight = props.height;
		}
		// 容器宽度
		let divWidth = imgWidth;
		if (props.width) {
			divWidth = props.width;
		}
		// 设置容器高度
		HbImgWrap.value.style.height = divHeight + "px";
		// 设置容器宽度
		HbImgWrap.value.style.width = divWidth + "px";

		// 容器宽高比
		const divPercent = divWidth / divHeight;
		if (imgWidth > divWidth && imgHeight < divHeight) {
			// 图片宽比容器大 高比容器小
			HbImg.value.style.setProperty("height", divHeight + "px", "important");
			HbImg.value.style.setProperty("width", divHeight * WHPercent + "px", "important");
		} else if (imgWidth < divWidth && imgHeight > divHeight) {
			// 图片高比容器大 宽比容器小
			HbImg.value.style.setProperty("height", divWidth * HWPercent + "px", "important");
			HbImg.value.style.setProperty("width", divWidth + "px", "important");
		} else {
			// 图片宽高都大于容器  或  图片宽高都小于容器
			if (WHPercent > 1) {
				if (WHPercent > divPercent) {
					HbImg.value.style.setProperty("height", divHeight + "px", "important");
					HbImg.value.style.setProperty("width", divHeight * WHPercent + "px", "important");
				} else {
					HbImg.value.style.setProperty("height", divWidth * HWPercent + "px", "important");
					HbImg.value.style.setProperty("width", divWidth + "px", "important");
				}
			} else if (WHPercent < 1) {
				if (divPercent >= 1) {
					HbImg.value.style.setProperty("height", divWidth * HWPercent + "px", "important");
					HbImg.value.style.setProperty("width", divWidth + "px", "important");
				} else {
					HbImg.value.style.setProperty("height", divHeight + "px", "important");
					HbImg.value.style.setProperty("width", divHeight * WHPercent + "px", "important");
				}
			} else {
				if (divPercent >= 1) {
					HbImg.value.style.setProperty("height", divWidth * HWPercent + "px", "important");
					HbImg.value.style.setProperty("width", divWidth + "px", "important");
				} else {
					HbImg.value.style.setProperty("height", divHeight + "px", "important");
					HbImg.value.style.setProperty("width", divHeight * WHPercent + "px", "important");
				}
			}
		}
	}

	const isShow = ref(false);

	onMounted(() => {
		const image = new Image();
		if (props.crossOrigin) {
			image.crossOrigin = "Anonymous";
		}
		image.src = props.src;
		if (image.complete) {
			imgHeight = HbImg.value.naturalHeight;
			imgWidth = HbImg.value.naturalWidth;
			calcImg();
		} else {
			nextTick(() => {
				image.onload = () => {
					HbImg.value.src = props.src;
					imgHeight = HbImg.value.offsetHeight;
					imgWidth = HbImg.value.offsetWidth;
					calcImg();
				};
				image.onerror = () => {
					imgHeight = HbImg.value.offsetHeight;
					imgWidth = HbImg.value.offsetWidth;
					calcImg();
				};
			});
		}
	});
</script>

<template>
	<div ref="HbImgWrap" class="hb-img-wrap" :style="`border-radius: ${props.radius};`">
		<img ref="HbImg" class="hb-img" :src="src" />
		<div v-show="props.isPreview" class="hb-img-prev">
			<n-icon style="cursor: pointer" @click="isShow = true">
				<i class="ri-eye-line" />
			</n-icon>
		</div>
	</div>
	<vivid-image-preview v-model:value="isShow" :list="[props.prevSrc || props.src]" />
</template>

<style scoped>
	.hb-img-wrap {
		height: 100%;
		width: 100%;
		position: relative;
		overflow: hidden;
	}
	.hb-img-wrap:hover .hb-img-prev {
		display: flex;
	}
	.hb-img {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		padding: 0;
		margin: 0;
	}
	.hb-img-prev {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		background-color: rgba(0, 0, 0, 0);
		color: v-bind(themeVars.textColor3);
		font-size: 28px;
		display: none;
		justify-content: center;
		align-items: center;
		transition: background-color 0.5s;
	}
	.hb-img-prev:hover {
		background-color: rgba(0, 0, 0, 0.5);
	}
</style>
