import { Connect } from "@cqsjjb/jjb-dva-runtime";
import { Button, message, Modal, Space } from "antd";
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 useGetUrlQuery from "zy-react-library/hooks/useGetUrlQuery";
import useTable from "zy-react-library/hooks/useTable";
import { getLabelName } from "zy-react-library/utils";
import { NS_STAKEHOLDER_PERSONNEL_AND_VEHICLES, NS_STOCK_PERSONNEL_AND_VEHICLES } from "~/enumerate/namespace";

const STATUS_ENUM = [
  { bianma: 1, name: "开启" },
  { bianma: 2, name: "关闭" },
];

function List(props) {
  const query = useGetUrlQuery();
  const [form] = Search.useForm();
  const { tableProps, getData } = useTable(props["xgfPersonPermissionsList"], {
    form,
    params: { applyCorpId: query.id },
  });

  const onUpdateStatus = (record) => {
    const { userId, corpinfoId, corpName, departmentId, departmentName, userName, userFaceUrl, userPhone, userCard } = record;
    const messageInfo = record.mkmjPermission === 1 ? "关闭" : "开启";
    Modal.confirm({
      title: `${messageInfo}口门权限`,
      content: record.mkmjPermission === 1
        ? (
            <>
              <div>该人员涉及其他单位项目，是否关闭本单位涉及项目的口门权限？</div>
              <div style={{ color: "red" }}>若该人员在其他单位的项目中保持口门进出权限，则仍可进入港区。</div>
            </>
          )
        : "该人员涉及其他单位项目，是否开启本单位涉及项目的口门权限？",
      onOk: async () => {
        const { success } = await props["xgfPersonAuthorization"]({
          applyPersonId: record.id,
          mkmjPermission: record.mkmjPermission === 1 ? 2 : 1,
          personBelongType: 3,
          userId,
          corpinfoId,
          corpName,
          departmentId,
          departmentName,
          userName,
          userFaceUrl,
          userPhone,
          userCard,
        });
        if (success) {
          message.success(`${messageInfo}成功`);
          getData();
        }
      },
    });
  };

  return (
    <Page headerTitle="人员列表">
      <Search
        labelCol={{ span: 4 }}
        options={[
          { name: "employeePersonUserName", label: "姓名" },
          { name: "projectName", label: "项目名称" },
        ]}
        onFinish={getData}
        form={form}
      />
      <Table
        columns={[
          { title: "项目名称", dataIndex: "projectName" },
          { title: "姓名", dataIndex: "employeePersonUserName" },
          { title: "部门", dataIndex: "personDepartmentName" },
          { title: "手机号", dataIndex: "userPhone" },
          {
            title: "时间范围",
            dataIndex: "visitStartTime",
            render: (_, record) => `${record.visitStartTime}-${record.visitEndTime}`,
          },
          {
            title: "口门权限",
            dataIndex: "mkmjPermission",
            render: (_, record) => getLabelName({ list: STATUS_ENUM, status: record.mkmjPermission }),
          },
          {
            title: "操作",
            width: 200,
            fixed: "right",
            render: (_, record) => (
              <Space>
                <Button
                  type="link"
                  onClick={() => {
                    onUpdateStatus(record);
                  }}
                >
                  {record.mkmjPermission === 1 ? "关闭" : "开启"}
                  口门权限
                </Button>
                <Button
                  type="link"
                  onClick={() => {
                    props.history.push(`./inAndOutRecords??userCard=${record.userCard}`);
                  }}
                >
                  人员进出记录
                </Button>
              </Space>
            ),
          },
        ]}
        {...tableProps}
      />
    </Page>
  );
}

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