<template>
	<div class="overview">
		<OverviewCard class="overview_item" v-for="dataItem in data" :dataItem :key="dataItem.item" />
	</div>
</template>
<script setup>
import { toRef } from 'vue';
import OverviewCard from './OverviewCard.vue';

const props = defineProps({
	data: {
		required: true,
		type: Array,
		default() {
			return [];
		},
		validator: (array) => {
			return array.every((item) => {
				// 检查每个对象是否具有 icon、title 和 count 属性
				if (!('icon' in item) || !('title' in item) || !('count' in item)) return false;

				// 检查 icon 和 title 是否是一个字符串，count 是否是一个数字
				if (
					typeof item.icon !== 'string' ||
					typeof item.title !== 'string' ||
					typeof item.count !== 'number'
				)
					return false;

        if ('hide' in item && typeof item.hide !== 'boolean') return false;

        if ('unit' in item && typeof item.unit !== 'string') return false;

				// 如果存在 errorIcon，检查它是否是一个字符串
				if ('errorIcon' in item && typeof item.errorIcon !== 'string') return false;

				// 如果存在 errorCount，检查它是否是一个数字
				if ('errorCount' in item && typeof item.errorCount !== 'number') return false;

				return true;
			});
		}
	}
});
const data = toRef(() => props.data);
</script>
<script></script>
<style scoped lang="less">
@card-border-color: #f0f2f4;
@card-width: 223px;

.overview {
	display: grid;
	gap: 16px;
	overflow-x: auto;
	padding: 20px;
	background: #ffffff;
	user-select: none;

	@media screen and (max-width: 1220px), screen and (min-width: 1921px) {
		display: flex; /* 一行显示 */
		flex-wrap: nowrap; /* 不换行 */
		overflow-x: auto; /* 水平滚动 */
	}

	@media screen and (min-width: 1221px) and (max-width: 1440px) {
		grid-template-columns: repeat(4, minmax(0, 1fr)); /* 固定4列 */
	}

	@media screen and (min-width: 1441px) and (max-width: 1920px) {
		grid-template-columns: repeat(5, minmax(0, 1fr)); /* 固定5列 */
	}
}

.overview_item {
	border-right: 1px solid @card-border-color;

	&:last-child {
		border-right: none;
	}

	@media screen and (max-width: 1220px), screen and (min-width: 1921px) {
		min-width: @card-width; /* 列宽固定 */
	}

	@media screen and (min-width: 1221px) and (max-width: 1440px) {
		&:nth-child(4n) {
			border-right: none;
		}
	}

	@media screen and (min-width: 1441px) and (max-width: 1920px) {
		&:nth-child(5n) {
			border-right: none;
		}
	}
}
</style>
