import React from 'react'
import {amisRender, commonInfo, crudCommonOptions, paginationTemplate, remoteMappings, time} from '../../util/amis.tsx'
import {useNavigate} from 'react-router'

function TaskScheduleList() {
  const navigate = useNavigate()
  return (
    <div className="task-schedule-list">
      {amisRender(
        {
          type: 'page',
          title: '定时任务',
          body: [
            {
              type: 'crud',
              api: `get:${commonInfo.baseUrl}/task_schedule/list`,
              ...crudCommonOptions(),
              ...paginationTemplate(
                15,
                undefined,
                [
                  {
                    type: 'action',
                    label: '',
                    icon: 'fa fa-plus',
                    tooltip: '添加定时任务',
                    tooltipPlacement: 'top',
                    onEvent: {
                      click: {
                        actions: [
                          {
                            actionType: 'custom',
                            // @ts-ignore
                            script: (context, action, event) => {
                              navigate('/task/schedule/save')
                            },
                          },
                        ],
                      },
                    },
                  },
                ],
              ),
              loadDataOnce: true,
              columns: [
                {
                  name: 'templateName',
                  label: '模板名称',
                  width: 150,
                },
                {
                  name: 'templateDescription',
                  label: '模板描述',
                },
                {
                  name: 'cron',
                  label: '定时策略',
                  width: 150,
                },
                {
                  name: 'status',
                  label: '状态',
                  width: 100,
                  ...remoteMappings('trigger_status', 'status'),
                },
                {
                  name: 'previousFireTime',
                  label: '上次启动时间',
                  width: 150,
                  align: 'center',
                  ...time('previousFireTime'),
                },
                {
                  name: 'nextFireTime',
                  label: '下次启动时间',
                  width: 150,
                  align: 'center',
                  ...time('nextFireTime'),
                },
                {
                  type: 'operation',
                  label: '操作',
                  width: 150,
                  buttons: [
                    {
                      visibleOn: 'status !== \'PAUSED\' ',
                      type: 'action',
                      label: '暂停',
                      level: 'link',
                      actionType: 'ajax',
                      api: `get:${commonInfo.baseUrl}/task_schedule/pause/\${key}`,
                      confirmText: '确认暂停定时任务<span class="text-lg font-bold mx-2">${templateName}</span>？',
                      confirmTitle: '暂停',
                    },
                    {
                      visibleOn: 'status === \'PAUSED\' ',
                      type: 'action',
                      label: '恢复',
                      level: 'link',
                      actionType: 'ajax',
                      api: `get:${commonInfo.baseUrl}/task_schedule/resume/\${key}`,
                      confirmText: '确认恢复定时任务<span class="text-lg font-bold mx-2">${templateName}</span>？',
                      confirmTitle: '恢复',
                    },
                    {
                      className: 'text-danger btn-deleted',
                      type: 'action',
                      label: '删除',
                      level: 'link',
                      actionType: 'ajax',
                      api: `get:${commonInfo.baseUrl}/task_schedule/remove/\${key}`,
                      confirmText: '确认删除定时任务<span class="text-lg font-bold mx-2">${templateName}</span>？',
                      confirmTitle: '删除',
                    },
                  ],
                },
              ],
            },
          ],
        },
      )}
    </div>
  )
}

export default React.memo(TaskScheduleList)