<template>
  <FormPage
    ref="formPage"
    :action-column="actionColumn"
    :left-tools="leftTools"
    :paging="paging">
    <template #searchFormItem="{searchForm}">
      <ElFormItem label="任务名称">
        <ElInput
          v-model="searchForm.taskName"
          placeholder="任务名称"/>
      </ElFormItem>
      <ElFormItem label="任务执行函数">
        <ElInput
          v-model="searchForm.fn"
          placeholder="任务执行函数"/>
      </ElFormItem>
      <ElFormItem label="调度方式">
        <ElSelect
          v-model="searchForm.scheduleType"
          clearable placeholder="请选择调度方式" style="width: 150px" @change="paging" @clear="paging">
          <ElOption v-for="item in scheduleTypeList" :key="item.value" :label="item.label" :value="item.value"/>
        </ElSelect>
      </ElFormItem>
      <ElFormItem label="内部任务">
        <ElCheckbox
          @change="research"
          v-model="searchForm.builtin"
          placeholder="内部任务"/>
      </ElFormItem>
      <ElFormItem v-if="!searchForm.builtin" label="状态">
        <ElSelect v-model="searchForm.disabled" clearable placeholder="请选择状态" style="width: 150px" @clear="paging">
          <ElOption :value="true" label="禁用"/>
          <ElOption :value="false" label="启用"/>
        </ElSelect>
      </ElFormItem>
    </template>
    <template #columns>
      <ElTableColumn label="任务名称" prop="taskName"/>

      <ElTableColumn label="任务执行函数" prop="fn" show-overflow-tooltip width="150"/>

      <ElTableColumn label="日志等级" prop="logLevelTxt"/>

      <ElTableColumn label="调度方式" prop="scheduleTypeTxt"/>

      <ElTableColumn label="调度配置" prop="scheduleConf"/>

      <ElTableColumn label="临界时间" prop="criticalTiming" width="170">
        <template #default="{row}">
          <span>
            {{ row.criticalTiming != null && row.criticalTiming > 0 ? Times.format(Times.parse(row.criticalTiming * 1000)) : '' }}
          </span>
        </template>
      </ElTableColumn>

      <ElTableColumn label="是否禁用" width="180">
        <template #default="scope">
          <span>
            {{ scope.row.disabled ? '是' : '否' }}
          </span>
        </template>
      </ElTableColumn>

      <ElTableColumn label="备注" prop="memo"/>
    </template>
    <TaskForm ref="taskForm" @edit-succ="research"/>
    <ScheduleRecodePanel ref="scheduleRecodePanel"/>
  </FormPage>
</template>
<script lang="ts" setup>
import TaskApi from '@/pages/sys/task/task-api.ts'
import TaskForm from '@/pages/sys/task/TaskForm.vue'
import ScheduleRecodePanel from '@/pages/sys/task/schedule-recode/ScheduleRecodePanel.vue'
import Times from '@/common/utils/times.ts'
import FormPage from '@/components/page/FormPage.vue'
import type {
  ActionColumnType,
  ToolType,
} from '@/components/page/a-page-type.ts'
import type { ComponentExposed } from 'vue-component-type-helpers'

const formPageIns = useTemplateRef<ComponentExposed<typeof FormPage>>('formPage')

function research() {
  formPageIns.value?.doSearch()
}

const taskFormIns = useTemplateRef<InstanceType<typeof TaskForm>>('taskForm')
const scheduleRecodePanelIns = useTemplateRef<InstanceType<typeof ScheduleRecodePanel>>('scheduleRecodePanel')
const scheduleTypeList = [
  {value: 'Manually', label: '手动'},
  {value: 'Fixed', label: '固定周期'},
  {value: 'Cron', label: '自定义'},
]


const actionColumn = reactive<ActionColumnType<TaskTypes.SearchTaskResult>>({
  tableActions: [
    {
      tooltip: '编辑',
      icon: 'Edit',
      show({row}) {
        return !row.builtin
      },
      action({row}) {
        taskFormIns.value?.open(row)
      },
    },
    {
      tooltip({row}) {
        return row.disabled ? '启用' : '禁用'
      },
      show({row}) {
        return !row.builtin
      },
      icon: 'Edit',
      action({row}) {
        return TaskApi.disable(row.id!, !row.disabled!)
          .then(() => {
            ElMessage.success(row.disabled ? '启用成功' : '禁用成功')
            return true
          })
      },
    },
    {
      tooltip: '执行一次',
      icon: 'Edit',
      show({row}) {
        return !row.disabled
      },
      action({row}) {
        TaskApi.trigger(row.id!)
          .then(() => {
            ElMessage.success('已提交触发请求')
          })
      },
    },
    {
      tooltip: '调度记录',
      icon: 'Edit',
      action({row}) {
        scheduleRecodePanelIns.value?.open(row.id!)
      },
    },
    {
      icon: 'Delete',
      loading: false,
      type: 'danger',
      tooltip: '删除',
      confirm: {
        title: '是否删除当前数据',
      },
      action({row}) {
        this.loading = true
        return TaskApi.del([ row.id! ])
          .then(() => {
            ElMessage.success('删除成功')
            return true
          })

      },
    },
  ],
})
const leftTools: ToolType[] = [
  {
    icon: 'Plus',
    label: '新建',
    action() {
      taskFormIns.value?.open()
    },
  },
]

function paging(param: TaskTypes.SearchTaskParam) {
  return TaskApi.paging(param)
}

</script>
