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 DisclaimerSign from "../eightWordPubilc/DisclaimerSign";
import OpinionSign from "../eightWordPubilc/OpinionSign";
import SafetyMeasures from "../eightWordPubilc/SafetyMeasures";
import "../eightWordPubilc/index.less";

function ElectricityWork(props) {
  const [info, setInfo] = 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"));
  };

  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?.workLocation}</td>
            <td className="title">作业类型</td>
            <td>{info?.info?.operationTypeName}</td>
          </tr>
          <tr>
            <td className="title">作业人电工证号</td>
            <td>{info?.info?.electricNumber}</td>
            <td className="title">作业级别</td>
            <td>{info?.info?.workLevelName}</td>
          </tr>
          <tr>
            <td className="title">电源接入点及许可用电功率</td>
            <td>{info?.info?.pointPower}</td>
            <td className="title">用电设备名称及额定功率</td>
            <td>{info?.info?.equipmentNamePower}</td>
          </tr>
          <tr>
            <td className="title">工作电压</td>
            <td>{info?.info?.workVoltage}</td>
            <td className="title">用电人</td>
            <td>{info?.info?.electricUser}</td>
          </tr>
          <tr>
            <td className="title">负责人电工号</td>
            <td>{info?.info?.electricUserNo}</td>
            <td className="title">监护人</td>
            <td>
              {info?.info?.step_20?.signPath
                && <Image src={getFileUrl() + info?.info?.step_20?.signPath} width={50} height={50} />}
            </td>
          </tr>
          <tr>
            <td className="title">作业人</td>
            <td>{info?.info?.workUserName}</td>
            <td className="title">作业负责人</td>
            <td colSpan={3}>
              {info?.info?.step_21?.signPath
                && <Image src={getFileUrl() + info?.info?.step_21?.signPath} width={50} height={50} />}
            </td>
          </tr>
          <tr>
            <td className="title">关联的其他特殊作业及安全作业票编号</td>
            <td colSpan={3}>{info?.info?.linkSpecialWorks}</td>
          </tr>
          <tr>
            <td className="title">风险辨识结果</td>
            <td colSpan={3}>{info?.info?.riskResults}</td>
          </tr>
          <tr>
            <td className="title">实际作业开始时间</td>
            <td colSpan={3}>{info?.info?.workStartTime}</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?.samplingTime}</td>
                      <td className="title">分析点</td>
                      <td>{item?.details?.samplingLocation}</td>
                    </tr>
                    <tr>
                      <td className="title">可燃气体检测结果</td>
                      <td>{item?.details?.combustibleGasContent}</td>
                      <td className="title">分析人</td>
                      <td>
                        {item?.details?.signImagePath
                          && <Image src={getFileUrl() + item?.details?.signImagePath} width={50} height={50} />}
                      </td>
                    </tr>
                  </Fragment>
                ))
              : <tr><td colSpan={4} className="center">暂无数据</td></tr>
          }
          <SafetyMeasures workId={props.workId} colSpan={4} />
          <DisclaimerSign
            colSpan={2}
            safetyRemarks={info?.info?.step_18?.remarks}
            safetySignPath={info?.info?.step_18?.signPath}
            safetySignTime={info?.info?.step_18?.status !== 0 && info?.info?.step_18?.signTime}
            AcceptRemarks={info?.info?.step_19?.remarks}
            AcceptSignPath={info?.info?.step_19?.signPath}
            AcceptSignTime={info?.info?.step_19?.status !== 0 && info?.info?.step_19?.signTime}
          />
          <OpinionSign
            title="作业负责人意见"
            colSpan={4}
            remarks={info?.info?.step_21?.remarks}
            signPath={info?.info?.step_21?.signPath}
            signTime={info?.info?.step_21?.status !== 0 && info?.info?.step_21?.signTime}
          />
          <OpinionSign
            title="用电单位意见"
            colSpan={4}
            remarks={info?.info?.step_28?.remarks}
            signPath={info?.info?.step_28?.signPath}
            signTime={info?.info?.step_28?.status !== 0 && info?.info?.step_28?.signTime}
          />
          <OpinionSign
            title="配送电单位意见"
            colSpan={4}
            remarks={info?.info?.step_29?.remarks}
            signPath={info?.info?.step_29?.signPath}
            signTime={info?.info?.step_29?.status !== 0 && info?.info?.step_29?.signTime}
          />
          <OpinionSign
            title="完工验收"
            colSpan={4}
            remarks={info?.info?.step_25?.remarks}
            signPath={info?.info?.step_25?.signPath}
            signTime={info?.info?.step_25?.status !== 0 && info?.info?.step_25?.signTime}
          />
        </tbody>
      </table>
    </div>
  );
}

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