<template>
  <ATablePage
    ref="tablePage"
    v-bind="tablePageProps">
    <template #highFormItem="formData">
      <ElFormItem label="任务名称">
        <ElInput
          v-model="formData.taskName"
          placeholder="任务名称"/>
      </ElFormItem>
      <ElFormItem label="执行函数">
        <ElInput
          v-model="formData.fn"
          placeholder="执行函数"/>
      </ElFormItem>
      <ElFormItem label="调度方式">
        <ElSelect
          v-model="formData.scheduleType"
          clearable placeholder="请选择调度方式" @change="research" @clear="research">
          <ElOption v-for="item in scheduleTypeList" :key="item.value" :label="item.label" :value="item.value"/>
        </ElSelect>
      </ElFormItem>

      <ElFormItem v-if="!formData.builtin" label="状态">
        <ElSelect v-model="formData.disabled" clearable placeholder="请选择状态" @clear="research">
          <ElOption :value="true" label="禁用"/>
          <ElOption :value="false" label="启用"/>
        </ElSelect>
      </ElFormItem>

    </template>
    <template #simpleFormItem="formData">
      <ElFormItem>
        <ElSwitch v-model="formData.builtin"
          active-text="系统任务"
          inactive-text="用户任务"
          @change="research"/>
      </ElFormItem>
      <ElFormItem>
        <ElInput
          v-model="formData.taskName"
          placeholder="任务名称"/>
      </ElFormItem>
      <ElFormItem>
        <ElInput
          v-model="formData.fn"
          placeholder="任务执行函数"/>
      </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="是否禁用" prop="disabled" width="100">
        <template #default="{row}">
          <ElSwitch v-model="row.disabled" :disabled="row.builtin" @change="disabledUserHandler($event,row.id)"/>
        </template>
      </ElTableColumn>
      <ElTableColumn label="备注" prop="memo"/>
    </template>
    <TaskForm ref="taskForm" :research="research"/>
    <ScheduleRecodePanel ref="scheduleRecodePanel"/>
  </ATablePage>
</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 ATablePage, {
  type ATablePageInstance,
  buildTablePageProps,
} from '@/components/a-page/a-table-page/ATablePage.tsx'
import { ElMessage } from 'element-plus'

const taskFormIns = useTemplateRef<InstanceType<typeof TaskForm>>('taskForm')
const tablePageIns = useTemplateRef<ATablePageInstance>('tablePage')
const tablePageProps = buildTablePageProps<TaskTypes.SearchTaskParam, TaskTypes.SearchTaskResult>({
  pageLayout: {
    searchFormHeight: '64px',
  },
  searchForm: {
    highForm: {
      contentWidth: 200,
    },
    simpleForm: {
      colCount: 3,
    },
    paging: TaskApi.paging,
  },
  toolBar: {
    leftTools: [
      {
        icon: 'Plus',
        label: '新建',
        action() {
          taskFormIns.value?.open()
        },
      },
    ],
  },
  table: {
    actionColumn: {
      foldLimit: 4,
      tableActions: [
        {
          tooltip: '编辑',
          icon: 'Edit',
          type: 'success',
          show({row}) {
            return !row.builtin
          },
          action({row}) {
            taskFormIns.value?.open(row)
          },
        },
        {
          tooltip: '执行一次',
          icon: 'putongzhihang',
          type: 'primary',
          show({row}) {
            return !row.disabled
          },
          action({row}) {
            TaskApi.trigger(row.id!)
              .then(() => {
                ElMessage.success('已提交触发请求')
              })
          },
        },
        {
          tooltip: '调度记录',
          type: 'default',
          icon: 'zhihangjilu',
          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
              })

          },
        },
      ],
    },
  },
})

function disabledUserHandler(val: string | number | boolean, id: string) {
  TaskApi.disable(id, val as boolean)
    .then(() => {
      ElMessage.success(val ? '禁用成功' : '启用成功')
      research()
      return true
    })
}

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

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