import PageContent from '@/components/PageContent';
import PageTitle from '@/components/PageTitle';
import ScrollLoading from '@/components/ScrollLoading';
import { queryGateOpList } from '@/services/safety';
import { useParams, useRequest } from '@umijs/max';
import { Table } from 'antd';
import { useState } from 'react';
const DoorDetail = () => {
  const { projectId } = useParams();
  const [list, setList] = useState([]);
  const [curPagination, setCurPagination] = useState({});

  const { run, loading } = useRequest((data) => queryGateOpList(data), {
    defaultParams: [{ project_id: projectId }],
    onSuccess: (data) => {
      setList([...list, ...data.list]);
      setCurPagination(data.pagination);
    },
  });
  const columns = [
    {
      title: '时间',
      dataIndex: 'created_time',
      key: 'created_time',
      align: 'center',
      width: 160,
    },
    {
      title: '人员',
      dataIndex: 'user_name',
      key: 'user_name',
      align: 'center',
      width: 110,
    },
    {
      title: '门禁名称',
      dataIndex: 'gate_name',
      key: 'gate_name',
      align: 'center',
      width: 140,
    },
    {
      title: '事件',
      dataIndex: 'event_type',
      key: 'event_type',
      align: 'center',
    },
    {
      title: '验证方式',
      dataIndex: 'check_type',
      key: 'check_type',
      align: 'center',
      width: 140,
    },
    {
      title: '出入状态',
      dataIndex: 'status',
      key: 'status',
      align: 'center',
      width: 140,
    },
  ];

  return (
    <PageContent closeable={false}>
      <PageTitle children="门禁日志" returnable />

      <ScrollLoading
        loading={loading}
        pagination={curPagination}
        handleLoadData={(current) => run({ project_id: projectId, current })}
      >
        <Table
          loading={loading}
          style={{ marginTop: '30px' }}
          dataSource={list}
          columns={columns}
          pagination={false}
        />
      </ScrollLoading>
    </PageContent>
  );
};
export default DoorDetail;
