import { Permission } from "@cqsjjb/jjb-common-decorator/permission";
import { Connect } from "@cqsjjb/jjb-dva-runtime";
import { Button, Descriptions, Divider, Modal, Space } from "antd";
import dayjs from "dayjs";
import { useEffect, useState } from "react";
import Page from "zy-react-library/components/Page";
import PreviewImg from "zy-react-library/components/PreviewImg";
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 { getLabelName } from "zy-react-library/utils";
import { TRAINING_STATE_ENUM } from "~/enumerate/constant";
import { NS_PERSONNEL_PERMISSION_RECORDS } from "~/enumerate/namespace";

function List(props) {
  const [infoModalVisible, setInfoModalVisible] = useState(false);
  const [currentId, setCurrentId] = useState("");

  const [form] = Search.useForm();
  const { tableProps, getData } = useTable(props["personnelPermissionRecordsList"], {
    form,
  });

  return (
    <Page isShowAllAction={false}>
      <Search
        labelCol={{ span: 4 }}
        options={[
          { name: "employeePersonUserName", label: "姓名" },
          { name: "projectName", label: "项目名称" },
        ]}
        form={form}
        onFinish={getData}
      />
      <Table
        columns={[
          { title: "姓名", dataIndex: "employeePersonUserName" },
          { title: "部门", dataIndex: "personDepartmentName" },
          // { title: "是否培训", dataIndex: "trainingState", render: (_, record) => getLabelName({ list: TRAINING_STATE_ENUM, status: record.trainingState }) },
          { title: "涉及项目", dataIndex: "projectName" },
          // { title: "口门权限范围", dataIndex: "todo5" },
          {
            title: "操作",
            width: 100,
            fixed: "right",
            render: (_, record) => (
              <Space>
                {props.permission("jgd-stk-personnel-permission-records-show") && (
                  <Button
                    type="link"
                    onClick={() => {
                      setInfoModalVisible(true);
                      setCurrentId(record.id);
                    }}
                  >
                    查看
                  </Button>
                )}
              </Space>
            ),
          },
        ]}
        {...tableProps}
      />
      {
        infoModalVisible && (
          <InfoModal
            id={currentId}
            onCancel={() => {
              setInfoModalVisible(false);
              setCurrentId("");
            }}
          />
        )
      }
    </Page>
  );
}

const InfoModalComponent = (props) => {
  const [info, setInfo] = useState({});

  const getData = async () => {
    const { data } = await props["personnelPermissionRecordsInfo"]({ id: props.id });
    const arr = []
    if(data.gateLevelAuthArea){
      JSON.parse(data.gateLevelAuthArea).area && JSON.parse(data.gateLevelAuthArea).area.forEach(item => {
        arr.push(item.value)
      })
    }

    data.eLevelAuthArea = arr.length>0 ? arr.join(",") : null;

    setInfo(data || []);
  };

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

  return (
    <Modal
      open
      title="查看"
      maskClosable={false}
      width={600}
      onCancel={props.onCancel}
      footer={[
        <Button key="cancel" onClick={props.onCancel}>取消</Button>,
      ]}
      loading={props.personnelPermissionRecords.personnelPermissionRecordsLoading}
    >
      <Divider orientation="left">人员信息</Divider>
      <Descriptions
        bordered
        column={1}
        styles={{ label: { width: 200 } }}
        items={[
          { label: "姓名", children: info.employeePersonUserName },
          { label: "手机号", children: info.userPhone },
          { label: "身份证号", children: info.userCard ? atob(info.userCard) : "" },
          { label: "访问起始时间", children: info.visitStartTime },
          { label: "访问结束时间", children: info.visitEndTime },
          { label: "口门权限范围", children: info.eLevelAuthArea},
          { label: "涉及项目", children: info.projectName },
          { label: "人脸照片", children: (<PreviewImg files={[{
              filePath: info.userFaceUrl,
            }]} />) },
          { label: "申请时间", children: info.createTime ? dayjs(info.createTime).format("YYYY-MM-DD HH:mm:ss") : "" },
          { label: "审核人", children: info.auditUserName },
          { label: "审核时间", children: info.auditTime },
        ]}
      />
    </Modal>
  );
};

const InfoModal = Connect([NS_PERSONNEL_PERMISSION_RECORDS], true)(InfoModalComponent);

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