<!-- 任务执行统计卡片组件 -->
<template>
    <div class="taskCard  p-7" v-for="i in options" :key="i.value">
        <div class="flex justify-center">
            <el-form-item>
                <span class="titleStyle">任务名称</span>
            </el-form-item>
        </div>
        <div class="flex justify-center">
            <el-form-item>
                <el-button type="primary">编辑</el-button>
                <el-button type="success">执行记录</el-button>
                <el-button type="danger">删除</el-button>
            </el-form-item>
        </div>
        <div class="wordStyle flex justify-center">
            <el-form-item>
                <el-space>
                    <span class="wordStyle">启用/停止: </span>
                    <el-switch v-model="taskSwitch" />
                    <span class="wordStyle">执行频率: {{ successTask }} </span>
                </el-space>
            </el-form-item>
        </div>
        <div class="wordStyle flex justify-center">
            <el-form-item>
                <el-space>
                    <span class="wordStyle">执行次数: {{ failTask }} 个; </span>
                    <span class="wordStyle">成功次数: {{ failTask }} 个</span>
                </el-space>
            </el-form-item>
        </div>
        <div class="wordStyle flex justify-center">
            <el-form-item>
                <el-space>
                    <span class="wordStyle">失败次数: {{ failTask }} 个; </span>
                    <span class="wordStyle">异常记录: {{ unusualTask }} 个</span>
                </el-space>
            </el-form-item>
        </div>


    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
defineProps({
    successTask: {
        type: String,
        default: ''
    },
    failTask: {
        type: String,
        default: ''
    },
    unusualTask: {
        type: String,
        default: ''
    }
})
const taskSwitch = ref(false)
const options = [
    {
        value: 'year',
        label: '近一年',
    },
    {
        value: 'month',
        label: '近一月',
    },
    {
        value: 'week',
        label: '近一周',
    },
    {
        value: 'day',
        label: '近一日',
    },
    {
        value: 'year',
        label: '近一年',
    },
    {
        value: 'month',
        label: '近一月',
    },
]
</script>

<style lang="scss" scoped>
.taskCard {
    background-image: url("@/assets/picture/box2.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin-bottom: 20px;
    width: 380px;
    font-size: 20px;
    height: 100%;
    border-radius: 7px;

    .titleStyle {
        font-size: 22px;
        margin-top: -5px;
        color: #FFFFFF;
    }

    .wordStyle {
        font-size: 16px;
        color: #FFFFFF;

    }
}

.el-button:focus {
    outline: none;
}
</style>
