<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 }} 1230</span>
            </div>
            <div class="wordStyle">
                <span>采集的页面数量: {{ totalPageNumber }} 85</span>
            </div>
            <div class="wordStyle">
                <span>采集的目标数量: {{ totalTargetNumber }} 569</span>
            </div>
        </div>
        <div class="dataCard"  @click="goToTaskRecordPage">
            <div class="titleStyle">
                <span>任务执行统计</span>
            </div>
            <div class="wordStyle">
                <span>任务执行成功统计: {{ successTask }} 36</span>
            </div>
            <div class="wordStyle">
                <span>任务执行失败统计: {{ failTask }} 0</span>
            </div>
            <div class="wordStyle">
                <span>任务异常数统计: {{ unusualTask }} 1</span>
            </div>
        </div>
        <div class="dataCard">
            <div class="titleStyle">
                <span>性能统计</span>
            </div>
            <div class="wordStyle">
                <span>平均成功率: {{ speed }} 98%</span>
            </div>
            <div class="wordStyle">
                <span>平均错误率: {{ errorRate }} 0%</span>
            </div>
            <div class="wordStyle">
                <span>平均异常率: {{ errorRate }} 2%</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 goToAllDataPage = () => {
    router.push({
        path: '/osDataDisplay/list',
        query: {
            jump: 'yes',
            mode:'综合数据'
        }
    })
}

const goToTaskRecordPage = () => {
    router.push({
        path: '/osTaskRecord/list',
        query: {
            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>
