<template>
  <div style="padding: 10px">
    <PageContainer>
      <Row :gutter="24">
        <Col :span="8" v-for="item in StatusData" :key="item[0].type">
          <TopCard
            :title="item[0].label"
            :img="getImage(`/DataCollect/dashboard/${item[0].type}.png`)"
            :footer="item"
            :value="item[0].total"
          />
        </Col>
      </Row>
      <Row :gutter="24" style="margin-top: 24px">
        <Col :span="24">
          <Card />
        </Col>
      </Row>
    </PageContainer>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted } from 'vue';
  import TopCard from './components/TopCard.vue';
  import Card from './components/Card.vue';
  import { getImage } from '@jdlinker/utils';
  import { queryCount } from '../../../api/data-collect/dashboard';
  import { defaultParams, statusData } from './tool';
  // @ts-ignore
  import { PageContainer, Row, Col } from 'linker-ui-components';

  const StatusData = ref(statusData);
  const getNumberData = () => {
    StatusData.value.forEach(async (item: any) => {
      const res = await queryCount(item[0].type, {});
      const resp = await queryCount(item[0].type, defaultParams);
      item[0].total = res?.result;
      item[0].value = resp?.result;
    });
  };
  onMounted(() => {
    getNumberData();
  });
</script>

<style lang="less" scoped>
  .jeecg-layout-content .full {
    padding: 10px !important;
  }
</style>
