import useUrlState from "@ahooksjs/use-url-state";
import { Permission } from "@cqsjjb/jjb-common-decorator/permission";
import { Connect } from "@cqsjjb/jjb-dva-runtime";
import { Button, Space } from "antd";
import { useEffect } from "react";
import BackIcon from "zy-react-library/components/Icon/BackIcon";
import Page from "zy-react-library/components/Page";
import Search from "zy-react-library/components/Search";
import Table from "zy-react-library/components/Table";
import useTable from "zy-react-library/hooks/useTable";
import { NS_ENCLOSED_PERSONNEL_AND_VEHICLE_STATISTICS } from "~/enumerate/namespace";

function List(props) {
  const [urlState, setUrlState] = useUrlState({
    parentId: "0",
    backParentIds: [],
  }, {
    navigateMode: "replace",
    parseOptions: {
      arrayFormat: "index",
    },
    stringifyOptions: {
      arrayFormat: "index",
    },
  });

  const [form] = Search.useForm();

  const { tableProps, getData } = useTable(props["enclosedPersonnelAndVehicleStatisticsList"], {
    form,
    params: { parentId: urlState.parentId },
    manual: true,
  });

  useEffect(() => {
    getData();
console.log(urlState.parentId)
  }, [urlState.parentId]);

  return (
    <Page isShowAllAction={false}>
      <Search
        options={[
          { name: "closedAreaName", label: "区域名称" },
        ]}
        form={form}
        onFinish={getData}

      />
      <Table
        toolBarRender={() => (
          <Space>
            {
              urlState.parentId !== "0" && (
                <Button
                  icon={<BackIcon />}
                  onClick={() => {
                    setUrlState({
                      parentId: urlState.backParentIds.at(-1),
                      backParentIds: urlState.backParentIds.slice(0, -1),
                    });
                  }}
                >
                  返回
                </Button>
              )
            }
          </Space>
        )}
        columns={[
          { title: "区域名称", dataIndex: "closedAreaName", render: (_, record) => (
            <Button
              type="link"
              onClick={() => {
                setUrlState({
                  parentId: record.id,
                  backParentIds: [...urlState.backParentIds, urlState.parentId],
                });
              }}
            >
              {record.closedAreaName}
            </Button>
          ) },
          { title: "人员现存数", dataIndex: "personCount" },
          { title: "车辆现存数", dataIndex: "carCount" },
          {
            title: "操作",
            width: 200,
            fixed: "right",
            render: (_, record) => (
              <Space>
                {props.permission(props.vehicleRecordsBtn || "jgd-enclosed-area-stats-add-carinout") && (
                  <Button
                    type="link"
                    onClick={() => {
                      props.history.push(`./vehicleEntryAndExitRecords?licenceNo=${record.licenceNo}`);
                    }}
                  >
                    车辆进出记录
                  </Button>
                )}
                {props.permission(props.personnelRecordsBtn || "jgd-enclosed-area-stats-add-personinout") && (
                  <Button
                    type="link"
                    onClick={() => {
                      props.history.push(`./personnelEntryAndExitRecords??userCard=${record.userCard}`);
                    }}
                  >
                    人员进出记录
                  </Button>
                )}
              </Space>
            ),
          },
        ]}
        {...tableProps}
      />
    </Page>
  );
}

export default Connect([NS_ENCLOSED_PERSONNEL_AND_VEHICLE_STATISTICS], true)(Permission(List));
