import { history, Link } from 'umi';
import { useRef } from 'react';
import { Button, Modal, message, Popconfirm, Tooltip } from 'antd';
import { PlusOutlined, QuestionCircleOutlined } from '@ant-design/icons';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import ProTable, { TableDropdown } from '@ant-design/pro-table';

export default (props) => {
  const dataSource = [
    {
      id: 9,
      key: '1',
      name: '胡彦斌',
      age: 32,
      zz: '西湖区湖底公园1号',
    },
  ];

  // 测试内容👆-------------------------

  const actionRef = useRef();
  const gotoDetail = (id) => {
    history.push(`InformationList/InformationListEdit`);
  };

  const handleDelete = (e) => {
    deleteNote(e.noteId).then((res) => {
      message.success('删除成功');
      actionRef.current.reload();
    });
  };

  const actions = () => [
    <Button key="add" type="primary" icon={<PlusOutlined />} onClick={() => gotoDetail()}>
      新增
    </Button>,
  ];

  const columns = [
    {
      title: '分类名',
      key: 'typeName',
      dataIndex: 'typeName',
      search: false,
    },
    {
      title: '资讯标题',
      dataIndex: 'title',
      key: 'title',
      search: false,
    },
    {
      title: '封面',
      key: 'thumb',
      dataIndex: 'thumb',
      search: false,
      render: (t) => <img src={t} alt="" width={110} />,
    },
    {
      title: (
        <>
          创建时间
          <Tooltip placement="top">
            <QuestionCircleOutlined style={{ marginLeft: 4 }} />
          </Tooltip>
        </>
      ),
      // hideInTable: true,
      search: false,
      key: 'createdAt',
      dataIndex: 'createdAt',
      valueType: 'date',
      // render: (t) => formatterTime(t),
      sorter: (a, b) => a.createdAt - b.createdAt, //时间排序
    },
    {
      title: '状态',
      dataIndex: 'status',
      // initialValue: 'all',
      key: 'status',
      valueEnum: {
        0: { text: '已发布', status: 'Success' },
        1: { text: '未发布', status: 'Error' },
      },
    },

    {
      title: '操作',
      valueType: 'option',
      key: 'option',
      ellipsis: true,
      width: 200,
      render: (_, record) => [
        <Link key={2} to={`InformationList/InformationListEdit`}>
          编辑
        </Link>,
        <Popconfirm
          key={3}
          title="您是否确认删除 ?"
          onConfirm={() => handleDelete(record)}
          okText="确定"
          cancelText="取消"
        >
          <a href="#">删除</a>
        </Popconfirm>,
      ],
    },
  ];

  return (
    <PageHeaderWrapper>
      <ProTable
        dataSource={dataSource}
        columns={columns}
        // request={getNoteList} 请求
        // rowKey="noteId"
        search={false}
        options={false}
        toolBarRender={actions}
        actionRef={actionRef}
      />
    </PageHeaderWrapper>
  );
};