<template>
  <!-- 第一行：统计卡片行 -->
  <el-row :gutter="16" class="mb-4">
    <el-col :span="6">
      <ComparisonCard
        title="分类数量"
        :value="statsData.productCategoryCount"
        :todayCount="statsData.productCategoryTodayCount"
        icon="ep:menu"
        iconColor="text-blue-400"
        :loading="loading"
      />
    </el-col>
    <el-col :span="6">
      <ComparisonCard
        title="产品数量"
        :value="statsData.productCount"
        :todayCount="statsData.productTodayCount"
        icon="ep:box"
        iconColor="text-orange-400"
        :loading="loading"
      />
    </el-col>
    <el-col :span="6">
      <ComparisonCard
        title="设备数量"
        :value="statsData.deviceCount"
        :todayCount="statsData.deviceTodayCount"
        icon="ep:cpu"
        iconColor="text-purple-400"
        :loading="loading"
      />
    </el-col>
    <el-col :span="6">
      <ComparisonCard
        title="设备消息数"
        :value="statsData.deviceMessageCount"
        :todayCount="statsData.deviceMessageTodayCount"
        icon="ep:message"
        iconColor="text-teal-400"
        :loading="loading"
      />
    </el-col>
  </el-row>

  <!-- 第二行：图表行 -->
  <el-row :gutter="16" class="mb-4">
    <el-col :span="12">
      <DeviceCountCard :statsData="statsData" :loading="loading" />
    </el-col>
    <el-col :span="12">
      <DeviceStateCountCard :statsData="statsData" :loading="loading" />
    </el-col>
  </el-row>

  <!-- 第三行：消息统计行 -->
  <el-row class="mb-4">
    <el-col :span="24">
      <MessageTrendCard />
    </el-col>
  </el-row>

  <!-- 第四行：设备分布地图 -->
  <el-row>
    <el-col :span="24">
      <DeviceMapCard />
    </el-col>
  </el-row>
</template>

<script setup lang="ts" name="Index">
import { IotStatisticsSummaryRespVO, StatisticsApi } from '@/api/iot/statistics'
import ComparisonCard from './components/ComparisonCard.vue'
import DeviceCountCard from './components/DeviceCountCard.vue'
import DeviceStateCountCard from './components/DeviceStateCountCard.vue'
import MessageTrendCard from './components/MessageTrendCard.vue'
import DeviceMapCard from './components/DeviceMapCard.vue'

/** IoT 首页 */
defineOptions({ name: 'IoTHome' })

const statsData = ref<IotStatisticsSummaryRespVO>({
  productCategoryCount: -1,
  productCount: -1,
  deviceCount: -1,
  deviceMessageCount: -1,
  productCategoryTodayCount: -1,
  productTodayCount: -1,
  deviceTodayCount: -1,
  deviceMessageTodayCount: -1,
  deviceOnlineCount: -1,
  deviceOfflineCount: -1,
  deviceInactiveCount: -1,
  productCategoryDeviceCounts: {}
}) // 基础统计数据

const loading = ref(true) // 加载状态

/** 获取统计数据 */
const getStats = async () => {
  loading.value = true
  try {
    // 获取基础统计数据
    statsData.value = await StatisticsApi.getStatisticsSummary()
  } finally {
    loading.value = false
  }
}

/** 初始化 */
onMounted(() => {
  getStats()
})
</script>
