<template>
	<div class="flex">
		<div style="width: calc(100% - 100px);" class="text-center">
			<el-progress
				:show-text="false" 
				:color="data.color" 
				style="width: 100%;" 
				class="margin-bottom-sm"
				:stroke-width="data.swid" 
				:percentage="parseFloat(data.max)>100?(parseFloat(data.value)/parseFloat(data.max))*100:data.value">
			</el-progress>
			<span class="text-sm text-bGray">{{data.name}}</span>
		</div>
		<div class="text-xxl text-purple margin-left-sm">{{data.value}}{{data.unit}}</div>
	</div>
</template>

<script setup>
	const props = defineProps({
		data: {
			type: Object,
			default: {
				max: 100,
				value: 0,
				name: "name",
				unit: "",
				color: "#009dff",
				swid: 12
			},
		},
		height: {
			type: [Number, String],
			default: "300px",
		},
		width: {
			type: [Number, String],
			default: "100%",
		}
	});
	const {
		data,
		height,
		width
	} = toRefs(props);
	watch(data, (newValue) => {
	    console.log(newValue)
	  },{ deep: true }
	);
</script>

<style scoped lang="scss">
	::v-deep .el-progress-bar__outer{
		background-color: #09dfc0;
	}
</style>