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

function TaskList() {
  const navigate = useNavigate()
  return (
    <div className="task-list">
      {amisRender(
        {
          type: 'page',
          title: '任务列表',
          body: [
            {
              type: 'crud',
              api: {
                method: 'post',
                url: `${commonInfo.baseUrl}/task/list`,
                data: {
                  page: {
                    index: '${page}',
                    size: '${perPage}',
                  },
                },
              },
              interval: 30000,
              ...crudCommonOptions(),
              ...paginationTemplate(
                15,
                undefined,
                [
                  {
                    type: 'action',
                    label: '',
                    icon: 'fa fa-plus',
                    actionType: 'dialog',
                    dialog: {
                      title: '创建任务',
                      body: {
                        type: 'form',
                        api: {
                          method: 'post',
                          url: `${commonInfo.baseUrl}/task/execute`,
                          data: {
                            templateId: '${templateId|default:undefined}',
                          },
                        },
                        ...horizontalFormOptions(),
                        body: [
                          {
                            name: 'templateId',
                            label: '名称',
                            required: true,
                            selectFirst: true,
                            ...remoteOptions('select', 'task_template_id'),
                          },
                        ],
                      },
                    },
                  },
                ],
              ),
              columns: [
                {
                  name: 'name',
                  label: '简称',
                  width: 150,
                },
                {
                  name: 'description',
                  label: '描述',
                },
                {
                  name: 'status',
                  label: '状态',
                  align: 'center',
                  width: 100,
                  ...remoteMappings('task_status', 'status'),
                },
                {
                  label: '进度',
                  type: 'progress',
                  width: 200,
                  value: '${ROUND(step * 100, 0)}',
                },
                {
                  label: '耗时',
                  type: 'tpl',
                  align: 'center',
                  width: 150,
                  tpl: "${IF(costText, costText, '/')}",
                },
                {
                  name: 'launchedTime',
                  label: '启动时间',
                  width: 150,
                  align: 'center',
                  ...time('launchedTime'),
                },
                {
                  name: 'finishedTime',
                  label: '结束时间',
                  width: 150,
                  align: 'center',
                  ...time('finishedTime'),
                },
                {
                  type: 'operation',
                  label: '操作',
                  width: 100,
                  buttons: [
                    {
                      type: 'action',
                      label: '详情',
                      level: 'link',
                      onEvent: {
                        click: {
                          actions: [
                            {
                              actionType: 'custom',
                              // @ts-ignore
                              script: (context, action, event) => {
                                navigate(`/task/detail/${context.props.data['id']}`)
                              },
                            },
                          ],
                        },
                      },
                    },
                    {
                      className: 'text-danger btn-deleted',
                      type: 'action',
                      label: '删除',
                      level: 'link',
                      actionType: 'ajax',
                      api: `get:${commonInfo.baseUrl}/task/remove/\${id}`,
                      confirmText: '确认删除任务记录<span class="text-lg font-bold mx-2">${name}</span>？',
                      confirmTitle: '删除',
                    },
                  ],
                },
              ],
            },
          ],
        },
      )}
    </div>
  )
}

export default React.memo(TaskList)