import React from 'react';
import { mb_open } from 'cbkfe-bridge';
import { browser, isArray } from 'cbkfe-utils';
import './style';

const isAndroid = browser.versions.android;
class PartMap extends React.Component {
    constructor(props) {
        super(props);
        let shopInfo = props.shopinfo || [];
        shopInfo = isArray(shopInfo, true) && shopInfo.filter(shop => shop.highlight);
        this.state = {
            kilometers: props.kilometers,    //千米
            shoptext: props.shoptext,        //地图文案
            shopinfo: shopInfo,        //门店信息
            selflng: props.selflng,          //当前定位经度
            selflat: props.selflat,          //当前定位纬度
            mapUrl: props.mapUrl,
            storeProps: props.storeProps || {},
            mapImageUrl: ''
        };
    }
    amapInterval = null;
    maxTime = 10000; // 如果10s之内还是没有加载出来，那么报网络超时
    loadAmap = () => {
        if (!window.AMap) {
            let scriptElement2 = document.createElement('script');
            scriptElement2.setAttribute('async', true);
            document.body.appendChild(scriptElement2);
            scriptElement2.src = 'https://webapi.amap.com/maps?v=2.0&key=c6596f4640a675c31a048765f1ce921a';

        }
        this.amapInterval = setInterval(() => {
            if (this.maxTime === 0 || (window && window.AMap)) {
                clearInterval(this.amapInterval);
                this.amapInterval = null;
                if (window.AMap) {
                    setTimeout(this.initMap, 300);
                } else if (this.maxTime === 0) {
                    this.setState({
                        errorMessage: '请求超时请重试'
                    });
                }

            }
            this.maxTime -= 100;
        }, 100);
    }
    componentDidMount() {
        this.loadAmap();
        // 静态地图
        // this.getStaticMapString();
    }

    // 高德地图静态图
    getStaticMapString() {
        let data =  this.state.shopinfo;
        let markers = `large,0x0087FD,:${this.state.selflng},${this.state.selflat}`;

        // 在不同分辨率手机上，动态计算图片宽高。
        // 0.75 为该组件的左右边距值,单位为rem, 需使用 body.style.font-size 来计算
        // 9.1 为#map-container 元素高度。单位为 rem, 是当前图片父元素。图片高度等于父元素高度
        let bodyFontSize = +(document.body.style.fontSize.replace(/\px/g, ''));
        let width = Math.floor(window.screen.width - (bodyFontSize * 0.75 * 2));
        let height =Math.floor(bodyFontSize * 9.1);

        data.map((item, index) => {
                const { lng, lat } = item;
                if (lng && lat) {
                    // 拼接 markers 字符串 - 红色
                    markers = markers + `|large,0xFF2B49,:` + lng + ',' + lat;
                }
        });
        let url = `http://restapi.amap.com/v3/staticmap?location=${this.state.selflng},${this.state.selflat}&markers=${markers}&zoom=9&scale=2&size=${width}*${height}&key=f8ced27747045cb70930020993d375a6`;
        this.setState({ mapImageUrl: url });
    }

    // api 创建地图
    // 该处关闭该高德地图使用方式的原因如下：
    // 1. 高德地图 version < v2 时 ios 上会出现重定向，导致页面不断刷新和白屏。（ios 15系统），安卓手机正常
    // 2. 高德地图 version 使用 v2 时 安卓正常。iphone (ios 系统) 部分手机上在使用该组件的落地页会出现，点击左上角返回按钮多次才可返回 bug
    // 针对如上问题暂时选择使用 高德地图静态地图 来处理如上出现的问题
    initMap = () => {
        const data = this.state.shopinfo;
        //创建地图
        let map = this.createMap(this.state.selflng, this.state.selflat);

        //添加门店覆盖物
        let markers = [];
        data.map((item, index) => {
            const { lng, lat } = item;
            if (lng && lat) {
                const marker = this.createMarker(lng, lat, index + 1);
                markers.push(marker);
            }
        });
        map.add(markers);

        // 添加定位覆盖物
        if (this.state.selflng && this.state.selflat) {
            const selfmarker = this.createSelfMarker(this.state.selflng, this.state.selflat);
            map.add(selfmarker);
        }

        //控制缩放比和中心点
        //控制缩放比和中心点
        if (this.state.kilometers <= 5) {
            map.setZoomAndCenter(10, [this.state.selflng, this.state.selflat]);
        }
        else {
            map.setZoomAndCenter(9, [this.state.selflng, this.state.selflat]);
        }
    }

    //创建地图方法
    createMap = (lng, lat) => {
        const map = new AMap.Map('map-container', {
            position: [lng, lat],
            dragEnable: false,      //禁止地图拖动
        });
        return map;
    };

    //创建门店覆盖物方法
    createMarker = (lng, lat, index) => {
        let markerContent = '<div class="custom-content-marker">' + '<div class="custom-text">' + index + '</div>' + '</div>';
        // 将 markerContent 实例添加到 marker 上:
        const marker = new AMap.Marker({
            position: new AMap.LngLat(lng, lat),
            content: markerContent,
        });
        return marker;
    };

    //创建定位覆盖物方法
    createSelfMarker = (lng, lat) => {
        let markerContent = '<div class="custom-content-selfmarker"></div>';
        const selfmarker = new AMap.Marker({
            position: new AMap.LngLat(lng, lat),
            content: markerContent,
        });
        return selfmarker;
    };

    //点击门店跳转
    handleJump = (url) => {
        mb_open(url);
    }

    render() {
        const { shoptext, shopinfo, mapUrl, storeProps, mapImageUrl } = this.state;
        return (
            <div className="cbkfe-storeMap-content">
                {/* 静态地图 */}
                {/* <div id="map-container">
                    {
                        mapImageUrl && <img className="map-img" src={mapImageUrl} width="100%" height="100%" /> 
                    }
                </div> */}
                <div id="map-container"></div>
                <div onClick={() => {
                    mapUrl && mb_open(mapUrl);
                }} className="pannel"></div>
                <div className="map-tips">{shoptext}</div>
                <div className="text-container" {...storeProps}>
                    <div className="map-text" >
                        {shopinfo.map((item, index) =>
                            <div className="text-content" key={index} onClick={() => this.handleJump(item.shopDetailUrl)}>
                                <div className="text-left">
                                    <div className="text-title">
                                        <span className={`text-icon text-icon--${isAndroid ? 'android' : ''}`}>{index + 1}</span>
                                        <span className="text-title-content">{item.storeName}</span>
                                    </div>
                                    <div className="text-detail">{item.skuTitle}</div>
                                </div>
                                <div className="text-right">
                                    {item.distanceTitle}
                                </div>
                            </div>
                        )}
                    </div>
                </div>
            </div>
        );
    }
}

export default PartMap;