import { getRegulationList, deleteRegulation } from '@/services/regulation';
import { PageContainer, ProTable } from '@ant-design/pro-components';
import { useRef, useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { queryTable } from '@/utils/request';
import { Button, message, Popconfirm } from 'antd';

const RegulationList = (props) => {
  const actionRef = useRef();
  const navigate = useNavigate();

  useEffect(() => {
    actionRef.current.reload();
  });

  const handleDelete = (id) => {
    if (id) {
      deleteRegulation(id).then((res) => {
        message.success('删除成功');
        actionRef.current.reload();
      });
    }
  };

  const columns = [
    {
      title: 'id',
      dataIndex: 'id',
      width: 200,
      search: false,
    },
    {
      title: '标题',
      dataIndex: 'title',
      width: 200,
      search: true,
    },

    {
      title: '内容',
      dataIndex: 'detail',
      width: 200,
      search: false,
    },

    {
      title: '发布人',
      dataIndex: 'create_person',
      width: 200,
      search: false,
    },
    {
      title: '发布时间',
      dataIndex: 'create_date',
      width: 200,
      search: false,
    },
    {
      title: '操作',
      valueType: 'option',
      width: 200,
      render: (_, record) => [
        <Button
          key={2}
          style={{ padding: 0 }}
          type="link"
          onClick={() => {
            console.log(record, ']]');
            navigate(`/cms/regulation/add?id=${record.id}`);
          }}
        >
          编辑
        </Button>,

        <Popconfirm
          key={3}
          title="您是否确认删除 ?"
          onConfirm={() => handleDelete(record.id)}
          okText="确定"
          cancelText="取消"
        >
          {/* manualPush */}
          <Button style={{ padding: 0 }} type="link">
            删除
          </Button>
        </Popconfirm>,
      ],
    },
  ];

  return (
    <PageContainer>
      <ProTable
        search={true}
        actionRef={actionRef}
        rowKey="id"
        toolBarRender={() => [
          <Button
            key="2"
            type="primary"
            onClick={() => {
              navigate('/cms/regulation/add');
            }}
          >
            新增
          </Button>,
        ]}
        request={queryTable(getRegulationList)}
        columns={columns}
      />
    </PageContainer>
  );
}

export default RegulationList;