import React, { useEffect, useState, useRef } from 'react';
import { Modal } from 'antd';
import style from './SaveModal.less';
import ReactZmage from 'react-zmage';

function SaveModal(props) {
  const { onCancel, onOk, okText, spaceDetail, visible } = props;

  const handleOk = () => {
    onOk();
  };

  const handleCancel = () => {
    onCancel && onCancel();
  };
  console.log(spaceDetail);

  return (
    <div>
      <Modal
        destroyOnClose
        width={'90%'}
        title="有限空间事故应急处置卡"
        visible={visible}
        onOk={handleOk}
        onCancel={handleCancel}
        okText={okText}
      >
        <h3 className={style.title}>
          原则：在确保自身安全的前提下，科学救援，挽救生命、降低损失，严禁盲目施救！
        </h3>
        <table className={style.table} border="1">
          <tr>
            <th width="4%" rowSpan={2}>
              1
            </th>
            <th width="15%" rowSpan={2}>
              信息上报
            </th>
            <th width="27%">作业审批人</th>
            <th width="27%">公司值班电话</th>
            <th width="27%">社会救援</th>
          </tr>
          <tr>
            <td>{spaceDetail.data6 || '-'}</td>
            <td>68840911</td>
            <td>68886208</td>
          </tr>
          <tr>
            <td rowSpan={2}>2</td>
            <td rowSpan={2}>现场警戒</td>
            <td>事故有限空间名称</td>
            <td>事故有限空间位置</td>
            <td>有限空间出入口是否在道路作业</td>
          </tr>
          <tr>
            <td>{spaceDetail.name || '-'}</td>
            <td>{spaceDetail.data1 || '-'}</td>
            <td>{spaceDetail.data12 || '-'}</td>
          </tr>
          <tr>
            <td rowSpan={2}>3</td>
            <td rowSpan={2}>救援装备</td>
            <td>安全帽、安全绳、安全带、照明</td>
            <td>三脚架、速差器、安全警示</td>
            <td>气体检测仪、风机、呼吸防护</td>
          </tr>
          <tr>
            <td colSpan={3}>
              石景山水厂救援装备联系人，栗猛，13661035551；安全科救援装备联系人，张来德，13641077820
            </td>
          </tr>
          <tr>
            <td rowSpan={2}>4</td>
            <td rowSpan={2}>现场环境情况</td>
            <td>现场环境照片</td>
            <td>救援锚点位置</td>
            <td>附近危险源</td>
          </tr>
          {/* 以下3部分需要照片 */}
          <tr>
            <td>
              {/* 现场环境照片 */}
              {/* {spaceDetail.data11 || '-'}
              <br /> */}
              <div className={style.img}>
                <ReactZmage src={spaceDetail.data11_pic?.[0]} />
              </div>
            </td>
            <td>
              {/* 救援锚点位置 */}
              {/* {spaceDetail.data15 || '-'}
              <br /> */}
              <div className={style.img}>
                <ReactZmage src={spaceDetail.data15_pic} />
              </div>
            </td>
            <td>
              {/* 附近危险源 */}
              {/* {spaceDetail.data10 || '-'}
              <br /> */}
              <div className={style.img}>
                <ReactZmage src={spaceDetail.data10_pic} />
              </div>
            </td>
          </tr>
          <tr>
            <td rowSpan={2}>5</td>
            <td rowSpan={2}>有限空间内情况</td>
            <td>内部结构</td>
            <td>危险因素</td>
            <td>踏步形式</td>
          </tr>
          <tr>
            <td>
              {/* 内部结构 */}
              <div className={style.img}>
                <ReactZmage src={spaceDetail.data14_pic} />
              </div>
            </td>
            <td>
              {/* 危险因素 */}
              {spaceDetail.data2 || '-'}
            </td>
            <td>
              {/* 踏步形式 */}
              {spaceDetail.data21 || '-'}
            </td>
          </tr>
          <tr>
            <td rowSpan={2}>6</td>
            <td rowSpan={2}>被救人员情况</td>
            <td>作业负责人姓名</td>
            <td>作业监护人姓名</td>
            <td>作业人员名单</td>
          </tr>
          <tr>
            <td>
              {/* 作业负责人姓名 */}
              {spaceDetail.charge_person || '-'}
            </td>
            <td>
              {/* 作业监护人姓名 */}
              {spaceDetail.guardian || '-'}
            </td>
            <td>
              {/* 作业人员名单 */}
              {spaceDetail.op_person || '-'}
            </td>
          </tr>
          <tr>
            <td rowSpan={2}>7</td>
            <td rowSpan={2}>救援形式</td>
            <td>自救</td>
            <td>非进入式救援</td>
            <td>进入式救援</td>
          </tr>
          <tr>
            <td colSpan={2}>
              被困人员所处位置、身体状态、个体防护装备穿戴等情况，具备从有限空间外直接施救或自救的，救援人员在外部通过安全绳等装备将被困人员救出。是推荐的救援方式。
            </td>
            <td>不具备从有限空间外直接施救条件，救援人员进入内部施救。是危险的救援方式</td>
          </tr>
          <tr>
            <td rowSpan={2}>8</td>
            <td rowSpan={2}>后续（持续）工作</td>
            <td>信息持续上报</td>
            <td>医疗救护</td>
            <td>清理现场</td>
          </tr>
          <tr>
            <td>持续上报事故现场情况、救援进展和采取的措施</td>
            <td>人员救出后立即移至通风良好且安全处，采取正确的院前急救，迅速送医治疗</td>
            <td>清点人员、装备；清理事故现场残留的有毒有害物质；人员、装备洗消</td>
          </tr>
        </table>
      </Modal>
    </div>
  );
}

export default SaveModal;
