<template>
	<view class="emptybox">
		<view class="empty-image-wrap" :style="imageWrapStyle">
			<up-image
				:src="emptyImage || emptyImg"
				:width="renderWidth"
				:height="renderHeight"
				:mode="imgMode"
			></up-image>
		</view>
		<text class="empty-text">{{ emptyDesc }}</text>
	</view>
</template>

<script setup>
	import { computed } from 'vue';
	import emptyImg from "@/static/icon_empty.png"
	const props = defineProps({
		emptyImage: {
			type: String,
			default: ''
		},
		imgWidth: {
			type: [String, Number],
			default: ''
		},
		imgHeight: {
			type: [String, Number],
			default: ''
		},
		emptyDesc: {
			type: String,
			default: '暂无数据'
		}
	})

	const normalizeSize = (size) => {
		if (size === '' || size === null || size === undefined) return '';
		// 直传字符串（如 50%、206rpx、120px），数字交给 up-image 按组件规则处理
		return typeof size === 'string' ? size.trim() : size;
	};
	const isPercentSize = (size) => typeof size === 'string' && size.endsWith('%');

	const imgWidth = computed(() => {
		const width = normalizeSize(props.imgWidth);
		const height = normalizeSize(props.imgHeight);
		if (width !== '') return width;
		if (height === '') return '206rpx';
		return '';
	});
	const imgHeight = computed(() => normalizeSize(props.imgHeight));
	const renderWidth = computed(() => (isPercentSize(imgWidth.value) ? '100%' : imgWidth.value));
	const renderHeight = computed(() => (isPercentSize(imgHeight.value) ? '100%' : imgHeight.value));
	const imageWrapStyle = computed(() => {
		const style = {};
		if (isPercentSize(imgWidth.value)) style.width = imgWidth.value;
		if (isPercentSize(imgHeight.value)) style.height = imgHeight.value;
		return style;
	});
	const imgMode = computed(() => {
		// 只传宽/高时按比例缩放，避免图片被拉伸
		if (imgWidth.value && !imgHeight.value) return 'widthFix';
		if (!imgWidth.value && imgHeight.value) return 'heightFix';
		return 'aspectFit';
	});
</script>

<style scoped lang="scss">
 .emptybox{
	 width:100%;
	 height:800rpx;
	 min-width:600rpx;
	 display: flex;
	 margin:0 auto;
	 align-items: center;
	 justify-content: center;
	 flex-direction: column;
	 .empty-image-wrap{
		 width: 100%;
		 display: flex;
		 justify-content: center;
	 }
	 .empty-text{
		 font-size: 30rpx;
		 color:#999;
	 }
 }
</style>
