import React from 'react'

import {
  CloseOutlined,
} from '@ant-design/icons';

function YbyjPlanPop({ id, data, dispatch }) {

  const closePop = () => {
    dispatch.runtime.closeFeaturePop(id);
  };

  const width = 400;

  return (
    <>
      <div className="dp-popup" style={{ position: 'absolute', top: 0, left: 0, width, lineHeight: 1, transform: 'translateX(-50%)' }}>
        <div className="dp-popup-tip"></div>
        <div className="dp-popup-content">
          <div className="boxhead"></div>
          <div className="content-body">
            <div className="title">
              <div className="name">{data.station}</div>
              <div className="extra">
                <CloseOutlined onClick={closePop} style={{color:"#333"}}/>
              </div>
            </div>

            <div style={{padding:"10px 15px"}}>
              <span>站点编码：</span><span style={{fontWeight:"bold", color:"#0893FF"}}>{data.stcd}</span>
            </div>
            <div style={{padding:"10px 15px"}}>
              <span>累计雨量：</span><span style={{fontWeight:"bold"}}>{data.totalRain}mm</span>
            </div>
            <div style={{padding:"10px 15px"}}>
              <span>雨量等级：</span><span style={{fontWeight:"bold"}}>{data.typeName}</span>
            </div>
            <div style={{padding:"10px 15px"}}>
              <span>对应时间段：</span><span style={{fontWeight:"bold"}}>{data.timeSolt}</span>
            </div>
            <div style={{padding:"10px 15px"}}>
              <span>站点类别：</span><span style={{fontWeight:"bold"}}>{data.sttp}</span>
            </div>
            <div style={{padding:"10px 15px"}}>
              <span>运维单位：</span><span style={{fontWeight:"bold"}}>{data.company}</span>
            </div>
            <div style={{padding:"10px 15px 20px 15px"}}>
              <span>电话：</span><span style={{fontWeight:"bold"}}>{data.phone}</span>
            </div>
            {/*<div style={{padding:"10px 15px"}}>
              <span>站点位置：</span><span style={{fontWeight:"bold"}}>{data.address}</span>
            </div>*/}

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

export default React.memo(YbyjPlanPop);