<template>
	<div>
		<div class="flex-sub" v-if="data.type == 'temp'">
			<div class="flex align-center justify-center margin-bottom-sm">
				<div style="padding-top:0" class="Range">
					<span v-for="(scale,scind) in getRange(data.max)" :key="scind">{{scale}}</span>
				</div>
				<div class="temBox"
				:style="'background-image: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) '+((((parseFloat(data.value||0)/parseFloat(data.max || max))*100)>100?100:((parseFloat(data.value||0)/parseFloat(data.max || max))*100)))+'%, #103151 1%);'"></div>
			</div>
			<div class="text-xs" v-if="data.size">
				<div>{{data.name}}: <span class="aisNum" style="font-size: 1rem;">{{isNaN(Number(data.value,10))?"--":data.value}}</span> ℃</div>
			</div>
			<div v-else>
				<div><span class="aisNum">{{isNaN(Number(data.value,10))?"--":data.value}}</span> ℃</div>
				<div>{{data.name}}</div>
			</div>
		</div>
		<div class="flex-sub" v-else>
			<div class="flex justify-center align-center margin-bottom-sm" :style="Host?('height:'+width):''">
				<div class="Range" :class="Host?'Host':''">
					<span v-for="(scale,scind) in getRange(data.max)" :key="scind">{{scale}}</span>
				</div>
				<div class="Battery" :class="Host?'Host':''">
					<img :src="$store.state.settings.sideTheme == 'theme-light'?shipCellBl:shipCell" style="height: 100%;" alt="">
					<div :style="'height: '+((((parseFloat(data.value||0)/110)*83)>83?83:((parseFloat(data.value||0)/110)*83)))+'%;'"></div>
				</div>
			</div>
			<div> <span class="aisNum">{{isNaN(Number(data.value,10))?"--":data.value}}</span> V</div>
			<div>{{data.name}}</div>
		</div>
	</div>
</template>

<script setup>
	const max = ref(300)
	const store = useStore();
	import shipCell from "@/assets/images/diancBg.png";
	import shipCellBl from "@/assets/images/diancBg-black.png";
	
	const getRange = function(key){
		let _id = parseFloat(key || max.value) / 3;
		let reg = /^(-?\d+)(\.\d{1,2})?$/;
		let one = parseInt((reg.test(_id*1))?(_id*1):(_id*1));
		let two = parseInt((reg.test(_id*2))?(_id*2):(_id*2));
		let thr = parseInt((reg.test(_id*3))?(_id*3):(_id*3));
		return [thr, two, one, 0];
	}
	const props = defineProps({
	  // 数据
		data: {
			type: Object,
			default: {
				max: 120,
				height: 0,
				value: "---",
				name: "---",
				type: "temp",
				size: false
			}
		},
		// 宽度
		width: {
			type: [Number, String],
			default: "90px",
		},
		Host: {
			type: Boolean,
			default: false,
		}
	});
	const { data, width, Host } = toRefs(props);

</script>

<style lang='scss' scoped>
	.aisNum {
		font-weight: bold;
		color: #fbbd08;
		font-size:20px;
	}
	.Range {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-end;
		height: 90px;
		padding-top: 6px;
		&.Host{
			height: 110px;
		}
	}
	.Battery {
		position: relative;
		margin-left: 6px;
		width: 49px;
		height: 90px;
		&.Host{
			width: 60px;
			height: 110px;
		}
	}
	.Battery>div {
		position: absolute;
		bottom: 5px;
		left: 5px;
		width: calc(100% - 10px);
		border-radius: 4px;
		background-color: #45c5ff;
	}
	.Host.Battery>div{
		bottom: 7px;
		left: 7px;
		width: calc(100% - 14px);
	}
	.temBox {
		width:50px;
		height:90px;
		margin-left:4px;
		background-color: #0084ff;
		border: 1px solid #fff;
	}
</style>