<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>总数据量: {{ totalDataNumber }}</span>
			</div>
			<div class="wordStyle">
				<span>采集的页面数量: {{ totalPageNumber }}</span>
			</div>
			<div class="wordStyle">
				<span>采集的目标数量: {{ totalTargetNumber }}</span>
			</div>
		</div>
		<div class="dataCard" @click="goToTaskRecordPage">
			<div class="titleStyle">
				<span>任务执行统计</span>
			</div>
			<div class="wordStyle">
				<span>任务执行成功统计: {{ successTask }}</span>
			</div>
			<div class="wordStyle">
				<span>任务执行失败统计: {{ failTask }}</span>
			</div>
			<div class="wordStyle">
				<span>任务异常数统计: {{ unusualTask }}</span>
			</div>
		</div>
		<div class="dataCard">
			<div class="titleStyle">
				<span>性能统计</span>
			</div>
			<div class="wordStyle">
				<span>平均成功率: {{ speed }}</span>
			</div>
			<div class="wordStyle">
				<span>平均错误率: {{ errorRate }}</span>
			</div>
			<div class="wordStyle">
				<span>平均异常率: {{ 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';

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: 30px;
	margin-top: 5%;
	color: #FFFFFF;
}

.wordStyle {
	font-size: 20px;
	color: #FFFFFF;
	margin-top: 2%;
}

.textStyle {
	writing-mode: vertical-lr;
	font-size: 26px;
	letter-spacing: 3px;
	margin-left: 0.5%;
	color: #FFFFFF;
	// display: flex;
}
</style>
