<template>
	<div class="flex flex-direction align-center justify-center" :style="{ height: heig }">
		<div class="flex" style="height: 60%;">
			<div class="Range" style="height: 100%;">
				<span v-for="(scale,scind) in getRange(data.max)" :key="scind">{{scale}}%</span>
			</div>
			<div style="height: 100%;">
				<div class="Liquidli" style="height: 100%;" :style="{ width: wid }">
					<div class="divHeig" :style="{height:`${((parseFloat(data.value||0)/parseFloat(data.max || max))*100)>100?100:parseInt((parseFloat(data.value||0)/parseFloat(data.max || max))*100)}%`,backgroundColor: ((parseFloat(data.value||0)/parseFloat(data.max || max)) >0.79) ?'#FF3636':'#30B08E'}">
					</div>
				</div>
				<div class="margin-top-xs" :style="'color:'+((parseFloat(data.value||0)/parseFloat(data.max || max)) >0.79) ?'#FF3636':'#218066'">{{isNaN(Number(data.value,10))?"--":data.value}} {{data.unit}}</div>
			</div>
		</div>
	</div>
</template>

<script setup>
	const store = useStore();
	const max = ref(100)
	const getRange = function(key) {
		let _id = parseFloat(key||max.value) / 5;
		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);
		let fiv = (reg.test(_id * 5)) ? (_id * 5) : (_id * 5).toFixed(2);
		return [fiv, four, thr, two, one, 0];
	}
	const props = defineProps({
		// 数据
		data: {
			type: Object,
			default: {
				max: 100,
				value: "--",
				name: "--",
				unit: ""
			}
		},
		// 宽度
		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;
		width: 60px;
		height: 100px;
		border-radius: 4px;
		border: 2px solid var(--el-color-black);
		.divHeig{
			position: relative;
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 0%;
			border-radius: 2px;
			background-color: #30B08E;
		}
	}

	.Range {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-end;
		padding: 0 6px;
		height: 104px;
		font-size: 12px;
		font-weight: 200;
		/* color: var(--el-color-primary); */
		color: #218066;
		&>span:nth-child(1){
			color: #FF3636;
		}
		&>span:nth-child(2){
			color: #FF3636;
		}
	}
</style>