<!--
 * @Author: tengmingxue 1473375109@qq.com
 * @Date: 2023-09-13 10:06:22
 * @LastEditors: tengmingxue 1473375109@qq.com
 * @LastEditTime: 2023-09-15 17:27:10
 * @FilePath: \xld-gis-admin\src\views\dashboard\workbench\component\TopCardStatistic.vue
 * @Description: 统计卡片
-->
<template>
  <div class="card-statistic">
    <div class="card card1">
      <div class="data">
        <span class="label">数据容量</span>
        <span class="value">{{ dataSize }}TB</span>
      </div>
    </div>
    <div class="card card2">
      <div class="data">
        <span class="label">数据种类</span>
        <span class="value">{{ dataType }}类</span>
      </div>
    </div>
    <div class="card card3">
      <div class="data">
        <span class="label">支持分析</span>
        <span class="value">{{ analysisProject }}项目</span>
      </div>
    </div>
    <div class="card card4">
      <div class="data">
        <span class="label">支持数据</span>
        <span class="value">{{ supportNum }}次</span>
      </div>
    </div>
  </div>
</template>
  <script lang="ts">
import { defineComponent, onMounted, toRefs, onUnmounted, nextTick, reactive } from 'vue';
import { queryApiUseCountMouths } from '/@/api/interface/interface';

export default defineComponent({
  name: 'TopCardStatistic',
  components: {},
  props: {
    statisticData: {
      type: Array,
      default: () => [],
    },
  },

  setup(props) {
    const data = reactive({
      interval:null,
      statisticData: props.statisticData,
      dataSize: 10000,
      dataType: 5,
      analysisProject: 12,
      supportNum: 1092,
    });

    nextTick(() => {});
    /**
     * 查数据
     */
    const queryData = async () => {
      let supportNum = 0;
      const res = await queryApiUseCountMouths({});
      if (res) {
        res.nums.map((item) => {
          supportNum += parseInt(item);
        });
      }
      data.supportNum = supportNum;
    };

    onMounted(() => {
      if (data.interval) return;
      data.interval = setInterval(() => {
        queryData();
      }, 3000);
    });

    onUnmounted(() => {
      if (data.interval) clearInterval(data.interval);
    });

    return {
      ...toRefs(data),
      queryData,
    };
  },
});
</script>
  <style lang="less" scoped>
.card-statistic {
  height: 100%;
  width: 100%;
  display: flex;
  padding: 1rem 0;
  .card {
    display: flex;
    height: 100%;
    width: calc(100% - 3rem);
    margin: 0 3rem;
    justify-content: flex-end;
    align-items: center;
    background-size: 100% 100%;
    .data {
      height: 60%;
      width: 36%;
      .label {
        display: flex;
        width: 100%;
        height: 2rem;
        font-family: Source Han Sans CN;
        font-size: 1.112rem;
        font-weight: normal;
        line-height: normal;
        letter-spacing: 0em;
        color: #333333;
      }
      .value {
        display: flex;
        width: 100%;
        height: 2rem;
        font-family: Source Han Sans CN;
        font-size: 1.412rem;
        font-weight: bold;
        line-height: normal;
        letter-spacing: 0em;
        color: #333333;
      }
    }
  }
  .card1 {
    background-image: url('./images/data-size.png');
  }
  .card2 {
    background-image: url('./images/data-type.png');
  }
  .card3 {
    background-image: url('./images/support-analysis.png');
  }
  .card4 {
    background-image: url('./images/support-data.png');
  }
}
</style>
  