import {
  aliasTextInput,
  amisRender,
  commonInfo,
  crudCommonOptions,
  filterableField,
  flinkJobDialog,
  flinkJobIdTextInput,
  mappingField,
  paginationCommonOptions,
  tableMetaDialog,
  versionUpdateStateMapping,
} from '../../util/amis.tsx'

function Version() {
  return (
    <div className="hudi-version">
      {amisRender(
        {
          type: 'wrapper',
          body: [
            {
              type: 'crud',
              api: {
                method: 'get',
                url: `${commonInfo.baseUrl}/version_update/list`,
                data: {
                  page: '${page|default:undefined}',
                  count: '${perPage|default:undefined}',
                  order: '${orderBy|default:undefined}',
                  direction: '${orderDir|default:undefined}',
                  search_flink_job_id: '${flinkJobId|default:undefined}',
                  search_alias: '${alias|default:undefined}',
                  search_version: '${version|default:undefined}',
                  filter_schedules: '${updated|default:undefined}',
                },
              },
              data: {
                now: '${DATETOSTR(DATEMODIFY(NOW(), -1, \'days\'), \'YYYYMMDD\')}',
              },
              ...crudCommonOptions(),
              interval: 10000,
              filter: {
                mode: 'inline',
                title: '表筛选',
                body: [
                  {
                    type: 'group',
                    body: [
                      {
                        ...flinkJobIdTextInput('c5cac9d3-844a-4d86-b2c5-0c10f2283667'),
                        size: 'md',
                      },
                      {
                        ...aliasTextInput('c5cac9d3-844a-4d86-b2c5-0c10f2283667'),
                        size: 'md',
                      },
                      {
                        type: 'input-date',
                        name: 'version',
                        label: '版本',
                        clearable: true,
                        placeholder: '通过版本搜索',
                        size: 'md',
                        format: 'YYYYMMDD',
                        inputFormat: 'YYYYMMDD',
                        value: '${now}',
                      },
                    ],
                  },
                ],
                actions: [
                  {
                    type: 'submit',
                    level: 'primary',
                    label: '查询',
                  },
                  {
                    type: 'reset',
                    label: '重置',
                  },
                ],
              },
              filterTogglable: true,
              filterDefaultVisible: true,
              perPage: 20,
              headerToolbar: [
                'reload',
                'filter-toggler',
                {
                  type: 'tpl',
                  tpl: '共 <span class=\'text-primary font-bold\'>${total|default:0}</span> 个表，其中 <span class=\'text-success font-bold\'>${scheduled|default:0}</span> 个表已跨天，<span class=\'text-danger font-bold\'>${unScheduled|default:0}</span> 个表未跨天',
                },
                paginationCommonOptions(),
              ],
              footerToolbar: [
                paginationCommonOptions(),
              ],
              columns: [
                {
                  label: 'Flink job id',
                  width: 195,
                  fixed: 'left',
                  type: 'wrapper',
                  size: 'none',
                  body: [
                    {
                      type: 'action',
                      level: 'link',
                      label: '${flinkJobId}',
                      size: 'xs',
                      actionType: 'dialog',
                      tooltip: '查看详情',
                      dialog: flinkJobDialog(),
                    },
                    {
                      type: 'action',
                      level: 'link',
                      label: '',
                      icon: 'fa fa-copy',
                      size: 'xs',
                      actionType: 'copy',
                      content: '${flinkJobId}',
                      tooltip: '复制 ID',
                    },
                  ],
                },
                {
                  label: '别名',
                  type: 'wrapper',
                  fixed: 'left',
                  size: 'none',
                  className: 'nowrap',
                  body: [
                    {
                      type: 'action',
                      level: 'link',
                      label: '${tableMeta.alias}',
                      size: 'xs',
                      actionType: 'dialog',
                      tooltip: '查看详情',
                      dialog: tableMetaDialog(),
                    },
                    {
                      type: 'action',
                      level: 'link',
                      label: '',
                      icon: 'fa fa-copy',
                      size: 'xs',
                      actionType: 'copy',
                      content: '${tableMeta.alias}',
                      tooltip: '复制别名',
                    },
                  ],
                },
                {
                  name: 'priority',
                  label: '表优先级',
                  align: 'center',
                  width: 75,
                  sortable: true,
                }, {
                  name: 'version',
                  label: '版本',
                  align: 'center',
                  width: 75,
                },
                {
                  name: 'updated',
                  label: '状态',
                  align: 'center',
                  ...mappingField('updated', versionUpdateStateMapping),
                  filterable: filterableField(versionUpdateStateMapping, true),
                  width: 70,
                },
              ],
            },
          ],
        },
      )}
    </div>
  )
}

export default Version