<template>
  <div class="flex gap-10">
    <span class="textStyle">数据统计</span>
    <div class="dataCard" @click="goToAllDataPage">
      <div class="titleStyle">
        <span>数据统计</span>
      </div>
      <div class="wordStyle">
        <span>总数据量:</span>
        <span class="total-num">{{ totalDataNumber !== "" ? formatExactLargeNum(totalDataNumber) : "加载中..." }}</span>
      </div>
      <div class="wordStyle">
        <span>采集的页面数量:</span>
        <span class="total-num">
          {{ totalPageNumber !== "" ? formatExactLargeNum(totalPageNumber) : "加载中..." }}</span
        >
      </div>
      <div class="wordStyle">
        <span>采集的目标数量:</span>
        <span class="total-num">
          {{ totalTargetNumber !== "" ? formatExactLargeNum(totalTargetNumber) : "加载中..." }}</span
        >
      </div>
    </div>
    <div class="dataCard" @click="goToTaskRecordPage">
      <div class="titleStyle">
        <span>任务执行统计</span>
      </div>
      <div class="wordStyle">
        <span>任务执行成功统计:</span>
        <span class="total-num">{{ successTask !== "" ? formatExactLargeNum(successTask) : "加载中..." }}</span>
      </div>
      <div class="wordStyle">
        <span>任务执行失败统计:</span>
        <span class="total-num">{{ failTask !== "" ? formatExactLargeNum(failTask) : "加载中..." }}</span>
      </div>
      <div class="wordStyle">
        <span>任务异常数统计:</span>
        <span class="total-num">{{ unusualTask !== "" ? formatExactLargeNum(unusualTask) : "加载中..." }}</span>
      </div>
    </div>
    <div class="dataCard">
      <div class="titleStyle">
        <span>性能统计</span>
      </div>
      <div class="wordStyle">
        <span>平均成功率:</span>
        <span class="total-num"> {{ speed !== "" ? speed : "加载中..." }}</span>
      </div>
      <div class="wordStyle">
        <span>平均错误率: </span>
        <span class="total-num">{{ errorRate !== "" ? errorRate : "加载中..." }}</span>
      </div>
      <div class="wordStyle">
        <span>平均异常率:</span>
        <span class="total-num">{{ unusualRate !== "" ? unusualRate : "加载中..." }}</span>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useRouter } from "vue-router";
import { getStatsDataList, getSpiderTaskList, getPerformanceList } from "@/api/staticData";
import { onMounted, ref } from "vue";
import formatExactLargeNum from "@/utils/formatExactLargeNum";

const router = useRouter();
const totalDataNumber = ref("");
const totalPageNumber = ref("");
const totalTargetNumber = ref("");
const successTask = ref("");
const failTask = ref("");
const unusualTask = ref("");
const speed = ref("");
const errorRate = ref("");
const unusualRate = ref("");

const goToAllDataPage = () => {
  router.push({
    path: "/osDataDisplay/list",
    query: {
      jump: "yes",
      mode: "DSN数据",
    },
  });
};

const goToTaskRecordPage = () => {
  router.push({
    path: "/osTaskRecord/list",
    query: {
      jump: "yes",
      mode: "状态监控",
    },
  });
};

// 获取数据统计数据的方法
const getData = async () => {
  const staticData = await getStatsDataList({});
  const spiderTask = await getSpiderTaskList({});
  const performance = await getPerformanceList({});
  totalDataNumber.value = staticData.data.totalData;
  totalPageNumber.value = staticData.data.ituPage;
  totalTargetNumber.value = staticData.data.spaceTrackItemCount;
  successTask.value = spiderTask.data.successCount;
  failTask.value = spiderTask.data.failCount;
  unusualTask.value = spiderTask.data.exceptionCount;
  speed.value = performance.data.success;
  errorRate.value = performance.data.error;
  unusualRate.value = performance.data.exception;
};

onMounted(() => {
  getData();
});
</script>

<style lang="scss" scoped>
.dataCard {
  background-image: url("@/assets/picture/box2.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  // background: #c6ebfc;
  // border: 1.5px solid rgb(193, 188, 188);
  width: 360px;
  height: 100%;
  border-radius: 5px;
}

.titleStyle {
  font-size: 20px;
  margin-top: 5%;
  color: #ffffff;
}

.wordStyle {
  font-size: 18px;
  color: #ffffff;
  margin-top: 2%;
  display: flex;
  margin-left: 15px;
  display: flex;
  justify-content: space-between;
}

.textStyle {
  writing-mode: vertical-lr;
  font-size: 26px;
  letter-spacing: 3px;
  margin-left: 0.5%;
  color: #ffffff;
  font-weight: 500;
  // display: flex;
}

.total-num {
  margin-right: 30px;
  color: skyblue;
}
</style>
