import React, { useEffect, useState,} from 'react';
import { Descriptions,Image  } from 'antd';
import {CloseOutlined} from '@ant-design/icons';

import moment from "moment"

function YHJMH({ id, data, dispatch }) {
  console.log(data);
  const url = "http://223.75.53.141:9100/gs-tsg"
  const width = 500;
  const closePop = () => {
    dispatch.runtime.closeFeaturePop(id);
  };

  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.name}
                </div>
              <div className="extra">
                <CloseOutlined onClick={closePop} style={{color:"#333"}}/>
              </div>
            </div>

            <div className="body">
      
            <Descriptions labelStyle={{padding:"5px 0"}}>
                <Descriptions.Item label="行政区划" span={2} contentStyle={{ padding: "5px 0" }}>{data?.adnm}</Descriptions.Item>
                <Descriptions.Item label="户主姓名" span={1} contentStyle={{padding:"5px 0"}}>{data?.name}</Descriptions.Item>
                <Descriptions.Item label="联系电话" span={2} contentStyle={{padding:"5px 0"}}>{data?.phone}</Descriptions.Item>
                <Descriptions.Item label="宅基高程(m)" span={1} contentStyle={{padding:"5px 0"}}>{data?.hele ? Number(data?.hele).toFixed(2) : ''}</Descriptions.Item>
                <Descriptions.Item label="建筑面积(㎡)" span={2} contentStyle={{padding:"5px 0"}}>{data?.area}</Descriptions.Item>
                <Descriptions.Item label="家庭人口" span={1} contentStyle={{padding:"5px 0"}}>{data?.ptcount}</Descriptions.Item>
                <Descriptions.Item label="建筑类型" span={2} contentStyle={{ padding: "5px 0" }}>
                  {data?.btype == "1" ? "1层住宅" :
                    data?.btype == "2" ? "2层住宅" :
                      data?.btype == "3" ? "3层住宅" :
                        data?.btype == "4" ? "3层以上住宅": ''
                  }</Descriptions.Item>
                <Descriptions.Item label="结构形式" span={1} contentStyle={{ padding: "5px 0" }}>
                  {data?.stype == "1" ? "钢筋混凝土结构" :
                    data?.stype == "2" ? "混合结构" :
                      data?.stype == "3" ? "砖木结构" :
                      data?.stype == "4" ? "其他结构" : ''
                  }</Descriptions.Item>
                <Descriptions.Item label="临水" span={2} contentStyle={{ padding: "5px 0" }}>
                  {data?.bwater == "1" ? "是" :
                    data?.bwater == "0" ? "否" : ''
                  }</Descriptions.Item>
                <Descriptions.Item label="切坡" span={1} contentStyle={{ padding: "5px 0" }}>
                  {data?.bhill == "1" ? "是" :
                    data?.bhill == "0" ? "否" :""
                  }</Descriptions.Item>
                <Descriptions.Item label="照片" span={3} contentStyle={{ padding: "5px 0" }}>
                {
                    data?.files?.length > 0 ? 
                      data?.files.map(item => <div key={item.id} style={{marginRight:5}} >
                       <Image
                  width={100}
                  height={50}
                  src={url + item.filePath}
                  
                />
                    </div>) : null
                  }
                </Descriptions.Item>
              </Descriptions>
            </div>

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

export default React.memo(YHJMH);