<template>
  <div v-loading="loading">
    <el-table :data="tableData" stripe border>
      <el-table-column type="index" label="#" align="center" />
      <el-table-column prop="className" label="任务类名" />
      <el-table-column prop="cronExpression" label="cron表达式" width="150px" align="center" />
      <el-table-column prop="status" label="状态" width="100px" align="center">
        <template #default="scope">
          <el-tag :type="scope.row.status ? 'success' : ('error' as any)" disable-transitions>{{
            scope.row.status ? '成功' : '失败'
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="operation" label="操作" align="center" width="150px">
        <template #default="scope">
          <span
            v-if="!scope.row.status"
            class="el-dropdown-link"
            @click="handleStartNow(scope.row)"
            style="color: #409eff; cursor: pointer; margin-top: 2px"
            >启动</span
          >
          <span
            v-else
            class="el-dropdown-link"
            @click="handleStopNow(scope.row)"
            style="color: #409eff; cursor: pointer; margin-top: 2px"
            >停用</span
          >

          <el-divider direction="vertical" />
          <span
            class="el-dropdown-link"
            @click="handleEdit(scope.row)"
            style="color: #409eff; cursor: pointer; margin-top: 2px"
            >编辑</span
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
  <executeDialog ref="executeRef" @comfirm="onConfirm" />
</template>

<script setup lang="ts">
import { getExecuteList, setExecuteStats, setExecuteCron } from '@/api/webApi'
import executeDialog from './components/executeDialog.vue'

const loading = ref(true)
const tableData = ref()
const executeRef = ref()

const handleStartNow = async (row: any) => {
  const res: any = await setExecuteStats({ className: row.className, status: 1 })
  if (res.code === 200) {
    init()
  }
}
const handleStopNow = async (row: any) => {
  const res: any = await setExecuteStats({ className: row.className, status: 0 })
  if (res.code === 200) {
    init()
  }
}

const handleEdit = (row: any) => {
  executeRef.value.form = row
  executeRef.value.show = true
}

const onConfirm = async (data: any) => {
  const res: any = await setExecuteCron({
    className: data.className,
    cronExpression: data.cronExpression
  })
  if (res.code === 200) {
    init()
  }
}

const init = async () => {
  loading.value = true
  const res: any = await getExecuteList()
  if (res.code === 200) {
    tableData.value = res.data
    loading.value = false
  }
}
init()
</script>

<style scoped></style>
