import React, { useRef } from 'react';
import Table, { ProColumns, ActionType } from '@/components/Table';
import { Image } from 'antd';
import DeleteButton from '@/components/Table/DeleteButton';
import { history, Link } from 'umi';
import RoutePath from '@/routes/routePath';
import { queryWorkList, deleteWork } from '@/services/work';
import { fetchTableData } from '@/utils/table';
import TimeText from '@/components/Typography/TimeText';

const WorkList = () => {
  const tableRef = useRef<ActionType>();
  const handleDelete = async (id) => {
    await deleteWork({ id });
    tableRef.current?.reload();
  };
  const columns: ProColumns<any>[] = [
    {
      title: 'ID',
      dataIndex: 'id',
      width: '10%',
      hideInSearch: true,
    },
    {
      title: '封面',
      dataIndex: 'url',
      valueType: 'image',
      hideInSearch: true,
      width: '20%',
      render: (_, row) => {
        return <Image src={row.cover_resource?.url} height={100} alt="" />;
      },
    },

    {
      title: '标题',
      dataIndex: 'title',
      ellipsis: true,
    },
    {
      title: '系列',
      dataIndex: 'series',
      width: '10%',
      hideInSearch: true,
    },
    {
      title: '等级',
      dataIndex: 'rarity_name',
      width: '10%',
      hideInSearch: true,
    },
    {
      title: '创建时间',
      dataIndex: 'created_at',
      valueType: 'dateRange',
      width: '20%',
      hideInSearch: true,
      render: (_, row) => {
        return <TimeText value={row.created_at} />;
      },
    },
    {
      title: '操作',
      valueType: 'option',
      width: 150,
      render: (_, row) => [
        <Link to={`${RoutePath.WORK.EDIT}?id=${row.id}`}>详情</Link>,
        <DeleteButton
          onDelete={() => {
            handleDelete(row.id);
          }}
        />,
      ],
    },
  ];
  return (
    <Table
      columns={columns}
      // indexColumn
      rowKey="id"
      actionRef={tableRef}
      toolBarActions={[
        {
          type: 'add',
          onConfirm: () => {
            history.push(RoutePath.WORK.EDIT);
          },
        },
      ]}
      request={async (params) => {
        return fetchTableData(queryWorkList, params);
      }}
    />
  );
};

export default WorkList;