<template>
<!-- htmlcs-disable -->
    <view
        class="med-map-h5"
        id="med-map-h5"
        :style="{
            width,
            height
        }"
    >
    </view>
<!-- htmlcs-enable -->
</template>
<script>
/**
* @file map-h5
* @author zhangeryi
*/
/* global getApp BMap BMapLib */
import * as core from '../../utils/core';

export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    props: {
        width: {
            type: String
        },
        height: {
            type: String
        },
        longitude: {
            type: Number
        },
        latitude: {
            type: Number
        },
        markers: {
            type: Array,
            default() {
                return [];
            }
        },
        polyline: {
            type: Array,
            default() {
                return [];
            }
        },
        includePoints: {
            type: Array,
            default() {
                return [];
            }
        },
        deliverMap: {
            type: Object,
            default() {
                return {};
            }
        }
    },
    data() {
        return {
            map: ''
        };
    },
    created() {
        window.medH5MapLoaded = () => {
            core.loadJS('//api.map.baidu.com/library/CurveLine/1.5/src/CurveLine.min.js')
            .then(() => {
                this.initMap();
            });
        };
        core.loadJS('//api.map.baidu.com/api?v=2.0&ak=BULcESD58jLMCSQ6IeiVVZI2h2K9jA8Y&callback=medH5MapLoaded');
    },
    methods: {
        initMap() {
            if (typeof BMap !== 'undefined') {
                this.map = new BMap.Map('med-map-h5'); // 创建地图实例
                const point = new BMap.Point(this.longitude, this.latitude); // 创建点坐标
                this.map.setCenter(point, 15); // 初始化地图，设置中心点坐标和地图级别
                this.map.enablePinchToZoom();
                this.setMap();
            }
        },
        setMap() {
            // 设置marker
            this.markers && this.markers.forEach(marker => {
                let pt = new BMap.Point(marker.longitude, marker.latitude);
                let myIcon = new BMap.Icon(marker.iconPath, new BMap.Size(marker.width, marker.height), {
                    anchor: new BMap.Size(marker.width / 2, marker.height)
                });
                myIcon.setImageSize(new BMap.Size(marker.width, marker.height));
                let setMarker = new BMap.Marker(pt, {icon: myIcon}); // 创建标注
                this.map.addOverlay(setMarker);
                // 设置标签
                if (marker.callout && marker.callout.content) {
                    let label = new BMap.Label(marker.callout.content,
                    {offset: new BMap.Size(-(marker.callout.content.length * 6.6),
                    +marker.markerId === 2 ? -46 : -36)});
                    label.setStyle({
                        color: '#000',
                        fontSize: '14px',
                        height: '24px',
                        lineHeight: '24px',
                        backgroundColor: '#fff',
                        border: 'none',
                        borderRadius: '6px',
                        padding: '2px 10px',
                        boxShadow: '0 2px 9px 0 rgba(0, 0, 0, .06)'
                    });
                    setMarker.setLabel(label);
                }
            });
            // 设置曲线
            let {store, user} = this.deliverMap.markers;
            let storePoints = new BMap.Point(store.longitude, store.latitude);
            let userPoints = new BMap.Point(user.longitude, user.latitude);
            let points = [storePoints, userPoints];
            let curve = new BMapLib.CurveLine(points, {strokeColor: '#ff6050', strokeWeight: 2, strokeOpacity: 1}); // 创建弧线对象
            this.map.addOverlay(curve); // 添加到地图中
            // 设置视野
            this.map.setViewport(points, {margins: [15, 15, 15, 15]});
        }
    }
};
</script>
<style lang="less">
/* csshint-disable */

</style>


