<template>
  <div class="content">
    <div id="container" class="map"></div>
  <div>
    <img src="https://mall.zhaijieshi.cc/file/jzmall/storage/lnl5kvh8pm3swptczx6c.jpg" style="width:100%;height:30%"/>
  </div>
  </div>
</template>

<script>
let vm;
import { getHsMap } from "@/script/api/hsData";
export default {
  name: "hsMap",
  data() {
    return {
      map: "",
      curPoint: "", //当前位置
    };
  },
  created() {
    vm = this;
  },
  mounted() {
    //初始化当前位置
    this.curPoint = new AMap.LngLat(121.47102, 31.229203);
    this.initHotMap();
    document.title = "鲸致生活-核酸检测点地图";
  },
  methods: { 
    initHotMap() {
      var zoom = 14;
      var ua = navigator.userAgent.toLowerCase();
      var isWXWork = ua.match(/wxwork/i) == "wxwork";
      var isWeixin =
        !isWXWork && ua.match(/micromessenger/i) == "micromessenger";
      if (
        isWeixin ||
        navigator.userAgent.match(
          /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|IEMobile)/i
        )
      ) {
        zoom = 12;
      }

      var points = points;
      var district = district;
      let map = new AMap.Map("container", {
        zoom: zoom,
        animateEnable: true,
        center: [121.47102, 31.229203],
      });
      var points = getHsMap();

      points.forEach((point) => {
        var lnglat = new AMap.LngLat(
          point["经纬度"].split(",")[0],
          point["经纬度"].split(",")[1]
        );

        var marker = new AMap.Marker({
          position: lnglat, // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
          title: point[1],
        });
        var infoWindowContent =
          '<div className="custom-infowindow input-card">' +
          '<label style="font-size: 1.5rem;">' +
          point["名称"] +
          "</label>" +
          '<div class="input-item">' +
          '<span class="input-item-text txt-b" >预约地址：</span>' +
          '<span class="input-item-text" >' +
          point["地址"] +
          "</span>" +
          "</div>" +
          '<div class="input-item">' +
          '<span class="input-item-text txt-b" style="display:block">排队情况：</span>' +
          '<div class="input-item-text txt-sort">' +
          (point["排队情况"]==null?'无':point["排队情况"]) +
          "</div>" +
          "</div>" +
          '<div class="input-item">' +
          '<span class="input-item-text txt-b" >是否收费：</span>' +
          '<span class="input-item-text" >' +
          (point["是否收费"]==null?'未知':point["是否收费"]) +
          "</span>" +
          "</div>" +
          '<div class="input-item">' +
          '<span class="input-item-text txt-b" >鼻/咽：</span>' +
          '<span class="input-item-text" >' +
          (point["鼻/咽"]==null?'鼻/咽':point["鼻/咽"]) +
          "</span>" +
          "</div>" +
          '<div class="input-item">' +
          '<span class="input-item-text txt-b" >距离：</span>' +
          '<span class="input-item-text" >无法判定' +
          "</span>" +
          "</div>" +
          "</div>";
        // 创建一个自定义内容的 infowindow 实例
        var infoWindow = new AMap.InfoWindow({
          position: lnglat,
          offset: new AMap.Pixel(0, -30),
          content: infoWindowContent,
        });

        marker.on("click", function () {
          //添加距离 如果未授权地址位置 则为无法判定
          console.info(vm.curPoint)
          var distance = "无法判定";

          if (vm.curPoint.lng != 121.47102) {
            var distance = Math.round(
              vm.curPoint.distance(marker.getPosition())
            );
            if (distance != null && distance > 0) {
              distance = (distance / 1000.0).toFixed(2) + "KM";
            }  
          }

          var content = infoWindow.getContent().replace("无法判定", distance);
          infoWindow = new AMap.InfoWindow({
            position: marker.getPosition(),
            offset: new AMap.Pixel(0, -30),
            content: content,
          });
          infoWindow.open(map);
        });

        map.add(marker);
      });

      this.startAMAPLocation(map);
    },
    startAMAPLocation(map) {
      AMap.plugin("AMap.Geolocation", function () {
        var geolocation = new AMap.Geolocation({
          enableHighAccuracy: true, //是否使用高精度定位，默认:true
          timeout: 8000, //超过10秒后停止定位，默认：5s
          buttonPosition: "RB", //定位按钮的停靠位置
          buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
          zoomToAccuracy: true, //定位成功后是否自动调整地图视野到定位点
        });

        geolocation.getCurrentPosition(function (status, result) {
          if (status == "complete") {
            // console.log(
            //   "高德: ",
            //   `${result.position.lat},${result.position.lng}`
            // );

            vm.curPoint = new AMap.LngLat(
              result.position.lng,
              result.position.lat
            ); 

            var marker = new AMap.Marker({
              position: vm.curPoint,
              title: "我在这里",
              icon: "https://mall.zhaijieshi.cc/file/jzmall/storage/c6gk0dowh0qmdbjbc1uv.png",
              // 图标所用图片大小
              imageSize: new AMap.Size(75, 30),
              // 图标取图偏移量
              imageOffset: new AMap.Pixel(-9, -3),
            });
            map.add(marker);

            map.panTo(vm.curPoint);
          } else {
            console.error("高德失败");
            return "";
          }
        });
      });
    },
  },
};
</script>

<style>
#container {
  height: 70%;
  width: 100%;
}
.custom-infowindow {
  width: 200px;
}
.amap-marker-label {
  border: unset;
}
.info {
  position: relative;
  margin: 0;
  top: 0;
  right: 0;
  min-width: 0;
}
.amap-info-contentContainer.bottom-center,
.amap-info-contentContainer.bottom-left,
.amap-info-contentContainer.bottom-right {
  padding-bottom: 8px;
}
.amap-info-content {
  width: 300px;
  height: auto;
  position: relative;
  background: #fff;
  padding: 10px 18px 10px 10px;
  line-height: 1.4;
  overflow: auto;
}

.input-item-text {
  font-size: 0.8rem;
}

.btn {
  position: relative;
  width: 8rem;
  left: 3.6rem;
  margin: 10px 0 0 0;
  display: inline-block;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border: 1px solid transparent;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  background-color: transparent;
  background-image: none;
  color: #25a5f7;
  border-color: #25a5f7;
  padding: 0.25rem 0.5rem;
  line-height: 1.5;
  border-radius: 1rem;
  -webkit-appearance: button;
  cursor: pointer;
}
.txt-b {
  font-weight: 600; 
}

.txt-sort{
  white-space: pre-line;
  /* overflow:hidden;
text-overflow:ellipsis;
display: -webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:3 */
max-height: 200px;
overflow-y: auto;
}
</style>