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(`InformationClassification/InformationClassificationEdit`);
  };

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

  const handleOK = (record, data) => {
    const titleCourse = record.status
      ? '您确定要禁用该用户吗? 禁用后该用户不能在后台登陆!'
      : '您确定要启用该用户吗? 启用后该用户将允许在后台登陆!';
    Modal.confirm({
      title: titleCourse,
      okText: '确认',
      cancelText: '取消',
      onOk() {
        publishNote(record.noteId, record.status ? 'off' : 'on').then((res) => {
          message.success('操作成功');
          actionRef.current.reload();
        });
      },
    });
  };
  const actions = () => [
    <Button key="add" type="primary" icon={<PlusOutlined />} onClick={() => gotoDetail()}>
      新增
    </Button>,
  ];
  const columns = [
    {
      title: '分类名',
      dataIndex: 'name',
      key: 'name',
      search: false,
    },

    {
      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: '操作',
      valueType: 'option',
      key: 'option',
      ellipsis: true,
      width: 200,
      render: (_, record) => [
        <Link key={2} to={`InformationClassification/InformationClassificationEdit`}>
          编辑
        </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>
  );
};