<!-- 任务执行统计卡片组件 -->
<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" @click="editTask" class="editButton">编辑</el-button>
                <el-button type="success">执行记录 </el-button>
                <el-button type="danger" @click="deleteTask">删除</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>

    <deleteDialog  v-model:dialogVisible="showDeleteDialog" @confirm="handleDeleteConfirm" @mode="deleteMode"/>

    <addTaskDialog v-model:dialogVisible="showTaskDialog" @confirm="handleEdit" :mode="editMode" />

</template>

<script lang="ts" setup>
import { ref } from 'vue'
import deleteDialog from '@/components/Delete/index.vue'
import addTaskDialog from './addTaskDialog.vue'
defineProps({
    successTask: {
        type: String,
        default: ''
    },
    failTask: {
        type: String,
        default: ''
    },
    unusualTask: {
        type: String,
        default: ''
    }
})
const editMode = ref('')
const deleteMode = ref('1')
const showDeleteDialog = ref(false)
const showTaskDialog = ref(false)
const taskSwitch = ref(false)
const options = [
    {
        value: 'year',
        label: '近一年',
    },
    {
        value: 'month',
        label: '近一月',
    },
    {
        value: 'week',
        label: '近一周',
    },
    {
        value: 'day',
        label: '近一日',
    },
    {
        value: 'year',
        label: '近一年',
    },
    {
        value: 'month',
        label: '近一月',
    },
]

const deleteTask = () => {
    deleteMode.value = '1'
    showDeleteDialog.value = true
}
const editTask = () => {
    editMode.value = '2'
    showTaskDialog.value = true
}
const handleEdit = () => {

}
const handleDeleteConfirm = () => {

}
</script>

<style lang="scss" scoped>
// .editButton{
//     background-image: url("@/assets/picture/box2.png");
//     background-size: 100% 100%;
//     background-repeat: no-repeat;
// }
// 任务卡片样式
.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>
