<template>
  <div class="flex">
    <span class="textStyle">任务统计</span>
    <div class="dataCard" @click="goToDSNTaskRecordPage">
      <div class="titleStyle">
        <span>DSN爬取任务</span>
      </div>
      <div class="wordStyle">
        <span>DSN爬虫任务数:</span>
        <span class="total-num">{{
          dsnTotalTaskNumber !== "" ? formatExactLargeNum(dsnTotalTaskNumber) : "加载中..."
        }}</span>
      </div>
      <div class="wordStyle">
        <span>任务执行成功统计:</span>
        <span class="total-num">{{
          dsnTaskSuccessNumber !== "" ? formatExactLargeNum(dsnTaskSuccessNumber) : "加载中..."
        }}</span>
      </div>
      <div class="wordStyle">
        <span>任务执行失败统计:</span>
        <span class="total-num">{{
          dsnTaskFailNumber !== "" ? formatExactLargeNum(dsnTaskFailNumber) : "加载中..."
        }}</span>
      </div>
      <div class="wordStyle">
        <span>错误率: {{ dsnErrorRate }} </span>
        <span class="total-num">{{ dsnErrorRate !== "" ? dsnErrorRate : "加载中..." }}</span>
      </div>
    </div>
    <div class="dataCard" @click="goToITUTaskRecordPage">
      <div class="titleStyle">
        <span>ITU爬取任务</span>
      </div>
      <div class="wordStyle">
        <span>ITU爬虫任务数:</span>
        <span class="total-num">{{
          ituTotalTaskNumber !== "" ? formatExactLargeNum(ituTotalTaskNumber) : "加载中..."
        }}</span>
      </div>
      <div class="wordStyle">
        <span>任务执行成功统计:</span>
        <span class="total-num">{{
          ituTaskSuccessNumber !== "" ? formatExactLargeNum(ituTaskSuccessNumber) : "加载中..."
        }}</span>
      </div>
      <div class="wordStyle">
        <span>任务执行失败统计:</span>
        <span class="total-num">{{
          ituTaskFailNumber !== "" ? formatExactLargeNum(ituTaskFailNumber) : "加载中..."
        }}</span>
      </div>
      <div class="wordStyle">
        <span>错误率:</span>
        <span class="total-num">{{ ituErrorRate !== "" ? ituErrorRate : "加载中..." }}</span>
      </div>
    </div>
    <div class="dataCard" @click="goToSTTaskRecordPage">
      <div class="titleStyle">
        <span>ST爬取任务</span>
      </div>
      <div class="wordStyle">
        <span>ST爬虫任务数:</span>
        <span class="total-num">{{
          stTotalTaskNumber !== "" ? formatExactLargeNum(stTotalTaskNumber) : "加载中..."
        }}</span>
      </div>
      <div class="wordStyle">
        <span>任务执行成功统计:</span>
        <span class="total-num">{{
          stTaskSuccessNumber !== "" ? formatExactLargeNum(stTaskSuccessNumber) : "加载中..."
        }}</span>
      </div>
      <div class="wordStyle">
        <span>采集速度:</span>
        <span class="total-num">{{
          stTaskFailNumber !== "" ? formatExactLargeNum(stTaskFailNumber) : "加载中..."
        }}</span>
      </div>
      <div class="wordStyle">
        <span>错误率:</span>
        <span class="total-num">{{ stErrorRate !== "" ? stErrorRate : "加载中..." }}</span>
      </div>
    </div>
  </div>
</template>

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

const router = useRouter();

const dsnTotalTaskNumber = ref("");
const dsnTaskSuccessNumber = ref("");
const dsnTaskFailNumber = ref("");
const dsnErrorRate = ref("");
const ituTotalTaskNumber = ref("");
const ituTaskSuccessNumber = ref("");
const ituTaskFailNumber = ref("");
const ituErrorRate = ref("");
const stTotalTaskNumber = ref("");
const stTaskSuccessNumber = ref("");
const stTaskFailNumber = ref("");
const stErrorRate = ref("");

const goToDSNTaskRecordPage = () => {
  router.push({
    path: "/osTaskInformation/list",
    query: {
      spiderType: "dsn_now",
      jump: "yes",
      page: "statusMonitor",
    },
  });
};
const goToITUTaskRecordPage = () => {
  router.push({
    path: "/osTaskInformation/list",
    query: {
      spiderType: "itu_space_explorer",
      jump: "yes",
      page: "statusMonitor",
    },
  });
};
const goToSTTaskRecordPage = () => {
  router.push({
    path: "/osTaskInformation/list",
    query: {
      spiderType: "api_spider",
      jump: "yes",
      page: "statusMonitor",
    },
  });
};

// 获取任务统计数据的方法
const getData = async () => {
  const res = await getAllSpiderTaskStatistics({});
  const dsnTask = await getSpiderTaskList({ spiders: "dsn_now" });
  const ituTask = await getSpiderTaskList({ spiders: "itu_space_explorer" });
  const stTask = await getSpiderTaskList({ spiders: "api_spider" });
  dsnTotalTaskNumber.value = dsnTask.data.length;
  dsnTaskSuccessNumber.value = res.data.dsn_now.successCount;
  dsnTaskFailNumber.value = res.data.dsn_now.failCount;
  dsnErrorRate.value = res.data.dsn_now.errorRate;
  ituTotalTaskNumber.value = ituTask.data.length;
  ituTaskSuccessNumber.value = res.data.itu_space_explorer.successCount;
  ituTaskFailNumber.value = res.data.itu_space_explorer.failCount;
  ituErrorRate.value = res.data.itu_space_explorer.errorRate;
  stTotalTaskNumber.value = stTask.data.length;
  stTaskSuccessNumber.value = res.data.space_track.successCount;
  stTaskFailNumber.value = res.data.space_track.failCount;
  stErrorRate.value = res.data.space_track.errorRate;
};
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 {
  color: #dff6ff;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  text-shadow: 0 0 8px rgba(100, 200, 255, 0.8);
  letter-spacing: 2px;
  margin-top: 10px;
}

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

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

.total-num {
  color: #4edaff;
  font-size: 16px;
  font-weight: 600;
  text-shadow: 0 0 10px rgba(0, 200, 255, 0.5);
  letter-spacing: 1px;
  margin-right: 30px;
}
</style>
