<template>
  <div class="flex">
    <span class="textStyle" :class="{ toRight0: slideState }">任务统计</span>
    <div class="dataCard" @click="goToDSNTaskRecordPage">
      <div class="titleStyle">
        <span>DSN爬取任务</span>
      </div>
      <div class="items">
        <div class="wordStyle">
          <span>DSN爬虫任务数(个):</span>
          <span class="total-num" v-if="dsnTotalTaskNumber !== null">{{
            formatExactLargeNum(dsnTotalTaskNumber) ?? '--'
          }}</span>
          <span class="loading" v-else></span>
        </div>
        <div class="wordStyle">
          <span>任务执行成功统计(个):</span>
          <span class="total-num" v-if="dsnTaskSuccessNumber !== null">{{
            formatExactLargeNum(dsnTaskSuccessNumber) ?? '--'
          }}</span>
          <span class="loading" v-else></span>
        </div>
        <div class="wordStyle">
          <span>任务执行失败统计(个):</span>
          <span class="total-num" v-if="dsnTaskFailNumber !== null">{{
            formatExactLargeNum(dsnTaskFailNumber) ?? '--'
          }}</span>
          <span class="loading" v-else></span>
        </div>
        <div class="wordStyle">
          <span>错误率: </span>
          <span class="total-num" v-if="dsnErrorRate !== null">{{
            `${Number(Math.ceil(dsnErrorRate * 100) / 100).toFixed(2)}%`
          }}</span>
          <span class="loading" v-else></span>
        </div>
      </div>
    </div>
    <div class="dataCard" @click="goToITUTaskRecordPage">
      <div class="titleStyle">
        <span>ITU爬取任务</span>
      </div>
      <div class="items">
        <div class="wordStyle">
          <span>ITU爬虫任务数(个):</span>
          <span class="total-num" v-if="ituTotalTaskNumber !== null">{{
            formatExactLargeNum(ituTotalTaskNumber) ?? '--'
          }}</span>
          <span class="loading" v-else></span>
        </div>
        <div class="wordStyle">
          <span>任务执行成功统计(个):</span>
          <span class="total-num" v-if="ituTaskSuccessNumber !== null">{{
            formatExactLargeNum(ituTaskSuccessNumber) ?? '--'
          }}</span>
          <span class="loading" v-else></span>
        </div>
        <div class="wordStyle">
          <span>任务执行失败统计(个):</span>
          <span class="total-num" v-if="ituTaskFailNumber !== null">{{
            formatExactLargeNum(ituTaskFailNumber) ?? '--'
          }}</span>
          <span class="loading" v-else></span>
        </div>
        <div class="wordStyle">
          <span>错误率:</span>
          <span class="total-num" v-if="ituErrorRate !== null">{{
            `${Number(Math.ceil(ituErrorRate * 100) / 100).toFixed(2)}%`
          }}</span>
          <span class="loading" v-else></span>
        </div>
      </div>
    </div>
    <div class="dataCard" @click="goToSTTaskRecordPage">
      <div class="titleStyle">
        <span>ST爬取任务</span>
      </div>
      <div class="items">
        <div class="wordStyle">
          <span>ST爬虫任务数(个):</span>
          <span class="total-num" v-if="stTotalTaskNumber !== null">{{
            formatExactLargeNum(stTotalTaskNumber) ?? '--'
          }}</span>
          <span class="loading" v-else></span>
        </div>
        <div class="wordStyle">
          <span>任务执行成功统计(个):</span>
          <span class="total-num" v-if="stTaskSuccessNumber !== null">{{
            formatExactLargeNum(stTaskSuccessNumber) ?? '--'
          }}</span>
          <span class="loading" v-else></span>
        </div>
        <div class="wordStyle">
          <span>任务执行失败统计(个):</span>
          <span class="total-num" v-if="stTaskFailNumber !== null">{{
            formatExactLargeNum(stTaskFailNumber) ?? '--'
          }}</span>
          <span class="loading" v-else></span>
        </div>
        <div class="wordStyle">
          <span>错误率:</span>
          <span class="total-num" v-if="stErrorRate !== null">{{
            `${Number(Math.ceil(stErrorRate * 100) / 100).toFixed(2)}%`
          }}</span>
          <span class="loading" v-else></span>
        </div>
      </div>
    </div>
    <div class="dataCard" @click="goToESATaskRecordPage">
      <div class="titleStyle">
        <span>ESA爬取任务</span>
      </div>
      <div class="items">
        <div class="wordStyle">
          <span>ESA爬虫任务数(个):</span>
          <span class="total-num" v-if="esaTotalCount !== null">{{ formatExactLargeNum(esaTotalCount) ?? '--' }}</span>
          <span class="loading" v-else></span>
        </div>
        <div class="wordStyle">
          <span>任务执行成功统计(个):</span>
          <span class="total-num" v-if="esaSuccessCount !== null">{{
            formatExactLargeNum(esaSuccessCount) ?? '--'
          }}</span>
          <span class="loading" v-else></span>
        </div>
        <div class="wordStyle">
          <span>任务执行失败统计(个):</span>
          <span class="total-num" v-if="esaFailCount !== null">{{ formatExactLargeNum(esaFailCount) ?? '--' }}</span>
          <span class="loading" v-else></span>
        </div>
        <div class="wordStyle">
          <span>错误率:</span>
          <span class="total-num" v-if="esaErrorRate !== null">{{
            `${Number(Math.ceil(esaErrorRate * 100) / 100).toFixed(2)}%`
          }}</span>
          <span class="loading" v-else></span>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useRouter } from 'vue-router'
import { getAllSpiderTaskStatistics } from '@/api/staticData'
import { onMounted, ref } from 'vue'
import { getAllTaskStatistics, getSpiderTaskList } from '@/api/spiderTask'
import { useSlideStateStore } from '@/store/slideState'
import { storeToRefs } from 'pinia'
import formatExactLargeNum from '@/utils/formatExactLargeNum'

const slideStateStore = useSlideStateStore()
const { slideState } = storeToRefs(slideStateStore)

const router = useRouter()

const dsnTotalTaskNumber = ref(null)
const dsnTaskSuccessNumber = ref(null)
const dsnTaskFailNumber = ref(null)
const dsnErrorRate = ref(null)
const ituTotalTaskNumber = ref(null)
const ituTaskSuccessNumber = ref(null)
const ituTaskFailNumber = ref(null)
const ituErrorRate = ref(null)
const stTotalTaskNumber = ref(null)
const stTaskSuccessNumber = ref(null)
const stTaskFailNumber = ref(null)
const stErrorRate = ref(null)
const esaTotalCount = ref(null)
const esaSuccessCount = ref(null)
const esaErrorRate = ref(null)
const esaFailCount = ref(null)

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: 'space_track',
      jump: 'yes',
      page: 'statusMonitor'
    }
  })
}

const goToESATaskRecordPage = () => {
  router.push({
    path: '/osTaskInformation/list',
    query: {
      spiderType: 'es_track_transmission',
      jump: 'yes',
      page: 'statusMonitor'
    }
  })
}

// 获取任务统计数据的方法
const getData = async () => {
  const res = await getAllSpiderTaskStatistics({})
  const tasks = [
    getSpiderTaskList({ spiders: 'itu_space_explorer' }),
    getSpiderTaskList({ spiders: 'dsn_now' }),
    getSpiderTaskList({ spiders: 'es_track_transmission' }),
    getSpiderTaskList({ spiders: 'space_track' })
  ]

  const [ituTask, dsnTask, esaTask, stTask] = await Promise.all(tasks)
  const allTask = await getAllTaskStatistics()

  dsnTotalTaskNumber.value = dsnTask.data.length
  dsnTaskSuccessNumber.value = res.data.dsn_now.successCount
  dsnTaskFailNumber.value = res.data.dsn_now.failCount
  esaErrorRate.value = res.data.es_track_transmission?.errorRate
  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
  esaTotalCount.value = esaTask.data.length
  esaSuccessCount.value = res.data.es_track_transmission?.successCount
  esaFailCount.value = res.data.es_track_transmission?.failCount
}
onMounted(() => {
  getData()
})
</script>

<style lang="scss" scoped>
.dataCard {
  background-image: url('@/assets/picture/box2.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 275px;
  height: 100%;
  border-radius: 5px;
  cursor: pointer;
}

.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: 15px;
}

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

.textStyle {
  writing-mode: vertical-lr;
  font-size: 22px;
  letter-spacing: 3px;
  color: #ffffff;
  font-weight: 500;
  transition: 0.2s;
}

.total-num {
  color: #4edaff;
  font-size: 14px;
  font-weight: 600;
  text-shadow: 0 0 10px rgba(0, 200, 255, 0.5);
  letter-spacing: 1px;
  margin-right: 30px;
  animation: visible 0.6s;
}

.toRight0 {
  transform: translateX(5px) !important;
}

.items {
  display: flex;
  flex-direction: column;
  padding-left: 15px;
  padding-top: 20px;
}

.loading {
  width: 40px;
  aspect-ratio: 2;
  margin-right: 30px;
  --_g: no-repeat radial-gradient(circle closest-side, #4edaff 90%, #0000);
  background:
    var(--_g) 0% 50%,
    var(--_g) 50% 50%,
    var(--_g) 100% 50%;
  background-size: calc(100% / 3) 50%;
  animation: l3 1s infinite linear;
}
@keyframes l3 {
  20% {
    background-position:
      0% 0%,
      50% 50%,
      100% 50%;
  }
  40% {
    background-position:
      0% 100%,
      50% 0%,
      100% 50%;
  }
  60% {
    background-position:
      0% 50%,
      50% 100%,
      100% 0%;
  }
  80% {
    background-position:
      0% 50%,
      50% 50%,
      100% 100%;
  }
}

@keyframes visible {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
</style>
