import { Connect } from "@cqsjjb/jjb-dva-runtime";
import { Divider, Image } from "antd";
import { useEffect, useState } from "react";
import { getFileUrl } from "zy-react-library/utils";
import { NS_BI_MARK_INFO } from "~/enumerate/namespace";
import "../eightWordPubilc/index.less";

function ConfinedSpaceWork(props) {
  const [info, setInfo] = useState({});
  const [safetyMeasures, setSafetyMeasures] = useState([]);
  const [otherSafetyMeasures, setOtherSafetyMeasures] = useState([]);
  const [gasMonitoringRecord, setGasMonitoringRecord] = useState([]);

  const getData = async () => {
    const { data: basicInfo } = await props.eightWorkInfo({ id: props.id });
    setInfo(basicInfo);
    const { data: supplementaryInfo } = await props.eightWorkSupplementaryInfo({
      eqWorkId: props.workId,
      pageSize: 999,
      pageIndex: 1,
    });
    setGasMonitoringRecord(supplementaryInfo.filter(item => item.type === "gas"));
    const { data: measuresLogs } = await props.eightworkMeasuresLogs({ workId: props.workId });
    setSafetyMeasures(measuresLogs.filter(item => item.type === 1));
    setOtherSafetyMeasures(measuresLogs.filter(item => item.type === 2));
  };

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

  return (
    <div className="work_ticket_details">
      <table>
        <thead>
          <tr>
            <td colSpan={6} style={{ border: "none" }}>
              <Divider orientation="left">有限空间作业许可证</Divider>
            </td>
          </tr>
          <tr>
            <td colSpan={6} style={{ border: "none" }} className="right">
              <span>编号：</span>
              <span>{info.checkNo}</span>
            </td>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td className="title">申请单位</td>
            <td colSpan={2}>{info?.info?.applyUnit}</td>
            <td className="title">作业单位</td>
            <td colSpan={2}>{info?.info?.workDepartmentName}</td>
          </tr>
          <tr>
            <td className="title">有限空间名称及编号</td>
            <td colSpan={2}>{info?.info?.limitedSpaceNameAndCode}</td>
            <td className="title">作业内容</td>
            <td colSpan={2}>{info?.info?.workContent}</td>
          </tr>
          <tr>
            <td className="title">主要介质</td>
            <td colSpan={2}>{info?.info?.chooseLimitedSpace?.mediumInfo}</td>
            <td className="title" rowSpan={2}>应急装备</td>
            <td rowSpan={2} colSpan={2}>{info?.info?.emergencyEquipment}</td>
          </tr>
          <tr>
            <td className="title">主要危险因素</td>
            <td colSpan={2}>{info?.info?.chooseLimitedSpace?.hazards}</td>
          </tr>
          <tr>
            <td className="title">隔绝安全措施</td>
            <td colSpan={5}>{info?.info?.isNeedWork === 1 ? "是" : "否"}</td>
          </tr>
          <tr>
            <td colSpan={6}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "0 50px" }}>
                <div>
                  <span style={{ padding: "0 10px" }}>作业负责人：</span>
                  <span>{info?.info?.workChargeUserName}</span>
                </div>
                <div>
                  <span style={{ padding: "0 10px" }}>监护人：</span>
                  <span>{info?.info?.workGuardianUserName}</span>
                </div>
                <div>
                  <span style={{ padding: "0 10px" }}>作业人：</span>
                  <span>{info?.info?.workUserName}</span>
                </div>
              </div>
            </td>
          </tr>
          <tr>
            <td colSpan={6} style={{ border: "none", padding: 0 }}>
              <table>
                <tbody>
                  <tr>
                    <td className="center title" style={{ width: 80 }}>序号</td>
                    <td className="center title" style={{ width: "auto" }}>主要安全措施</td>
                    <td className="center title" style={{ width: 100 }}>是否涉及</td>
                    <td className="center title" style={{ width: 100 }}>确认人</td>
                  </tr>
                  {safetyMeasures.map((item, index) => (
                    <tr key={index}>
                      <td className="center">{index + 1}</td>
                      <td>{item.content}</td>
                      <td className="center">符合</td>
                      <td className="center">
                        {item.signPath && <Image src={getFileUrl() + item.signPath} width={50} height={50} />}
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </td>
          </tr>
          <tr>
            <td colSpan={6} style={{ border: "none", padding: 0 }}>
              <table>
                <tbody>
                  <tr>
                    <td className="center title" style={{ width: 80 }}>序号</td>
                    <td className="center title" style={{ width: "auto" }}>其它安全措施</td>
                    <td className="center title" style={{ width: 100 }}>确认人</td>
                  </tr>
                  {otherSafetyMeasures.map((item, index) => (
                    <tr key={index}>
                      <td className="center">{index + 1}</td>
                      <td>{item.content}</td>
                      <td className="center">
                        {item.signPath
                          ? <Image src={getFileUrl() + item.signPath} width={50} height={50} />
                          : item.createName}
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </td>
          </tr>
          {gasMonitoringRecord.length > 0 && (
            <tr>
              <td colSpan={6} style={{ border: "none", padding: 0 }}>
                <table>
                  <tbody>
                    <tr>
                      <td className="center title">作业前分析项目</td>
                      <td className="center title">有毒有害物质含量</td>
                      <td className="center title">可燃气含量</td>
                      <td className="center title">氧气量</td>
                      <td className="center title">取样时间</td>
                      <td className="center title">取样位置</td>
                      <td className="center title">取样人</td>
                    </tr>
                    {gasMonitoringRecord.map((item, index) => (
                      <tr key={index}>
                        {index === 0 && <td className="center title" rowSpan={gasMonitoringRecord.length}>作业前数据</td>}
                        <td className="center">{item?.details?.toxicSubstanceContent}</td>
                        <td className="center">{item?.details?.combustibleGasContent}</td>
                        <td className="center">{item?.details?.oxygeAmount}</td>
                        <td className="center">{item?.details?.samplingTime}</td>
                        <td className="center">{item?.details?.samplingLocation}</td>
                        <td className="center">
                          {item?.details?.signImagePath
                            && <Image src={getFileUrl() + item?.details?.signImagePath} width={50} height={50} />}
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </td>
            </tr>
          )}
          <tr>
            <td className="title">作业单位负责人意见</td>
            <td className="right" style={{ width: 200 }}>
              <div>
                {info?.info?.step_14?.signPath
                  && <Image src={getFileUrl() + info?.info?.step_14?.signPath} width={50} height={50} />}
              </div>
              <div>{ info?.info?.step_14?.status !== 0 && info?.info?.step_14?.signTime}</div>
              {/* <div className="remarks">{info?.info?.step_14?.remarks}</div> */}
            </td>
            <td className="title">管理单位发包部门意见</td>
            <td className="right" style={{ width: 200 }}>
              <div>
                {info?.info?.step_15?.signPath
                  && <Image src={getFileUrl() + info?.info?.step_15?.signPath} width={50} height={50} />}
              </div>
              <div>{info?.info?.step_15?.status !== 0 && info?.info?.step_15?.signTime}</div>
              {/* <div className="remarks">{info?.info?.step_15?.remarks}</div> */}
            </td>
            <td className="title">管理单位安监部门意见</td>
            <td className="right" style={{ width: 200 }}>
              <div>
                {info?.info?.step_16?.signPath
                  && <Image src={getFileUrl() + info?.info?.step_16?.signPath} width={50} height={50} />}
              </div>
              <div>{info?.info?.step_16?.status !== 0 && info?.info?.step_16?.signTime}</div>
              {/* <div className="remarks">{info?.info?.step_16?.remarks}</div> */}
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  );
}

export default Connect([NS_BI_MARK_INFO], true)(ConfinedSpaceWork);
