<template>
	<div>
		<div class="flex flex-direction align-center">
			<!-- {{data}} -->
			<div class="text-sm margin-tb-xs">{{data.name}}</div>
			<div class="flex margin-tb-xs">
				<div class="Range text-gray" v-if="scale!=null">
					<span v-for="(scale,scind) in getRange(data.max)" :key="scind">{{scale}}</span>
				</div>
				<div class="Liquidli">
					<div class="wave" :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)))>1?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 class="Range padding-left-xs text-xs text-grey" style="align-items: flex-start;" v-if="data.other != undefined">
					<span><i :class="(parseFloat(data.value||0) > 8.5)?'text-red':''">●</i>高高位</span>
					<span><i :class="(8.6>parseFloat(data.value||0))&&(parseFloat(data.value||0)> 7.5)?'text-red':''">●</i>高位</span>
					<span style="opacity: 0;">高</span>
					<span style="opacity: 0;"><i :class="(4>parseFloat(data.value||0))&&(parseFloat(data.value||0) > 3)?'text-red':''">●</i>高</span>
					<span style="opacity: 0;"><i :class="(3>parseFloat(data.value||0))&&(parseFloat(data.value||0) > 2)?'text-red':''">●</i>低</span>
				</div>
			</div>  
		</div>
		<div class="flex flex-wrap text-xs" v-if="data.other != undefined">
			<div style="width: 50%;margin-top: 10px;" v-for="(suo,subond) in data.other" :key="subond">
				<div><span class="aisNum"><TextValue :value="suo.value"/></span> {{suo.unit}}</div>
				<div>{{getName(suo.name)}}</div>
			</div>
		</div>
	</div>
</template>

<script setup>
	const max = ref(9)
	const store = useStore();
	const getName = function(key){
		return key != undefined?key.split("舱")[1]:"";
	}
	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: 120,
				value: "--",
				name: "--",
				other: []
			}
		},
		// 宽度
		width: {
			type: [Number, String],
			default: "90px",
		},
		Host: {
			type: Boolean,
			default: false,
		},
		scale:{
			type: Boolean,
			default: true,
		}
	});
	const { data, width, Host } = toRefs(props);
	// 观察 data ，重新绘制
	watch( data, (newValue) => {
		if(newValue.min==null){
			newValue.min=0
		}
		if(newValue.max==null){
			newValue.max=120
		}
	}, { deep: true });
</script>

<style lang='scss' scoped>
	.aisNum {
		font-weight: bold;
		color: #fbbd08;
		font-size:1.1rem;
	}
	.Liquidli{
		position: relative;
		width: 60px;
		height: 110px;
		border-radius: 2px;
		box-shadow: 0 0 4px 1px #6a6a6a;
	}
	.Liquidli .wave{
		position: relative;
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 0%;
		border-radius: 2px;
		background-color: #55aaff;
	}
	.Liquidli>span{
		position: absolute;
		bottom:0;
		left: 50%;
		transform: translate(-50%,0);
		font-size: 16px;
		font-weight: bold;
	}
	.Liquidli>span>i{
		font-size: 12px;
	}
	.Range {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-end;
		height:110px;
		padding-right: 10px;
		i{
			font-size: 20px;
			vertical-align: -4%;
		}
	}
</style>