<style>
.customerMap{
  width: 100%;
  height: 100%;
}
.color-info{
  position: absolute;
  left: 30px;
  top: 15px;
  padding: 10px 20px;
  background-color: rgba(206, 206, 206, .5);
}
.color-info>span{
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 120px;
}
.color-info .raius-color{
  height: 10px;
  width: 10px;
  display: inline-block;
  background-color: #1eb3ff;
  border-radius: 50%;
}
.color-info .g .raius-color{
  background-color: #5fffa3;
}
</style>
<template>
  <div class="customerMap">
    <div :style="{height:'100%',width:'100%'}" ref="myEchart" id="centerMpBaidu"></div>
    <div class="color-info">
      <span class="b">&nbsp;&nbsp;&nbsp;正式: 
        <span class="raius-color"></span>
        <el-switch
          @change="changeSwitch"
          size="mini"
          v-model="value1">
        </el-switch>
      </span>
      <br>
      <span class="g">非正式: 
        <span class="raius-color"></span>
        <el-switch
          @change="changeSwitch"
          size="mini"
          style="display: block"
          v-model="value2"
          active-color="#13ce66">
        </el-switch>
      </span>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      map: null,
      value1: true,
      value2: true,
      baiduMapData: [],
      changebaiduMapData: [],
      centerP: null,
      options0: {
        size: BMAP_POINT_SIZE_BIGGER,
        shape: BMAP_POINT_SHAPE_CIRCLE,
        color: '#1eb3ff'
      },
      options1: {
        size: BMAP_POINT_SIZE_BIGGER,
        shape: BMAP_POINT_SHAPE_CIRCLE,
        color: '#5fffa3'
      },
      list0: [],
      list1: [],
    };
  },
  methods: {
    changeSwitch(e){
      let list = [];
      let data = JSON.parse(JSON.stringify(this.baiduMapData));
      let value1 = this.value1;
      let value2 = this.value2;
      if (value1 && value2) {
        this.creatMap(data)
      } else {
        data.forEach(item => {
          if(value1 && !value2 && item.type == 0) {
            list.push(item)
          } else if (!value1 && value2 && item.type == 1){
            list.push(item)
          }
        })
        this.creatMap(list)
      }
    },
    creatMap(arr, type){
      let _this = this
      //实例化，并设置最大最小缩放层级
      if(this.map) {
        this.map.clearOverlays()
      } else {
        this.map = new BMap.Map("centerMpBaidu", {
          minZoom: 3,
          maxZoom: 20,
        });
        //设置中心点、默认缩放层级
        if (_this.centerP) {
          this.map.centerAndZoom(new BMap.Point(_this.centerP.Lng, _this.centerP.Lat), 10);
        } else {
          this.map.centerAndZoom(new BMap.Point(104.0727017791, 30.6643622306), 10);
        }
        this.map.setMapStyleV2({
          styleId: '33046c341768c2774ab011cc7cf013d1'
        });
        this.map.enableScrollWheelZoom(true);
      }
      //可以鼠标缩放
      const points = arr;
      let list0 = [], list1 = [];
      points.forEach(item => {
        let obj = new BMap.Point(item.Lng, item.Lat)
        obj.CustomerId = item.CustomerId
        if(item.type == 0) {
          list0.push(obj)
        } else if (item.type == 1){
          list1.push(obj)
        }
      })
      this.list0 = list0;
      this.list1 = list1;
      this.changePointsColor(this.list0,this.options0); 
      this.changePointsColor(this.list1,this.options1);
    },
    changePointsColor(points, options){
      var map = this.map;
      var pointCollection = new BMap.PointCollection(points, options);  // 初始化PointCollection
      map.addOverlay(pointCollection);  // 添加Overlay
      this.markerClick(pointCollection);// 给点添加点击事件
    },
    markerClick(pointCollection){
      var _this = this;
      var map = this.map;
      var data = this.markdatas;
      pointCollection.addEventListener('click', function (e) {
        _this.apipost('financestatistics_post_GetCustomerInfoForB2BKB', {CustomerId: e.point.CustomerId}, res=>{
          if(res.data.resultCode == 1) {
            const infoWindow = new BMap.InfoWindow(`
            <p style="font-size: 14px;">联系人：${res.data.data.Contact}</p>
            <p style="font-size: 14px;">联系电话：${res.data.data.ContactNumber}</p>
            <p style="font-size: 14px;">门店名称：${res.data.data.CustomerName}</p>
            <p style="font-size: 14px;">门店地址：${res.data.data.Address}</p>
            <p style="font-size: 14px;">关联销售：${res.data.data.EmName}</p>
            `)
            _this.map.openInfoWindow(infoWindow, e.point);
          }
        })
      });
    }
  },
  mounted() {
    let userInfo = this.getLocalStorage();
    let RB_Branch_id = userInfo.RB_Branch_id;
    let departState = this.$route.query.departState;
    if (departState === 'true') {
      RB_Branch_id = -1
    }
    this.apipost('admin_get_GetBranchLngLat', {BranchId: RB_Branch_id}, r=>{
      if (r.data.resultCode == 1) {
        this.centerP = r.data.data[0]
      }
    })
    this.apipost('financestatistics_post_GetB2BBoardClientAddressList', {BranchId: RB_Branch_id, ProvinceName: ''}, r=>{
      if (r.data.resultCode == 1) {
        let _this = this;
        let data = r.data.data
        data.ActivateList.map(x=>{
          x.type = 0
        })
        data.InActiveList.map(x=>{
          x.type = 0
        })
        data.NotVisit.map(x=>{
          x.type = 1
        })
        let baiduMapData = [...data.ActivateList, ...data.InActiveList, ...data.NotVisit];
        // let baiduMapData = [...data.NotVisit, ...data.ActivateList];
        this.baiduMapData = baiduMapData
        this.creatMap(this.baiduMapData)
      }
    })
  }
};
</script>