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 YinShuiGongCheng({ id, data2, dispatch }) {

  const data = {
    "wadiCode": "1",
    "wadiName": "十咸引水渠道",
    "startLong": null,
    "startLat": null,
    "endLong": null,
    "endLat": null,
    "startLoc": null,
    "endLoc": null,
    "engGrad": null,
    "engScal": null,
    "toWrzName": null,
    "fromWrzName": null,
    "toBasName": null,
    "fromBasName": null,
    "engTask": null,
    "proWatTraLine": null,
    "proRangWatRec": null,
    "trlnTotLen": 11025,
    "cvlnTotLen": null,
    "desAnnDiv": null,
    "ditrMode": null,
    "engStat": null,
    "startDate": null,
    "compDate": null,
    "admDep": null,
    "note": null,
    "effDate": null,
    "exprDate": null,
    "desIrrArea": null,
    "actualIrrArea2": 5000,
    "desFlow": 0.5,
    "actualFlow": null,
    "buildDate": 757785600000,
    "investAmount": 271.7,
    "wadiUse": "野猫河上游高滩取水，并延伸至营坪寨解决县城居民饮水，以饮水为主，兼顾沿线灌溉",
    "imgs": []
}

  const closePop = () => {
    dispatch.runtime.closeFeaturePop(id);
  };
  const width = 780;
  console.log(data,'------');
  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.wadiName}
                </div>
              <div className="extra">
                <CloseOutlined onClick={closePop} style={{color:"#333"}}/>
              </div>
            </div>

            <div className="body">
            <Descriptions size="small" column={2}>
              <Descriptions.Item label="工程名称">{data.wadiName}</Descriptions.Item>
              <Descriptions.Item label="全长(m)">{data.trlnTotLen}</Descriptions.Item>
              <Descriptions.Item label="设计灌溉面积(亩)">{data.desIrrArea}</Descriptions.Item>
              <Descriptions.Item label="实达灌溉面积(亩)">{data.actualIrrArea2}</Descriptions.Item>
              <Descriptions.Item label="设计流量(m³/s)" >{data.desFlow}</Descriptions.Item>
              <Descriptions.Item label="实达流量(m³/s)" >{data.actualFlow}</Descriptions.Item>
              <Descriptions.Item label="建设时间" >{moment(data.buildDate).format('YYYY-MM-DD')}</Descriptions.Item>
              <Descriptions.Item label="投资(万元)" >{data.investAmount}</Descriptions.Item>
              <Descriptions.Item label="工程用途" span={2}>{data.wadiUse}</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(YinShuiGongCheng);