<template>
	<div class="flex gap-10">
		<span class="textStyle">QB数据管理</span>
		<div class="dataCard" @click="goToAllDataPage">
			<div class="titleStyle">
				<span>综合数据</span>
			</div>
			<div class="iconStyle" />
		</div>
		<div class="dataCard" @click="goToDSNDataPage">
			<div class="titleStyle">
				<span>DSN数据</span>
			</div>
			<div class="iconStyle" />
		</div>
		<div class="dataCard" @click="goToITUDataPage">
			<div class="titleStyle">
				<span>ITU数据</span>
			</div>
			<div class="iconStyle" />
		</div>
		<div class="dataCard" @click="goToSTDataPage">
			<div class="titleStyle">
				<span>ST数据</span>
			</div>
			<div class="iconStyle" />
		</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 goToAllDataPage = () => {
	router.push({
		path: '/osDataDisplay/list',
		query: {
			mode: '综合数据',
			jump: 'yes'
		}
	})
}
const goToDSNDataPage = () => {
	router.push({
		path: '/osDataDisplay/list',
		query: {
			mode: 'DSN数据',
			jump: 'yes'
		}
	})
}
const goToITUDataPage = () => {
	router.push({
		path: '/osDataDisplay/list',
		query: {
			mode: 'ITU数据',
			jump: 'yes'
		}
	})
}
const goToSTDataPage = () => {
	router.push({
		path: '/osDataDisplay/list',
		query: {
			mode: 'ST数据',
			jump: 'yes'
		}
	})
}
</script>

<style lang="scss" scoped>
.iconStyle {
	background-image: url("@/assets/picture/wenjianjia.png");
	background-size: 100% 120%;
	background-repeat: no-repeat;
	margin-top: 3%;
	display: flex;
	// border: 1.5px solid rgb(193, 188, 188);
	height: 50%;
	width: 50%;
}

.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: 260px;
	height: 100%;
	border-radius: 5px;
	display: flex;
	flex-direction: column;
	// justify-content: center;
	align-items: center;
}

.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>
