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