<template>
	<div class="margin-tb flex flex-direction align-center">
		<div class="text-el-primary" style="font-size: 15px;">{{data.name}}(<span class="aisNum">{{(Math.random()*200).toFixed(2)}}</span> L)</div>
		<div class="margin-top-sm flex">
			<div class="Range">
				<span v-for="(scale,scind) in getRange(data.max)" :key="scind">{{scale}}</span>
			</div>
			<div class="Liquidli">
				<div
					:style="`height:${((parseFloat(data.value||0)/parseFloat(data.max || max))*100)>100?100:parseInt((parseFloat(data.value||0)/parseFloat(data.max || max))*100)}%;`">
				</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)'};`">{{isNaN(Number(data.value,10))?"--":data.value}}<i>m</i></span>
			</div>
		</div>
		<div>重量：<span class="aisNum">{{(Math.random()*200).toFixed(2)}}</span> 吨</div>
	</div>
</template>

<script setup>
	const store = useStore();
	const max = ref(9)
	const getRange = function(key) {
		let _id = parseFloat(key||max.value) / 4;
		let reg = /^(-?\d+)(\.\d{1,2})?$/;
		let one = (reg.test(_id * 1)) ? (_id * 1) : (_id * 1).toFixed(2);
		let two = (reg.test(_id * 2)) ? (_id * 2) : (_id * 2).toFixed(2);
		let thr = (reg.test(_id * 3)) ? (_id * 3) : (_id * 3).toFixed(2);
		let four = (reg.test(_id * 4)) ? (_id * 4) : (_id * 4).toFixed(2);
		return [four, thr, two, one, 0];
	}
	const props = defineProps({
		// 数据
		data: {
			type: Object,
			default: {
				max: 100,
				value: "--",
				name: "--"
			}
		},
		// 宽度
		width: {
			type: [Number, String],
			default: "90px",
		},
		Host: {
			type: Boolean,
			default: false,
		}
	});
	const {
		data,
		width,
		Host
	} = toRefs(props);
	// 观察 data ，重新绘制
	watch(data, (newValue) => {}, {
		deep: true
	});
</script>

<style lang='scss' scoped>
	.aisNum {
		font-weight: bold;
		color: #fbbd08;
		font-size: 1.1rem;
	}

	.Liquidli {
		position: relative;
		width: 60px;
		height: 100px;
		border-radius: 2px;
		/* box-shadow: 0 0 4px 1px #6a6a6a; */
		border: 1px solid var(--el-color-primary);

		div {
			position: relative;
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 0%;
			border-radius: 2px;
			background-color: #55aaff;
		}

		span {
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translate(-50%, 0);
			font-size: 16px;
			font-weight: bold;

			i {
				font-size: 12px;
			}
		}
	}

	.Range {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-end;
		padding: 0 6px;
		height: 104px;
		font-size: 14px;
		/* color: var(--el-color-primary); */
		color: #c3c3c3;
	}
</style>