<template>
    <div>
        <el-card shadow="never">
            <el-button type="primary" @click="goTaskAdd" class="mb-[16px]">+添加</el-button>

            <el-table
                ref="paneTable"
                class="m-t-24"
                :data="pager.lists"
                v-loading="pager.loading"
                style="width: 100%"
            >
                <el-table-column prop="name" label="名称" min-width="200" />
                <el-table-column prop="types" label="分组" min-width="100" />
                <el-table-column prop="command" label="调用方法" min-width="160" />
                <el-table-column prop="rules" label="cron表达式" min-width="100" />
                <el-table-column prop="status" label="状态" min-width="100">
                    <template #default="{ row }">
                        <el-tag v-if="row.status == 1" type="success">运行中</el-tag>
                        <el-tag v-if="row.status == 2" type="info">已停止</el-tag>
                        <el-tag v-if="row.status == 3" type="danger">错误</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="error" label="错误信息" min-width="150" />
                <el-table-column prop="endTime" label="最后执行时间" min-width="180" />
                <el-table-column prop="taskTime" label="执行耗时(m/s)" min-width="100" />

                <el-table-column label="操作" min-width="120">
                    <template v-slot="scope">
                        <div class="flex">
                            <el-button
                                type="primary"
                                link
                                @click="goTaskEdit(scope.row.id)"
                                class="mr-4"
                                >编辑</el-button
                            >

                            <!-- 停止/开启 -->
                            <!-- <ls-dialog class="m-l-10 inline" :content="'确定要停止这个定时任务吗？请谨慎操作'" @confirm="onStop(scope.row)">
                                <el-button type="text"  slot="trigger">
                                    {{scope.row.status==1?'停止':'运行'}}
                                </el-button>
                        </ls-dialog>-->

                            <!-- 删除定时任务 -->
                            <ls-dialog
                                class="m-l-10 m-t-20 m-b-20 inline"
                                :content="'确定要停删除个定时任务吗？请谨慎操作'"
                                @confirm="onDel(scope.row.id)"
                            >
                                <template #trigger>
                                    <el-button type="primary" link slot="trigger">删除</el-button>
                                </template>
                            </ls-dialog>
                        </div>
                    </template>
                </el-table-column>
            </el-table>

            <!-- Footer Pagination Start -->
            <div class="flex justify-end mr-4">
                <pagination v-model="pager" @change="getLists" />
            </div>
            <!-- Footer Pagination End -->
        </el-card>
    </div>
</template>

<script lang="ts" setup>
import { apiCrontabLists, apiCrontabDel, apiSrontabOperate } from '@/api/setting/system'
import Pagination from '@/components/pagination/index.vue'
import { PageMode } from '@/utils/enum'
import LsDialog from '@/components/popup/index.vue'
import { usePaging } from '@/hooks/usePaging'

/** Data Start **/
const router = useRouter()

const { pager, getLists, resetPage, resetParams } = usePaging({
    fetchFun: apiCrontabLists,
    params: {}
})
/** Data End **/

/** Methods Start **/
const onStop = async (row: any) => {
    await apiSrontabOperate({
        id: row.id,
        operate: row.status == 1 ? 'stop' : 'start'
    })
    getLists()
}

// 删除这个定时任务
const onDel = async (id: any) => {
    await apiCrontabDel({ id: id })
    getLists()
}

// 新增
const goTaskAdd = () => {
    router.push({
        path: '/setting/system/task/edit',
        query: {
            mode: PageMode['ADD']
        }
    })
}

// 编辑
const goTaskEdit = (id: any) => {
    router.push({
        path: '/setting/system/task/edit',
        query: {
            id: id,
            mode: PageMode['EDIT']
        }
    })
}
/** Methods End **/

/** LifeCycle Start **/
getLists()
/** LifeCycle End **/
</script>

<style lang="scss"></style>
