import React, { useEffect, useState } from 'react';
import { connect } from 'react-redux';
import { render } from 'react-dom';
import { message, Tooltip } from 'antd';
import FireAddForm from '../components/alarm-add'
import LoacationSelect from '../components/location-select';
import moment from 'moment'
import './gis.less'
const MAPDOMID = 'fs-amap-container-fire';
let map = null;

const tabs = [
   { name: '应急物资', tab: 'xfyjwz', className: 'emergency_button' },
   { name: '消防救援', tab: 'xfjy', className: 'emergency_button' },
   { name: '人民武装部', tab: 'rmwzb', className: 'emergency_button' },
   { name: '医疗救援', tab: 'yljy', className: 'emergency_button' },
   { name: '应急避难场所', tab: 'yjbns', className: 'emergency_button' },
]

function Map(props) {
   const { dispatch, actions, emergencyList, propTab, setLongitudeLatitude } = props;
   const [delay, setDelay] = useState(true)
   const [tab, setTab] = useState('xfyjwz')
   const [visible, setVisible] = useState(false)
   const [level, setLevel] = useState('I')
   const [alarmData, setAlarmData] = useState()
   const [locationVisible, setLocationVisible] = useState(false)
   const [location, setLocation] = useState({})
   const [alarmList, setAlarmList] = useState()

   //查询告警列表数据
   const getData = () => {
      dispatch(actions?.firecontrol?.getFireAlarmList()).then(res => {
         if (res?.payload?.data) {
            setAlarmList(res?.payload?.data)
         }
      })
   }

   // 初始化GIS 组件销毁清空定时器
   useEffect(() => {
      loadMap();
      getData()
   }, []);

   useEffect(() => {
      if (alarmData) renderAlarmInfowindow(alarmData)
   }, [level])


   useEffect(() => {
      if (propTab == 'overview') getData()
   }, [propTab])

   const setMapInitFit = () => {
      map.setZoom(10.3)
      map.setCenter([116.054664, 28.538966])
      map.setPitch(22.9)
      map.setRotation(0)
   }

   useEffect(() => {
      if (!delay && (alarmList?.length > 0 || emergencyList['xfjy'])) {
         map.clearMap()
         map && renderMarkers()
         map && renderAlarms()
         setMapInitFit()
      }
   }, [delay, alarmList, emergencyList, propTab])

   const renderMarkers = () => {
      const data = emergencyList['xfjy']

      data?.map((x, index) => {
         var marker = new AMap.Marker({
            position: new AMap.LngLat(x.location?.split(',')[0], x.location?.split(',')[1]),
            // 将一张图片的地址设置为 icon
            icon: '/assets/images/homepage/fire/rescue_icon.png',
            // 设置了 icon 以后，设置 icon 的偏移量，以 icon 的 [center bottom] 为原点
            offset: new AMap.Pixel(-13, -30),
            zooms: [3, 19],
            zIndex: 12,
         });
         marker.setTitle(x.teamName);
         map.add(marker);
         marker.setLabel({
            zIndex: 13,
            direction: 'right',
            offset: new AMap.Pixel(-90, -40),  //设置文本标注偏移量
            content: "<div class='rescu_team_marker'>" + x.teamName + "</div>", //设置文本标注内容
         });
      })

   }

   // 地图初始化
   const loadMap = () => {
      // 图片图层 实现瓦片地图中国地图样式 bounds 第一个点为左下角 第二个点为右上角
      const imageLayer = new AMap.ImageLayer({
         url: '/assets/images/map.svg',
         bounds: new AMap.Bounds(
            [115.800221, 28.265659],
            [116.334849, 28.973298],
         ),
         zooms: [3, 14],
      });

      map = new AMap.Map(MAPDOMID, {
         center: [116.054664, 28.538966],
         zoomEnable: true,
         dragEnable: true,
         viewMode: '3D',
         pitch: 22.9,
         labelzIndex: 130,
         zoom: 10.3,
         cursor: 'pointer',
         mapStyle: 'amap://styles/4eb48d1ef0a024c73376fd2256d0b5a5',
         layers: [
            AMap.createDefaultLayer(),
            imageLayer,
         ],
      });


      map.on('complete', () => {
         // map.setZoom(17.4)
         // map.setCenter([115.922069, 28.554867])
         // map.setPitch(47.30)
         // map.setRotation(1.7000)
         setTimeout(() => {
            setDelay(false)
         }, 1000);

      });

      map.on('click', (e) => {
         if (!e && !e.lnglat) {
            return
         }

         const zoom = map.getZoom();
         const pitch = map.getPitch();
         const center = map.getCenter();
         const Rotation = map.getRotation();
         console.log('zoom' + zoom)
         console.log('pitch' + pitch)
         console.log('center' + center)
         console.log('Rotation' + Rotation)
         console.log('e.lnglat' + e.lnglat)
      })
   };

   const renderAlarms = () => {
      alarmList
         ?.filter(s => s.state == 1)
         ?.map((x, index) => {
            var marker = new AMap.Marker({
               position: new AMap.LngLat(x.longitude, x.latitude),
               // 将一张图片的地址设置为 icon
               icon: '/assets/images/homepage/communtity/markeralarm.png',
               // 设置了 icon 以后，设置 icon 的偏移量，以 icon 的 [center bottom] 为原点
               offset: new AMap.Pixel(-13, -30),
               zooms: [3, 19],
               zIndex: 14,
            });
            marker.setTitle(x.location);
            map.add(marker);

            // var circle = new AMap.Circle({
            //     center: [x.longitude, x.latitude],
            //     radius: 5000, //半径
            //     borderWeight: 3,
            //     strokeColor: "#AE0000",
            //     strokeOpacity: 1,
            //     strokeWeight: 6,
            //     strokeOpacity: 0.8,
            //     fillOpacity: 0.2,
            //     // strokeStyle: 'dashed',
            //     strokeDasharray: [10, 10],
            //     // 线样式还支持 'dashed'
            //     fillColor: 'rgba(243, 0, 0, 0.15)',
            //     zIndex: 50,
            // })

            // map.add(circle);

            let infowindow = new AMap.InfoWindow({
               isCustom: true,  //使用自定义窗体
               content: `<div id="map-content" class="fire-gis-infowindow fire-gis-infowindow-alarm">
                    <div style="height:${360}px;" id="alarmcontentid${x.location}"></div></div>`,
               offset: new AMap.Pixel(233, 260)
            });

            marker.on('click', () => {
               let position = marker.getPosition ? marker.getPosition() : marker.getCenter();
               infowindow.open(map, position);
               map.setCenter(position)
               // map.setZoom(17.4)
               // map.setPitch(47.30)
               // map.setRotation(1.7000)
               setAlarmData(x)
               setTimeout(() => {
                  if (document.getElementById(`alarmcontentid${x.location}`)) {
                     renderAlarmInfowindow(x)
                  }
               }, 50)
               setLongitudeLatitude({ longitude: x.longitude, latitude: x.latitude })
            })
         })
   }

   //驾车路线规划
   const drawDrivings = (location1, location2, alarmInfo, rescueInfo) => {
      var driving = new AMap.Driving({});
      // 根据起终点经纬度规划驾车导航路线
      driving.search(new AMap.LngLat(location1[0], location1[1]), new AMap.LngLat(location2[0], location2[1]), function (status, result) {
         // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
         if (status === 'complete') {
            if (result.routes && result.routes.length) {
               // 绘制第一条路线，也可以按需求绘制其它几条路线
               drawRoute(result.routes[0])
               props.routeCallback({ routes: result.routes[0] })

            }
         } else {
         }
      });
      // driving.clear() //清除路线
   }

   function drawRoute(route) {
      var path = parseRouteToPath(route)

      var routeLine = new AMap.Polyline({
         path: path,
         isOutline: true,
         outlineColor: 'rgba(118, 38, 63, 1)',
         borderWeight: 2,
         strokeWeight: 5,
         strokeOpacity: 0.9,
         strokeColor: 'rgba(118, 38, 63, 1)',
         lineJoin: 'round'
      })

      map.add(routeLine);

      // 调整视野达到最佳显示区域
      map.setFitView([routeLine], false, [150, 150, 400, 400])
      // setTimeout(() => {
      //     map.setZoom(map.getZoom() - 1)
      // }, 1000);

   }

   //计算两点距离
   function computeDis(p1, p2) {
      return Math.round(p1.distance(p2));
   }

   // 解析DrivingRoute对象，构造成AMap.Polyline的path参数需要的格式
   // DrivingResult对象结构参考文档 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DriveRoute
   function parseRouteToPath(route) {
      var path = []
      for (var i = 0, l = route.steps.length; i < l; i++) {
         var step = route.steps[i]

         for (var j = 0, n = step.path.length; j < n; j++) {
            path.push(step.path[j])
         }
      }
      return path
   }

   const renderAlarmInfowindow = (x) => {
      return x && render(<div>
         <div className='gis_exit' onClick={() => {
            map.setCenter([116.054664, 28.538966])
            map.setZoom(10.3)
            map.setPitch(22.9)
            map.setRotation(0)
            map.clearInfoWindow();
         }} />

         <div style={{ marginTop: 50 }}>
            <div className='gis_item'>
               <div className='gis_title'>事件时间</div><div className='gis_text'>{moment(x?.createTime).format('YYYY-MM-DD HH:mm:ss')}</div>
            </div>
            <div className='gis_item'>
               <div className='gis_title'>地址信息</div><div className='gis_text'>
                  <Tooltip placement="top" title={x?.location}>
                     <span style={{ color: '#FFF' }}>{x?.location?.length > 20 ? x?.location?.substring(0, 20) + '...' : x?.location}</span>
                  </Tooltip>
               </div>
            </div>
            <div className='gis_item'>
               <div className='gis_title'>警情类型</div><div className='gis_text'>{x?.type}</div>
            </div>
         </div>

         {
            propTab == 'overview' && <div className='alarm_confirm'>
               <div className='hande_button'
                  onClick={() => {
                     map.clearInfoWindow();
                     if (emergencyList['xfjy']?.length > 0) {
                        const list = emergencyList['xfjy'].sort((b, a) => computeDis(
                           new AMap.LngLat(x.longitude, x.latitude),
                           new AMap.LngLat(b.location?.split(',')[0], b.location?.split(',')[1])
                        ) - computeDis(
                           new AMap.LngLat(x.longitude, x.latitude),
                           new AMap.LngLat(a.location?.split(',')[0], a.location?.split(',')[1])
                        ))
                        const location = list[0]?.location
                        drawDrivings([x.longitude, x.latitude], location.split(','), x, list[0])

                        props.alarmOk({
                           alarmInfo: { ...x },
                           rescueInfo: list[0]
                        })
                        setTimeout(() => {
                           drawDrivings([x.longitude, x.latitude], location.split(','), x, list[0])
                        }, 200);
                     }
                  }}
               >一键护航</div>
            </div>}
      </div>,
         document.getElementById(`alarmcontentid${x.location}`));
   }

   const renderLeftTop = () => {
      return <div className='home_left_add' onClick={() => { setVisible(true) }} />
   }

   const onFinish = (values) => {
      setLocation({})

      dispatch(actions.firecontrol.addFireAlarm(
         {
            ...values,
            state: 1,
            location: location?.location,
            longitude: location?.lnglat?.split(',')[0],
            latitude: location?.lnglat?.split(',')[1],
         }
      )).then(res => {
         getData()
         message.success('新增上报信息成功')
         setVisible(false)
      })
   }

   return (
      <>
         {/* 延缓加载遮罩 */}
         {delay && <div className='map_delay'><div className='delay_img' /></div>}
         {/* 地图容器 */}
         <div className="gis" id={MAPDOMID} />
         {/* 底部按钮 */}
         {props.propTab == 'item' && tabs.map((s, index) => {
            return <>
               <div className={s.className ? `${s.className} ${s.className}${index + 1}` : 'water-gis-button' + (index + 1)}
                  onClick={() => {
                     setTab(s.tab)
                     s.className ? props.changeEmengencyTab(s.tab) : props.changeTab(s.tab)
                     if (s.tab == 'emergency') {
                        setTab('yjwz')
                        props.changeEmengencyTab('yjwz')
                     }
                  }}
               >
                  <div className={
                     s.className ? `button_img_${(index + 1)} ${tab == s.tab ? 'button_img_' + (index + 1) + '_select' : ''}` :
                        `button_img ${tab == s.tab ? 'button_img_select' : ''}`} />
                  <div>{s.name}</div>
                  {s.className && <div className='dotbg'>{emergencyList[s.tab]?.length}</div>}
               </div>
            </>
         })}
         {/* 左上角图例 */}
         {props.propTab == 'overview' && renderLeftTop()}
         {/* 四周遮罩 */}
         <div className='gis-left'></div>
         <div className='gis-right'></div>
         <div className='gis-top'></div>
         <div className='gis-bottom'></div>

         {/* 新增告警 */}
         <FireAddForm
            visible={visible}
            onCancel={() => setVisible(false)}
            locationClick={() => setLocationVisible(true)}
            location={location}
            onFinish={onFinish}
         />

         {/* 位置选点 */}
         <LoacationSelect
            locationVisible={locationVisible}
            onCancel={() => setLocationVisible(false)}
            locationSelect={(location) => {
               setLocation(location)
               setLocationVisible(false)
            }}
         />
      </>
   );
}

export default connect()(Map);