<template>
    <div class="flex gap-10">
        <div class="dataCard">
            <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">
            <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>平均异常率: {{ errorRate }}% </span>
            </div>
        </div>
    </div>

</template>

<script lang="ts" setup>
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: ''
    }
})
</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: 34px;
    margin-top: 3.5%;
    color: #FFFFFF;
}

.wordStyle {
    font-size: 24px;
    color: #FFFFFF;
}
</style>
