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

function HotWork(props) {
  const [info, setInfo] = useState({});
  const [delayedMonitoringRecord, setDelayedMonitoringRecord] = 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,
    });
    setDelayedMonitoringRecord(supplementaryInfo.filter(item => item.type === "delay"));
    setGasMonitoringRecord(supplementaryInfo.filter(item => item.type === "gas"));
  };

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

  return (
    <div className="work_ticket_details">
      <table>
        <thead>
          <tr>
            <td colSpan={4} style={{ border: "none" }}>
              <Divider orientation="left">动火申请审批许可证</Divider>
            </td>
          </tr>
          <tr>
            <td colSpan={4} style={{ border: "none" }}>
              <span>编号：</span>
              <span>{info.checkNo}</span>
            </td>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td className="title">申请单位</td>
            <td>{info?.info?.applyUnit}</td>
            <td className="title">申请时间</td>
            <td>{dayjs(info?.info?.applyTime || info?.createTime).format("YYYY-MM-DD HH:mm:ss")}</td>
          </tr>
          <tr>
            <td className="title">动火部位</td>
            <td>{info?.info?.work_place}</td>
            <td className="title">动火方法</td>
            <td>{info?.info?.work_way}</td>
          </tr>
          <tr>
            <td className="title">动火等级</td>
            <td>{info?.info?.workLevelName}</td>
            <td className="title">作业内容</td>
            <td>{info?.info?.workContent}</td>
          </tr>
          <tr>
            <td className="title">动火时间</td>
            <td colSpan={3}>{`${info?.info?.workStartTime} - ${info?.info?.workEndTime}`}</td>
          </tr>
          <tr>
            <td className="title">现场负责人</td>
            <td>{info?.info?.step_10?.actUserName}</td>
            <td className="title">动火操作人</td>
            <td>{info?.info?.hotWorkActUser?.map(item => item.name).join(", ")}</td>
          </tr>
          <tr>
            <td className="title">动火监火人</td>
            <td colSpan={3}>{info?.info?.workMonitor}</td>
          </tr>
          <tr>
            <td className="title center" colSpan={4}>可燃气体分析（运行的生产装置、罐区和具有火灾爆炸危险场所）</td>
          </tr>
          {
            gasMonitoringRecord.length > 0
              ? gasMonitoringRecord.map(item => (
                  <Fragment key={item.id}>
                    <tr>
                      <td className="title">分析时间</td>
                      <td>{item?.details?.analysisTime}</td>
                      <td className="title">分析点</td>
                      <td>{item?.details?.analysisPointName}</td>
                    </tr>
                    <tr>
                      <td className="title">可燃气体检测结果</td>
                      <td>{item?.details?.analysisResult}</td>
                      <td className="title">分析人</td>
                      <td>{item?.details?.analysisUserName}</td>
                    </tr>
                  </Fragment>
                ))
              : <tr><td colSpan={4} className="center">暂无数据</td></tr>
          }
          <tr>
            <td className="title center" colSpan={4}>动火要求安全措施安全提示</td>
          </tr>
          <SafetyMeasures workId={props.workId} colSpan={4} />
          <tr>
            <td className="title">动火单位(部门)负责人意见</td>
            <td className="right">
              <div>
                {info?.info?.step_4?.signPath
                  && <Image src={getFileUrl() + info?.info?.step_4?.signPath} width={50} height={50} />}
              </div>
              <div>{info?.info?.step_4?.status !== 0 && info?.info?.step_4?.signTime}</div>
              <div className="remarks">{info?.info?.step_4?.remarks}</div>
            </td>
            <td className="title">项目发包单位(部门)人员意见</td>
            <td className="right">
              <div>
                {info?.info?.step_5?.signPath
                  && <Image src={getFileUrl() + info?.info?.step_5?.signPath} width={50} height={50} />}
              </div>
              <div>{info?.info?.step_5?.status !== 0 && info?.info?.step_5?.signTime}</div>
              <div className="remarks">{info?.info?.step_5?.remarks}</div>
            </td>
          </tr>
          <tr>
            <td className="title">现场管辖单位(部门)负责人意见</td>
            <td className="right">
              <div>
                {info?.info?.step_6?.signPath
                  && <Image src={getFileUrl() + info?.info?.step_6?.signPath} width={50} height={50} />}
              </div>
              <div>{info?.info?.step_6?.status !== 0 && info?.info?.step_6?.signTime}</div>
              <div className="remarks">{info?.info?.step_6?.remarks}</div>
            </td>
            <td className="title">动火许可证签发单位意见</td>
            <td className="right">
              <div>
                {info?.info?.step_7?.signPath
                  && <Image src={getFileUrl() + info?.info?.step_7?.signPath} width={50} height={50} />}
              </div>
              <div>{info?.info?.step_7?.status !== 0 && info?.info?.step_7?.signTime}</div>
              <div className="remarks">{info?.info?.step_7?.remarks}</div>
            </td>
          </tr>
          <tr>
            <td className="title">动火前管辖单位现场人员许可</td>
            <td className="right">
              <div>
                {info?.info?.step_9?.signPath
                  && <Image src={getFileUrl() + info?.info?.step_9?.signPath} width={50} height={50} />}
              </div>
              <div>{info?.info?.step_9?.status !== 0 && info?.info?.step_9?.signTime}</div>
              <div className="remarks">{info?.info?.step_9?.remarks}</div>
            </td>
            <td className="title">动火后管辖单位现场人员验收</td>
            <td className="right">
              <div>
                {info?.info?.step_11?.signPath
                  && <Image src={getFileUrl() + info?.info?.step_11?.signPath} width={50} height={50} />}
              </div>
              <div>{info?.info?.step_11?.status !== 0 && info?.info?.step_11?.signTime}</div>
              <div className="remarks">{info?.info?.step_11?.remarks}</div>
            </td>
          </tr>
          <tr>
            <td className="title center" colSpan={4}>延时监火记录</td>
          </tr>
          <tr>
            <td colSpan={4} style={{ border: "none", padding: 0 }}>
              <table>
                <tbody>
                  <tr>
                    <td className="title center">监火人</td>
                    <td className="title center">时间</td>
                    <td className="title center">签字照片</td>
                  </tr>
                  {
                    delayedMonitoringRecord.length > 0
                      ? delayedMonitoringRecord.map((item, index) => (
                          <tr key={index}>
                            <td className="center">{item?.details?.actUserName}</td>
                            <td className="center">{item?.details?.delayHotTime}</td>
                            <td className="center">
                              {item?.details?.delayHotPhoto
                                && <Image src={getFileUrl() + item?.details?.delayHotPhoto} width={50} height={50} />}
                            </td>
                          </tr>
                        ))
                      : <tr><td colSpan={3} className="center">暂无数据</td></tr>
                  }
                </tbody>
              </table>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  );
}

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