import useUrlState from "@ahooksjs/use-url-state";
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 DepartmentLeftTree from "zy-react-library/components/LeftTree/Department/Gwj";
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 { FORM_ITEM_RENDER_ENUM } from "zy-react-library/enum/formItemRender";
import useGetUrlQuery from "zy-react-library/hooks/useGetUrlQuery";
import useTable from "zy-react-library/hooks/useTable";
import { NS_STOCK_PERSONNEL_AND_VEHICLES } from "~/enumerate/namespace";

function List(props) {
  const query = useGetUrlQuery();
  const [form] = Search.useForm();
  const [urlState, setUrlState] = useUrlState({
    departmentId: "",
    backDepartmentIds: [],
  }, {
    navigateMode: "replace",
    parseOptions: {
      arrayFormat: "index",
    },
    stringifyOptions: {
      arrayFormat: "index",
    },
  });

  const { tableProps, getData } = useTable(props["stockPersonnelAndVehiclesList"], {
    form,
    params: () => ({ departmentId: urlState.departmentId, corpId: query.id }),
    manual: true,
  });

  useEffect(() => {
    getData();
  }, [urlState.departmentId]);

  return (
    <Page headerTitle="人员及车辆详情">
      <div style={{ display: "flex", gap: 20 }}>
        <div style={{ width: 300 }}>
          <DepartmentLeftTree
            onGetNodePaths={(event) => {
              const departmentId = event.at(-1).id;
              setUrlState({
                departmentId,
                backDepartmentIds: [...urlState.backDepartmentIds, urlState.id],
              });
            }}
            isNeedCorpInfoId={true}
            params={{ eqCorpinfoId: query.id }}
          />
        </div>
        <div style={{
          backgroundColor: "rgb(241, 241, 242)",
          width: 10,
          marginTop: "-20px",
          marginBottom: "-20px",
          height: "calc(100vh - 112px)",
        }}
        >
        </div>
        <div style={{ width: "calc(100% - 300px - 50px)" }}>
          <Search
            options={[
              { name: "name", label: "姓名" },
            ]}
            onFinish={getData}
            form={form}
          />
          <Table
            toolBarRender={() => (
              <>
                {
                  urlState.departmentId !== "" && (
                    <Button
                      icon={<BackIcon />}
                      onClick={() => {
                        setUrlState({
                          departmentId: urlState.backDepartmentIds.at(-1),
                          backDepartmentIds: urlState.backDepartmentIds.slice(0, -1),
                        });
                      }}
                      ghost
                    >
                      返回
                    </Button>
                  )
                }
              </>
            )}
            columns={[
              { title: "部门", dataIndex: "departmentName" },
              { title: "姓名", dataIndex: "userName" },
              { title: "岗位", dataIndex: "postName" },
              { title: "手机号", dataIndex: "userPhone" },
              { title: "车辆数", dataIndex: "vehicleCount" },
              {
                title: "操作",
                width: 200,
                fixed: "right",
                render: (_, record) => (
                  <Space>
                    <Button
                      type="link"
                      onClick={() => {
                        props.history.push(`./personnelRecords?userCard=${record.userCard}`);
                      }}
                    >
                      人员进出记录
                    </Button>
                    <Button
                      type="link"
                      onClick={() => {
                        props.history.push(`./vehicleManagement/list?id=${record.userId}`);
                      }}
                    >
                      车辆管理
                    </Button>
                  </Space>
                ),
              },
            ]}
            {...tableProps}
          />
        </div>
      </div>
    </Page>
  );
}

export default Connect([NS_STOCK_PERSONNEL_AND_VEHICLES], true)(List);
