<template>
  <div class="map-box" v-loading="mapLoading">
    <div class="map-grid" ref="mapContainer"></div>
  </div>
</template>
<script>
import { custTagMap, custScaleMap } from '@/views/grid/charts/customer/constant-info'
export default {
  name: "BMapMarker",
  props: ["mapData", "selectedTab"],
  data() {
    return {
      mapLoading: false,
      map: null,
      list: {
        0: [
          {
            label: "姓名",
            key: "custName",
          },
          {
            label: "联系方式",
            key: "custPhone",
          },
          {
            label: "产品标签",
            key: "custTag",
          },
        ],
        1: [
          {
            label: "经营人",
            key: "lpName",
          },
          {
            label: "联系方式",
            key: "custPhone",
          },
          {
            label: "产品标签",
            key: "custTag",
          },
        ],
        2: [
          {
            label: "法人代表",
            key: "lpName",
          },
          {
            label: "注册资本",
            key: "custCapital",
          },
          {
            label: "企业规模",
            key: "custScale",
          },
          {
            label: "是否贷款",
            key: "isLoan",
          },
          {
            label: "联系方式",
            key: "custPhone",
          },
          {
            label: "产品标签",
            key: "custTag",
          },
        ],
      },
    };
  },
  watch: {
    mapData(newVal) {
        this.addPolygon();
    },
  },
  mounted() {
    this.initMap();
  },
  methods: {
    // 初始化地图
    initMap() {
      this.mapLoading = true;
      this.map = new BMapGL.Map(this.$refs.mapContainer);
      this.map.enableScrollWheelZoom();
      this.mapLoading = false;
    },
    // 点击点标记显示客户信息
    createInfoWindowContent(record) {
      const that = this;
      const div = document.createElement("div");
      const actList = this.list[this.selectedTab];
      actList.map((item) => {
        const divIn = document.createElement("div");
        div.style.cssText =
          "color: #222; font-size: 12px; font-weight: bold; padding: 0 8px; text-align:left;";
        const spanLeft = document.createElement("span");
        spanLeft.style.cssText =
          "width: 50px;display: inline-block;";
        spanLeft.innerHTML = item.label;
        divIn.appendChild(spanLeft);
        const span = document.createElement("span");
        span.style.cssText =
          "color: #666; font-size: 12px; font-weight: normal;margin-left: 10px";
        if (item.key === 'custTag') {
          span.innerHTML = custTagMap[record[item.key]] || '无'
        } else if (item.key === 'custScale') {
          span.innerHTML = custScaleMap[record[item.key]] || '无'
        } else if (item.key === 'isLoan') {
          const custTag = record.custTag;
          span.innerHTML = custTag.charAt(1) === '1' ? '是' : '否'
        } else {
          span.innerHTML = record[item.key];
        }
        divIn.appendChild(span);
        div.appendChild(divIn);
      });
      const btn = document.createElement("span");
      btn.style.cssText =
        "display: inline-block; margin-left: 78px; cursor: pointer; padding: 0 10px; margin-top: 10px; margin-bottom:16px;color: #2094ff; border: 1px solid #2094ff; border-radius: 2px;";
      btn.innerHTML = "客户视图";
      btn.onclick = function () {
        that.$emit("open-dialog", record);
      };
      div.appendChild(btn);
      return div;
    },

    addPolygon() {
      this.map.clearOverlays();
      if (this.mapData.length <= 0){
        if(!this.mapData.length){
          const localCity = new BMapGL.LocalCity();
          localCity.get((result) => {
            this.map.centerAndZoom('临海市', 14);
          });
        }
        return;
      }

      // const point = new BMapGL.Point(
      //   this.mapData[0].longitude,
      //   this.mapData[0].latitude
      // );
      // this.map.centerAndZoom(point, 12); // 设置地图中心
      let allpoints = [];
      this.mapData.map((markerInfo) => {
        // 创建点标记
        const point = new BMapGL.Point(
          markerInfo.longitude,
          markerInfo.latitude
        );
        allpoints.push(point);
        const marker = new BMapGL.Marker(point);
        // 在地图上添加点标记
        this.map.addOverlay(marker);
        const opts = {
          width: 400,
        //   height: 200,
          title: markerInfo.custName,
        };
        const infoWindow = new BMapGL.InfoWindow(
          this.createInfoWindowContent(markerInfo),
          opts
        );
        marker.addEventListener("click", function () {
          this.map.openInfoWindow(infoWindow, point);
        });
        this.map.setViewport(allpoints);
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.map-box {
  position: relative;
  width: 100%;
  height: 100%;
  .map-grid {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }
  ::v-deep .BMap_bubble_pop {
    border: 2px solid #2094ff !important;
    overflow: hidden;
    padding: 0 !important;
  }
  ::v-deep .BMap_bubble_top {
    text-align: center;
    font-weight: bold;
    background-color: #2094ff !important;
  }
  ::v-deep .BMap_bubble_title {
    color: #fff !important;
  }
  ::v-deep .BMap_bubble_pop img {
    display: none;
  }
}
</style>
