import React, { useState, useEffect, useRef } from 'react';
import { Modal, Select, message } from 'antd';

const { Option } = Select;
let timeout;

const BaiDuMapPostion = (props) => {

    const [baiduMap, setBaiduMap] = useState(null);
    const [searchLocal, setSearchLocal] = useState(null);
    const [searchList, setSearchList] = useState([]);
    const [currentPos, setCurrentPos] = useState(null);

    const handleOk = () => {
        if (currentPos) {
            props.handleOk(currentPos);
        } else {
            message.error('请选择店铺地址');
        }
    }

    const onChange = (value) => {
        if (value && baiduMap) {
            baiduMap.clearOverlays(); 
            const findPos = searchList.find(item => item.uid === value);
            if (findPos) {
                setCurrentPos(findPos);
                const point = new BMapGL.Point(findPos.point.lng, findPos.point.lat);
                baiduMap.centerAndZoom(point, 16);
                const marker = new BMapGL.Marker(point);
                baiduMap.addOverlay(marker);
                const infoWindow = new BMapGL.InfoWindow(findPos.address, {
                    width: 200,     // 信息窗口宽度
                    height: 100,     // 信息窗口高度
                    title: findPos.title, // 信息窗口标题
                    message: findPos.address
                });  // 创建信息窗口对象 
                marker.addEventListener("click", () => {
                    baiduMap.openInfoWindow(infoWindow, point); //开启信息窗口
                });
            }
        }
    };

    const onSearch = (value) => {
        if (timeout) {
            clearTimeout(timeout);
            timeout = null;
        }
        if (baiduMap) {
            if (searchLocal === null) {
                const local = new BMapGL.LocalSearch(baiduMap, {
                    onSearchComplete: result => {
                        if (result) {
                            setSearchList(JSON.parse(JSON.stringify(result._pois)));
                        }
                    }
                });
                timeout = setTimeout(() => {
                    local.search(value);
                }, 300);
                setSearchLocal(local);
            } else {
                timeout = setTimeout(() => {
                    searchLocal.search(value);
                }, 300);
            }
        }
    };

    const initBaiduMap = () => {
        const map = new BMapGL.Map('baidu_map_container');          // 创建Map实例
        map.enableScrollWheelZoom(true);                            // 开启鼠标滚轮缩放
        map.setHeading(64.5);
        map.setTilt(73);
        const localcity = new BMapGL.LocalCity();
        localcity.get(e => {
            if (e) {
                map.centerAndZoom(new BMapGL.Point(e.center.lng, e.center.lat), 12);   // 初始化地图,设置中心点坐标和地图级别
            }
        });
        setBaiduMap(map);
    }

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

    return <>
        <Modal width={800} title="选择店铺坐标" visible={props.isShowBaiduMap} onOk={handleOk} onCancel={props.handleCancel}>
            <Select
                showSearch
                placeholder="请输入地址"
                onChange={onChange}
                onSearch={onSearch}
                defaultActiveFirstOption={false}
                showArrow={false}
                filterOption={false}
                notFoundContent={null}
                style={{ width: '100%', marginBottom: '10px' }}
                size="large"
            >
                {
                    searchList?.map(item => {
                        return <Option key={item.uid} value={item.uid}>{item.title} 【{item.address}】</Option>
                    })
                }
            </Select>
            <div id="baidu_map_container" style={{ width: '750px', height: '700px' }}></div>
        </Modal>
    </>
}

export default BaiDuMapPostion;