<template>
  <baidu-map v-if="mapVisible" :style="{width:map.width,height:map.height}" class="map" ak="n4CW0ajDw1LBUIj1RTlwd1bbTTXuN8v6" :zoom="map.zoom" :center="{lng: map.center.lng, lat: map.center.lat}"
             @ready="handler" :scroll-wheel-zoom="true">
    <!--比例尺控件-->
    <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
    <!--缩放控件-->
    <bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" ></bm-navigation>
    <!--  连线-->
    <bm-polyline
      v-if="points && points.length >= 2 "
      :path="points"
      stroke-color="#0091ea"
      :stroke-opacity="0.8"
      :stroke-weight="2"
    ></bm-polyline>
    <bm-marker v-for="(marker,index) in points" :key="index"
               :position="{lng: marker.lng, lat: marker.lat}"
               @click="lookDetail(marker)"
               :offset="{width: 0, height: -10}"
               :icon="{url:marker.markerIcon,opts: {imageSize: {width: 32, height: 32}},size: {width: 32, height: 32} }">
      <bm-label :content="marker.sort"
                :key="'lable'+index"
                :zIndex="9999"
                :labelStyle="labelStyle"
                :offset="{width: 10, height: 4}"/>
    </bm-marker>
    <bm-info-window :position="{lng: infoWindow.info.lng, lat: infoWindow.info.lat}" :offset="{width: 0, height: -10}" :title="infoWindow.info.storeName" :show="infoWindow.show" @close="infoWindowClose" @open="infoWindowOpen">
      <p class="info"><span class="left">门店地址：</span><span class="right">{{infoWindow.info.addressLine}}</span></p>
      <p class="info"><span class="left">拜访顺序：</span><span class="right">{{infoWindow.info.sort}}</span></p>
      <p class="info"><span class="left">拜访频次：</span><span class="right">{{infoWindow.info.frequence}}</span></p>
      <p class="info"><span class="left">生效日期：</span><span class="right">{{infoWindow.info.startTime}}</span></p>
      <p class="info"><span class="left">联系人：</span><span class="right">{{infoWindow.info.contactName}}</span></p>
      <p class="info"><span class="left">联系电话：</span><span class="right">{{infoWindow.info.telephone}}</span></p>
    </bm-info-window>
  </baidu-map>
</template>

<script>
    import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
    import BmScale from 'vue-baidu-map/components/controls/Scale'
    import BmNavigation from 'vue-baidu-map/components/controls/Navigation'
    import BmMarker from 'vue-baidu-map/components/overlays/Marker'
    import BmInfoWindow from 'vue-baidu-map/components/overlays/InfoWindow'
    import BmPolyline from 'vue-baidu-map/components/overlays/Polyline'
    import BmLabel from 'vue-baidu-map/components/overlays/Label'
    export default {
        name: "Map",
        components: {
            BaiduMap,
            BmScale,
            BmNavigation,
            BmMarker,
            BmInfoWindow,
            BmPolyline,
            BmLabel
        },
        props: {
            mapdata: {
                type: Array,
                default:()=>{
                    return []
                },
            },
            mapVisible:{
                type: Boolean,
                default:false,
            },
            currentMarker:{
                type: String,
                default:'',
            },
        },
        watch:{
            mapdata:{
                immediate:true,
                handler(val){
                    this.map.center = {
                        lng:val[0].lon,
                        lat:val[0].lat
                    };
                    this.points = [];
                    console.log(this.currentMarker)
                    val.forEach((item,index)=>{
                        let sort = (index+1).toString();
                        if(this.currentMarker != '' && this.currentMarker == item.storeId){
                            this.points.push({
                                lng: item.lon,
                                lat: item.lat,
                                storeName:item.storeName,
                                addressLine:item.addressLine,
                                frequence:item.frequence,
                                startTime:item.startTime,
                                contactName:item.contactName,
                                telephone:item.telephone,
                                sort:sort,
                                markerIcon:require('../../../assets/images/markerRed.png')
                            })
                        }else{
                            this.points.push({
                                lng: item.lon,
                                lat: item.lat,
                                storeName:item.storeName,
                                addressLine:item.addressLine,
                                frequence:item.frequence,
                                startTime:item.startTime,
                                contactName:item.contactName,
                                telephone:item.telephone,
                                sort:sort,
                                markerIcon:require('../../../assets/images/marker.png')
                            })
                        }

                    })
                }
            },
            mapVisible:{
                immediate:true,
                handler(val){
                    this.mapVisible=val;
                }
            },
            "infoWindow.info":{
                handler:function(a,b){
                    console.log('更新')
                    this.infoWindow.show = true;
                }
            },
        },
        computed: {

        },
        data() {
            return {
                map:{
                    center: {lng: null,lat:null},
                    zoom: 12,
                    width:'100%',
                    height:'430px',
                },
                infoWindow: {
                    lng: 0,
                    lat: 0,
                    show: false,
                    info:{},
                },
                points: [],
                labelStyle:{color: '#FFF', fontSize : '14px',backgroundColor:'transparent',border:'0px'}
            }
        },
        created() {

        },
        methods: {
            draw(region, map, el) {//根据经纬度计算图标显示位置

                let pixel = map.pointToOverlayPixel({
                    lng: region.lng,
                    lat: region.lat
                });

                el.style.left = pixel.x - 16 + "px";
                el.style.top = pixel.y - 31 + "px";
            },
            //地图初始化
            handler ({BMap, map}) {
                console.log(BMap, map)
                // this.map.center.lng = 118.802422
                // this.map.center.lat = 32.065631
                // this.map.zoom = 12;
                // this.map.width= document.getElementById("container").clientWidth-330+'px';
                // this.map.height=document.body.clientHeight -160+'px';
                // this.getProPositionMap();
            },
            //查看详情
            lookDetail(data, target){
                console.log(data)
                this.infoWindow.info=JSON.parse(JSON.stringify(data));
                // let This=this;
                //为弹窗口标题添加title
                this.$nextTick(()=>{
                    var win=document.querySelector(".BMap_bubble_title");
                    win.title = data.storeName;
                })
            },
            infoWindowClose (e) {
                this.infoWindow.show = false
            },
            infoWindowOpen (e) {
                this.infoWindow.show = true
            },
        }
    }
</script>

<style scoped>
  .info{
    margin: 0;
  }
</style>
