<template>
	<div class="flex gap-10">
		<span class="textStyle">任务统计</span>
		<div class="dataCard" @click="goToDSNTaskRecordPage">
			<div class="titleStyle">
				<span>DSN爬取任务</span>
			</div>
			<div class="wordStyle">
				<span>任务采集目标数: {{ totalDataNumber }} 638</span>
			</div>
			<div class="wordStyle">
				<span>任务执行成功统计: {{ totalPageNumber }} 79</span>
			</div>
			<div class="wordStyle">
				<span>采集速度: {{ totalTargetNumber }} 324</span>
			</div>
			<div class="wordStyle">
				<span>错误率: {{ totalTargetNumber }} 1%</span>
			</div>
		</div>
		<div class="dataCard" @click="goToITUTaskRecordPage">
			<div class="titleStyle">
				<span>ITU爬取任务</span>
			</div>
			<div class="wordStyle">
				<span>任务采集目标数: {{ totalDataNumber }} 148</span>
			</div>
			<div class="wordStyle">
				<span>任务执行成功统计: {{ totalPageNumber }} 98</span>
			</div>
			<div class="wordStyle">
				<span>采集速度: {{ totalTargetNumber }} 322</span>
			</div>
			<div class="wordStyle">
				<span>错误率: {{ totalTargetNumber }} 1%</span>
			</div>
		</div>
		<div class="dataCard" @click="goToSTTaskRecordPage">
			<div class="titleStyle">
				<span>ST爬取任务</span>
			</div>
			<div class="wordStyle">
				<span>任务采集目标数: {{ totalDataNumber }} 136</span>
			</div>
			<div class="wordStyle">
				<span>任务执行成功统计: {{ totalPageNumber }} 86</span>
			</div>
			<div class="wordStyle">
				<span>采集速度: {{ totalTargetNumber }} 342</span>
			</div>
			<div class="wordStyle">
				<span>错误率: {{ totalTargetNumber }} 0%</span>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { useRouter } from 'vue-router'
const router = useRouter()
defineProps({
	totalDataNumber: {
		type: String,
		default: ''
	},
	totalPageNumber: {
		type: String,
		default: ''
	},
	totalTargetNumber: {
		type: String,
		default: ''
	},
	successTask: {
		type: String,
		default: ''
	},
	failTask: {
		type: String,
		default: ''
	},
	unusualTask: {
		type: String,
		default: ''
	},
	speed: {
		type: String,
		default: ''
	},
	errorRate: {
		type: String,
		default: ''
	}
})

const goToDSNTaskRecordPage = () => {
	router.push({
		path: '/osTaskRecord/list',
		query: {
			mode: 'dsn',
			jump: 'yes'
		}
	})
}
const goToITUTaskRecordPage = () => {
	router.push({
		path: '/osTaskRecord/list',
		query: {
			mode: 'itu',
			jump: 'yes'

		}
	})
}
const goToSTTaskRecordPage = () => {
	router.push({
		path: '/osTaskRecord/list',
		query: {
			mode: 'st',
			jump: 'yes'

		}
	})
}
</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>
