<template>
	<div class="flex flex-direction align-center">
		<div class="text-bold"><text class="text-blue text-df">{{isNaN(Number(data.value,10))?"--":data.value}}</text> {{data.unit}}</div>
		<div class="margin-top-xs flex">
			<div class="Liquidli" :style="{ width: wid, height: heig }">
				<div
					:style="{height:`${((parseFloat(data.value||0)/parseFloat(data.max || max))*100)>100?100:parseInt((parseFloat(data.value||0)/parseFloat(data.max || max))*100)}%`,backgroundColor: data.type == 'light'?'#F08E3E':'#B05409'}">
				</div>
				<span
					:style="`bottom:${(parseFloat(data.value||0)/parseFloat(data.max || max))<0.19?0:'calc('+(((parseFloat(data.value||0)/parseFloat(data.max || max))*100)>100?100:parseInt((parseFloat(data.value||0)/parseFloat(data.max || max))*100))+'% - 24px)'};`">{{((parseFloat(data.value||0)/parseFloat(data.max || max))*100).toFixed(2)}}<i>%</i></span>
			</div>
		</div>
		<div class="text-xs">{{data.name}}</div>
	</div>
</template>

<script setup>
	const store = useStore();
	const max = ref(9);
	const props = defineProps({
		// 数据
		data: {
			type: Object,
			default: {
				max: 120,
				value: "--",
				name: "--",
				unit: "",
				type: "heavy"
			}
		},
		// 宽度
		wid: {
			type: [Number, String],
			default: "68px",
		},
		// 高度
		heig: {
			type: [Number, String],
			default: "72px",
		},
		Host: {
			type: Boolean,
			default: false,
		}
	});
	const {
		data,
		wid,
		heig,
		Host
	} = toRefs(props);
	// 观察 data ，重新绘制
	watch(data, (newValue) => {
		
	}, {
		deep: true
	});
</script>

<style lang='scss' scoped>
	.Liquidli {
		position: relative;
		border-radius: 4px;
		border: 3px solid #218066;
		border-top: none;
		div {
			position: relative;
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 0%;
			background-color: #B05409;
		}
		span {
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translate(-50%, 0);
			font-size: 14px;
			/* color: #fff; */
			i {
				font-size: 12px;
			}
		}
	}
</style>