import React, { useEffect, useState } from 'react';
import { Tooltip } from 'antd';
import { connect } from 'react-redux';
import { render } from 'react-dom';
import { useMockRequest, useFsRequest } from '$utils';
import { communtity_data } from '../constants/index'
import moment from 'moment';
import './gis.less'
const MAPDOMID = 'fs-amap-container';
let map = null;
const TYPES = {
    1: '消火栓',
    2: '水箱',
    3: '烟感',
    4: '配电箱'
}
function Map(props) {
    const [delay, setDelay] = useState(true)
    const [tab, setTab] = useState('home')
    const [type, setType] = useState(3)

    const { data: devices = [] } = useMockRequest({
        url: 'https://superchangnan.anxinyun.cn/api/xiaofang/devices',
        method: 'mockGet',
    });

    const { data: communtityInfo = {} } = useFsRequest({ url: 'community/info' });

    // 地图初始化
    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', () => {
            setDelay(false)
            // tab == 'home' && map && renderMarkers()
        });

        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)
        })


    };

    useEffect(() => {
        loadMap();
    }, []);

    useEffect(() => {
        if (!delay) {
            setTimeout(() => {
                tab == 'home' && map && renderMarkers()
                tab == 'device' && map && renderDevices()
            }, 200);
        }
    }, [tab, devices]);

    useEffect(() => {
        if (!delay) map && renderDevices()
    }, [type]);


    const renderMarkers = () => {
        map.clearMap();
        map.setZoom(10.3)
        map.setCenter([116.054664, 28.538966])
        map.setPitch(22.9)
        map.setRotation(1.7000)


        const data = communtity_data
        const markers = []
        //下钻点位显示
        data.map((x, index) => {
            var marker = new AMap.Marker({
                position: new AMap.LngLat(x.lng, x.lat),
                // 将一张图片的地址设置为 icon
                icon: `/assets/images/homepage/communtity/${x.name}.png`,
                // 设置了 icon 以后，设置 icon 的偏移量，以 icon 的 [center bottom] 为原点
                offset: new AMap.Pixel(-69, -70),
                zooms: [3, 19],
            });
            marker.setTitle(x.name);
            map.add(marker);
            markers.push(marker)
            let infowindow = new AMap.InfoWindow({
                isCustom: true,  //使用自定义窗体
                content: `<div id="map-content" class="gis-infowindow">
        <div style="height:${360}px;" id="contentid${x.name}"></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)
                setTimeout(() => {
                    let inuse = communtityInfo?.communityInUse?.find(v => v.houseCommunity == x.name)?.count || 0
                    let unuse = communtityInfo?.communityUnUse?.find(v => v.houseCommunity == x.name)?.count || 0
                    if (document.getElementById(`contentid${x.name}`)) {
                        render(<div>
                            <div className='gis_exit' onClick={() => {
                                map.setCenter([115.922069, 28.554867])
                                map.clearInfoWindow();
                            }} />
                            <div className='gis_item'>
                                <div className='gis_title'>小区名称:</div>
                                <div className='gis_text'>{x.name}</div>
                            </div>

                            <div className='gis_item'>
                                <div className='gis_title'>房龄:</div>
                                <div className='gis_text'>{moment().diff(moment(x.build), 'years')}年</div>
                            </div>
                            <div className='gis_item'>
                                <div className='gis_title' style={{ color: '#13D3C9' }}>租赁中:</div>
                                <div className='gis_text'>
                                    <span>{inuse}套</span>
                                    <span style={{ color: '#FAC46E', marginLeft: 5, marginRight: 3 }}>空置：</span>
                                    <span>{unuse}套</span>
                                </div>
                            </div>
                            <div className='gis_item'>
                                <div className='gis_title'>地址:</div>
                                <div className='gis_text'>{x.address}</div>
                            </div>
                        </div>,
                            document.getElementById(`contentid${x.name}`));
                    }
                }, 50)
            })
        })

        // map.setFitView(markers, false, [150, 150, 400, 400])
        // data.map((x, index) => {
        //     var marker = new AMap.Marker({
        //         position: new AMap.LngLat(x.lng, x.lat),
        //         // 将一张图片的地址设置为 icon
        //         // 设置了 icon 以后，设置 icon 的偏移量，以 icon 的 [center bottom] 为原点
        //         // offset: new AMap.Pixel(-13, -30),
        //         zooms: [3, 19],
        //     });
        //     marker.setTitle(x.name);
        //     map.add(marker);
        // })
    }

    const renderDevices = () => {
        map.clearMap()
        var style = [{
            url: '/assets/images/homepage/communtity/gishydrant.png',
            anchor: new AMap.Pixel(6, 6),
            size: new AMap.Size(11, 11)
        }, {
            url: '/assets/images/homepage/communtity/giswatertank.png',
            anchor: new AMap.Pixel(4, 4),
            size: new AMap.Size(11, 11)
        }, {
            url: '/assets/images/homepage/communtity/gissmoke.png',
            anchor: new AMap.Pixel(3, 3),
            size: new AMap.Size(11, 11)
        }, {
            url: '/assets/images/homepage/communtity/giselectricity.png',
            anchor: new AMap.Pixel(3, 3),
            size: new AMap.Size(11, 11)
        }];
        let points = [], markers = [];
        devices?.filter(x => x.type == type)?.map(x => {
            let data = JSON.parse(x.data)
            data?.map((s, index) => {
                points.push(
                    {
                        lnglat: new AMap.LngLat(s.lng, s.lat),
                        style: x.type - 1,//对应的status相对应的样式style
                        name: s.address,
                        id: s.address + s.type + index,
                        data: s,
                    }
                );
                // if (index < 2000 && s.lng && s.lat) {
                //     const marker = new AMap.Marker({
                //         icon: '/assets/images/homepage/fire/leader.png',
                //         // icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
                //         position: [s.lng, s.lat],
                //         // offset: new AMap.Pixel(-13, -30),
                //         // content: ''
                //         // size: [13, 13]
                //     });
                //     marker.setTitle(index);
                //     marker.setMap(map);
                // }

            });
        })

        var mass = new AMap.MassMarks(points, {
            opacity: 0.8,
            zIndex: 11111111,
            cursor: 'pointer',
            style: style
        });

        mass.on('click', function (e) {
            let id = Math.random(1000)
            map.setCenter(e.data.lnglat)
            let infowindow = new AMap.InfoWindow({
                isCustom: true,  //使用自定义窗体
                content: `<div class="device-infowindow">
        <div style="height:${360}px;" id="info-window${id}"></div></div>`,
                offset: new AMap.Pixel(181, 260)
            });
            infowindow.open(map, e.data.lnglat)

            setTimeout(() => {
                if (document.getElementById('info-window' + id)) {
                    render(
                        <div>
                            <div className='gis_exit' onClick={() => { map.clearInfoWindow() }} />
                            <div style={{ marginTop: 10 }}>
                                <div className='gis_item'>
                                    <div className='gis_title'></div>
                                    <div className='gis_text'>{TYPES[type]}</div>
                                </div>
                                <div className='gis_item'>
                                    <div className='gis_title'>地址</div><div className='gis_text'>
                                        <Tooltip placement="top" title={e.data.name}>
                                            <span style={{ color: '#FFF' }}>{e.data.name?.length > 20 ? e.data.name?.substring(0, 20) + '...' : e.data.name}</span>
                                        </Tooltip>
                                    </div>
                                </div>
                                <div className='gis_item'>
                                    <div className='gis_title'>状态</div><div className='gis_text'>正常</div>
                                </div>
                            </div>
                        </div>

                        ,
                        document.getElementById('info-window' + id));
                }
            }, 50)

            window.closeTooltip = () => {
                testDiv.close();
            }
        })

        mass.setMap(map)
    }

    const renderLeftTop = () => {
        return <div className='home_left'>
            <div className='hometotalbg'>廉租房总数</div>
            <div className='home_total_number'>{communtityInfo ? (communtityInfo?.inuse + communtityInfo?.unuse) : '-'} </div>

            <div className='hqtotal'>租赁中</div>
            <div className='home_total_number'>{communtityInfo ? (communtityInfo?.inuse) : '-'}</div>

            <div className='cztotal'>空置</div>
            <div className='home_total_number'>{communtityInfo ? (communtityInfo?.unuse) : '-'}</div>
        </div>
    }

    const renderRightBottom = () => {
        return <div className='device_home_right'>
            {[
                { name: '烟感设备', icon: 'gissmoke', type: 3 },
                { name: '配电箱', icon: 'giselectricity', type: 4 },
                { name: '消火栓', icon: 'gishydrant', type: 1 },
                { name: '水箱', icon: 'giswatertank', type: 2 }
            ].map(s => <div className='flex-row flex-item-center' style={{ marginBottom: 8 }}>
                <div onClick={() => { setType(s.type) }} className={`checkbox`} >{s.type == type ? '✓' : ''}</div>
                <img src={`/assets/images/homepage/communtity/${s.icon}.png`} />
                <span>{s.name}</span>
            </div>)}
        </div>

    }


    return (
        <>
            {/* 延缓加载遮罩 */}
            {delay && <div className='map_delay'><div className='delay_img' /></div>}

            {/* 地图容器 */}
            <div className="gis" id={MAPDOMID} />


            {/* 底部按钮 */}
            {[
                { name: '房屋分布', tab: 'home' },
                { name: '人口分布', tab: 'person' },
                { name: '基础设施', tab: 'device' }
            ].map((s, index) => {

                return index == 1 ? '' : <div className={'gis-button' + (index + 1)}
                    onClick={() => {
                        if (delay) return
                        setTab(s.tab)
                    }}
                    style={{ zIndex: 1001 }}
                >
                    <div className={`button_img ${tab == s.tab ? 'button_img_select' : ''}`} />
                    <div>{s.name}</div>
                </div>
            })
            }

            {/* 左上角图例 */}
            {tab == 'home' && renderLeftTop()}
            {tab == 'device' && renderRightBottom()}
            {/* 四周遮罩 */}
            <div className='gis-left'></div>
            <div className='gis-right'></div>
            <div className='gis-top'></div>
            <div className='gis-bottom'></div>
        </>
    );
}

export default connect()(Map);