import React from 'react';
import { RecordId, SZObject } from '../../../../models/_';
import { Dispatch } from '../../../../models/store';


const SZPop: React.FC<{
  record: SZObject;
  dispatch: Dispatch;
  id: RecordId;
  type: string;
}> = ({ record, dispatch, id }) => {


  return (
    <>
      <div className="boxhead"></div>
      <div className="featuretip-title">
        <div className="name">{record.gateName}</div>
        <div style={{ flexGrow: 1 }}></div>
        <div style={{ cursor: 'pointer', padding: '0 0.8rem' }} onClick={() => dispatch.runtime.closeFeaturePop(id)}>x</div>
      </div>
      <div style={{ maxHeight: '60rem', width: '20rem', padding: '0.5rem 1rem', overflowY: 'auto' }}>
        <div className="featuretip-prop-row">
          <div style={{ color: '#ddd' }}>水闸工程代码</div>
          <div style={{ color: '#fff' }}>{record.gateCode}</div>
        </div>
        <div className="featuretip-prop-row">
          <div style={{ color: '#ddd' }}>工程建设情况</div>
          <div style={{ color: '#fff' }}>{record.engStat}</div>
        </div><div className="featuretip-prop-row">
          <div style={{ color: '#ddd' }}>工程等级</div>
          <div style={{ color: '#fff' }}>{record.engGrad}</div>
        </div><div className="featuretip-prop-row">
          <div style={{ color: '#ddd' }}>更新或维修原因</div>
          <div style={{ color: '#fff' }}>{record.updserRsn}</div>
        </div><div className="featuretip-prop-row">
          <div style={{ color: '#ddd' }}>更新或维修时间</div>
          <div style={{ color: '#fff' }}>{record.updserDate}</div>
        </div><div className="featuretip-prop-row">
          <div style={{ color: '#ddd' }}>建成时间</div>
          <div style={{ color: '#fff' }}>{record.compDate}</div>
        </div><div className="featuretip-prop-row">
          <div style={{ color: '#ddd' }}>实达流量(m³/s)</div>
          <div style={{ color: '#fff' }}>{record.stfl}</div>
        </div><div className="featuretip-prop-row">
          <div style={{ color: '#ddd' }}>设计流量(m³/s)</div>
          <div style={{ color: '#fff' }}>{record.dsfl}</div>
        </div><div className="featuretip-prop-row">
          <div style={{ color: '#ddd' }}>进口高程(m)</div>
          <div style={{ color: '#fff' }}>{record.inEle}</div>
        </div><div className="featuretip-prop-row">
          <div style={{ color: '#ddd' }}>启闭设备类型</div>
          <div style={{ color: '#fff' }}>{record.hdgrTp}</div>
        </div><div className="featuretip-prop-row">
          <div style={{ color: '#ddd' }}>动力类型</div>
          <div style={{ color: '#fff' }}>{record.pwrTp}</div>
        </div><div className="featuretip-prop-row">
          <div style={{ color: '#ddd' }}>闸门尺寸(m)</div>
          <div style={{ color: '#fff' }}>{record.gateSize}</div>
        </div><div className="featuretip-prop-row">
          <div style={{ color: '#ddd' }}>水闸类别</div>
          <div style={{ color: '#fff' }}>{record.wagaType}</div>
        </div><div className="featuretip-prop-row">
          <div style={{ color: '#ddd' }}>闸孔数量</div>
          <div style={{ color: '#fff' }}>{record.gaorNum}</div>
        </div><div className="featuretip-prop-row">
          <div style={{ color: '#ddd' }}>桩号</div>
          <div style={{ color: '#fff' }}>{record.bnch}</div>
        </div><div className="featuretip-prop-row">
          <div style={{ color: '#ddd' }}>所在渠道</div>
          <div style={{ color: '#fff' }}>{record.chanName}</div>
        </div><div className="featuretip-prop-row">
          <div style={{ color: '#ddd' }}>所属行政位置</div>
          <div style={{ color: '#fff' }}>{record.adNamee}</div>
        </div><div className="featuretip-prop-row">
          <div style={{ color: '#ddd' }}>管理单位</div>
          <div style={{ color: '#fff' }}>{record.engManName}</div>
        </div>
      </div>

      <div className="boxfoot"></div>

    </>
  )
}

export default React.memo(SZPop);