//列表展示
import BlueTable from '@/components/BlueTable';
import { Button, Space, type TableColumnsType } from 'antd';
import { useLayoutEffect } from 'react';
import styles from './index.less';
interface ListViewProps {
  listData: any;
  setParams: (params: any) => void;
  listHeight?: number;
  handleDetail?: (record: any) => void;
}
const ListView: React.FC<ListViewProps> = ({ listData, listHeight, setParams, handleDetail }) => {

  useLayoutEffect(() => { }, []);

  const columns: TableColumnsType<any> = [
    {
      title: '序号',
      width: 50,
      render: (_, record, index) => {
        return index + 1;
      },
    },
    {
      title: '事件描述',
      dataIndex: 'standardEventTitle',
      ellipsis: true,
      width: 150,
    },
    {
      title: '事件地址',
      dataIndex: 'address',
      width: 150,
    },
    {
      title: '事件上报时间',
      dataIndex: 'reportTime',
      width: 150,
    },
    {
      title: '状态',
      dataIndex: 'caseStatusText',
      width: 150,
      align: 'center',
      render: (t, r) => (
        <Space>
          <span>{t}</span>
          <span className={styles.status}>{r.timeDescription}</span>
        </Space>
      ),
    },
    {
      title: '操作',
      dataIndex: 'industry',
      width: 100,
      align: 'center',
      render: (t, record) => <Button type="link" style={{ color: '#fff'}} onClick={() => handleDetail && handleDetail(record)}>查看</Button>
    },
  ];

  return (
    <BlueTable
      style={{ height: '580px' }}
      scroll={{ y: listHeight }}
      rowKey={'id'}
      columns={columns}
      dataSource={listData.items}
      pagination={{
        total: listData?.total,
        showSizeChanger: true,
        showTotal: (total) => `共 ${total} 条`,
        onChange: (pageNum, pageSize) => {
          setParams({ pageNum, pageSize, type: 'list' });
        },
        current: listData.page,
      }}
    />
  );
};

export default ListView;
