import React, { useEffect, useState } from 'react';
import { Descriptions } from 'antd';
import moment from "moment"
import {CloseOutlined} from '@ant-design/icons';
import genDamImage from '../../../../components/DamGraph/DamImage';
import './TangYanBa.less'

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

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

  const width = 780;

  const mapOb={
    1:'混凝土坝',
    2:'土坝',
    3:'堆石坝',
    4:'其他四种类型'
  }
  return (
    <>
      <div className="dp-popup" style={{ position: 'absolute', top: '10px', left: 0, width, lineHeight: 1, background:'#ffffff' ,transform: 'translateX(-50%)' }}>
      <div className="dp-popup-tip" style={{marginTop:'-10px',borderBottomColor:'#f7f7f7'}}></div>
        <div className="dp-popup-content">
          <div className="content-body tyb" id='tyb'>
            <div className="title">
              <div className="name flex flexac">
                <div className='nameBorder'></div>
                {data.damname}
                </div>
              <div className="extra">
                <CloseOutlined onClick={closePop} style={{color:"#333"}}/>
              </div>
            </div>

            <div className="body">
            <Descriptions size="small" column={2}>
              <Descriptions.Item label="所属行政位置">{data.adnm}</Descriptions.Item>
              <Descriptions.Item label="所属流域">{data.basName}</Descriptions.Item>
              <Descriptions.Item label="容积(m³)">{data.xhst}</Descriptions.Item>
              <Descriptions.Item label="坝高(m)">{data.height}</Descriptions.Item>
              <Descriptions.Item label="坝长(m)" >{data.width}</Descriptions.Item>
              <Descriptions.Item label="挡水主坝类型" >{data.mt}</Descriptions.Item>
              <Descriptions.Item label="附件" span={3}>
                {data.imgs.map((item)=>{
                  return <img src={item}/>
                })}</Descriptions.Item>
            </Descriptions>
            </div>

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

export default React.memo(TangYanBa);