<template>
	<div class="flex flex-direction align-center">
		<div class="oilBox">
			<div class="oilHeig" :class="type == 'heavy'?'heavy':''" :style="{ height: (parseFloat(data.value)/parseFloat(data.max || max))*100 + '%'}">
				<div class="oilTxt text-sm text-black">
					<span class="margin-lr-xs margin-right-xs text-bold">{{data.value}}</span>
					<span>{{data.unit}}</span>
				</div>
			</div>
		</div>
		<div class="text-xs margin-top-xs">{{data.name}}</div>
	</div>
</template>

<script setup>
	const { proxy } = getCurrentInstance();
	const min = ref(0);
	const max = ref(10);
	const props = defineProps({
		data: {
		  type: Object,
		  default: () => {
		    return {
				name: "",
				value: 0,
				min: 0,
				max: 10,
				unit: ""
		    }
		  }
		},
		type: {
			type: String,
			default: '',
		}
	});
	const { height, type, data } = toRefs(props);
	watch(data, (newValue) => {
			
		},{
			deep: true
		},
	);
</script>
<style scoped lang="scss">
	.oilBox{
		position: relative;
		width: 30%; 
		height: 55%;
		min-width: 55px;
		min-height: 55px;
		overflow: hidden;
		border-radius: 4px; 
		border: 2px solid #0e47b0;
		border-top: none; 
		.oilHeig{
			position: absolute; 
			bottom: 0px; 
			left: 0px; 
			right: 0px; 
			height: 0%; 
			background-color: #f08e3e; 
			transition-duration: 0.1s;
			&.heavy{
				background-color: #b05409;
			}
		}
		.oilTxt{
			position: absolute; 
			top: 0px; 
			left: 0px; 
			right: 0px; 
			transition-duration: 0.1s;
		}
	}
</style>