<template>
	<div class="overview_card" v-if="!dataItem.hide">
		<div class="overview_card_body">
			<img class="card_icon" :src="dataItem.icon" :alt="dataItem.title" @error="handleImageError" />
			<div class="card_body_wrap">
				<div class="card_title">
					{{ dataItem.title }}
				</div>
				<div class="card_num">
					<div class="card_normal_wrap">
						<div class="normal_wrap_num">{{ formatNumber(dataItem.count) }}</div>
						<div class="normal_wrap_unit">{{ dataItem.unit }}</div>
					</div>
					<div class="card_error_wrap" v-if="dataItem?.errorCount > 0">
						<img :src="dataItem.errorIcon" alt="" />
						<div class="error_num">{{ dataItem.errorCount }}</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script setup>
import { toRef } from 'vue';
const props = defineProps({
	dataItem: {
		type: Object,
		required: true
	}
});

const dataItem = toRef(() => props.dataItem);

const formatNumber = (num) => {
  return isNaN(num) || num === undefined || num === null ? '-' : num;

};
const handleImageError = (e) => {
  throw new Error('Image load failed', e.target.src);
};
</script>

<style scoped lang="less">
.overview_card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 16px;
  gap: 8px;
  height: 88px;
  order: 3;
}
.overview_card_body {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: flex-start;
  gap: 16px;
  width: calc(100% - 32px);
  height: 56px;
}
.card_icon {
  width: 56px;
  height: 56px;
}
.card_body_wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 8px;
  height: 56px;
  flex-grow: 1;
}
.card_title,
.normal_wrap_unit {
  font-family: 'PingFang SC';
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  color: #3c4449;
  white-space: nowrap;
}
.card_num,
.card_normal_wrap {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 16px;
}
.card_normal_wrap {
  height: 30px;
  gap: 2px;
}
.normal_wrap_num {
  font-family: 'DINCond-Bold';
  font-style: normal;
  font-weight: 500;
  font-size: 30px;
  line-height: 30px;
  color: #3c4449;
}
.card_error_wrap {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  padding: 2px 8px 2px 4px;
  gap: 4px;
  width: 40px;
  height: 21px;
  background: rgba(230, 0, 18, 0.1);
  border-radius: 4px;
}
.error_num {
  font-family: 'PingFang SC';
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 17px;
  color: #ff4433;
}
</style>
