<template>
  <div class="map">
    <div id="map-container"></div>
    <!-- 信息弹窗 -->
    <div class="info-window" ref="infoWindow" v-if="firePoint">
      <div class="info-content">
        <div class="title">
          <div class="txt">重点部位提醒</div>
          <div class="close" @click="closeInfoWindow"></div>
        </div>
        <div class="content">
          <div class="row blue">
            {{ firePoint.buildName }}存在{{ firePoint.depts.length }}个重点部位
          </div>
          <div class="row" v-for="(item, i) in firePoint.depts" :key="i">
            {{ item }}
          </div>
        </div>
        <div class="l-t"></div>
        <div class="r-t"></div>
        <div class="l-b"></div>
        <div class="r-b"></div>
        <div class="c-b"></div>
      </div>
      <div class="info-bottom"></div>
    </div>
  </div>
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import mapIconBuild from "../assets/images/map-icon-build.png"; // 高层建筑
import mapIconSwxhs from "../assets/images/map-icon-pressure.png"; // 室外消火栓
import mapIconCar from "../assets/images/map-icon-car.png"; // 消防车
import mapIconCamera from "../assets/images/map-icon-camera.png"; // 摄像头
import mapIconMicstation from "../assets/images/map-icon-micstation.png"; // 微型站
import mapIconStation from "../assets/images/map-icon-119.png"; // 消防站
import mapIconFire from "../assets/images/map-icon-fire.png"; // 着火点
import mapIconSzxhs from "../assets/images/map-icon-szxhs.png"; // 市政消火栓
import mapIconTrsy from "../assets/images/map-icon-trsy.png"; // 天然水源
import mapIconSfsc from "../assets/images/map-icon-xfsc.png"; // 消防水池

import { getZy } from "@/api/map.js";
export default {
  name: "MapContainer",
  components: {},
  data() {
    return {
      radius: 300,
      center: [],
      markers: [],
      firePoint: null,
      icons: {
        jzKey: {
          image: mapIconBuild,
          size: [43, 60],
          imageSize: [43, 60],
        },
        xhsKey: {
          image: mapIconSwxhs,
          size: [43, 60],
          imageSize: [43, 60],
        },
        szxhsKey: {
          image: mapIconSzxhs,
          size: [43, 60],
          imageSize: [43, 60],
        },
        trsyKey: {
          image: mapIconTrsy,
          size: [43, 60],
          imageSize: [43, 60],
        },
        xfscKey: {
          image: mapIconSfsc,
          size: [43, 60],
          imageSize: [43, 60],
        },
        xfcKey: {
          image: mapIconCar,
          size: [70, 46],
          imageSize: [70, 46],
        },
        lldKey: {
          image: mapIconCamera,
          size: [48, 48],
          imageSize: [48, 48],
        },
        xfzKey: {
          image: mapIconMicstation,
          size: [99, 107],
          imageSize: [99, 107],
        },
        jgKey: {
          image: mapIconStation,
          size: [99, 107],
          imageSize: [99, 107],
        },
      },
    };
  },
  props: {
    id: {
      type: Number,
      default: 1,
    },
    data: {
      type: Object,
      default: null,
    },
  },
  mounted() {
    this.getData();
  },
  methods: {
    async getData() {
      this.center = [this.data.jd, this.data.wd];
      if (this.data.showzhd) {
        // 着火点
        this.firePoint = {
          position: [this.data.jd, this.data.wd],
          buildName: this.data.jzmc,
          depts: this.data.zl ? this.data.zl.split(",") : [],
        };
      }

      // 标志物
      const markers = [];
      const res = await getZy({
        lon: this.data.jd,
        lat: this.data.wd,
        mi: this.radius,
      });

      // console.log(res);
      if (res.data) {
        res.data.forEach((p) => {
          if (p.lon && p.lat) {
            markers.push({
              icon: p.type,
              position: [p.lon, p.lat],
              anchor: "bottom-center",
              data: JSON.parse(p.data),
            });
          }
        });
      }
      this.markers = markers;

      // this.markers = [
      //   {
      //     icon: "jzKey",
      //     position: [106.43885760313785, 29.829438307353094],
      //     anchor: "bottom-center",
      //   },
      //   {
      //     icon: "waterKey",
      //     position: [105.612725, 37.06636],
      //     anchor: "bottom-center",
      //   },
      //   {
      //     icon: "xfcKey",
      //     position: [105.602725, 37.079636],
      //     anchor: "bottom-center",
      //   },
      //   {
      //     icon: "lldKey",
      //     position: [105.604725, 37.089636],
      //     anchor: "bottom-center",
      //   },
      //   {
      //     icon: "xfzKey",
      //     position: [105.605725, 37.069636],
      //     anchor: "bottom-center",
      //   },
      //   {
      //     icon: "jgKey",
      //     position: [105.606725, 37.079636],
      //     anchor: "bottom-center",
      //   },
      // ];
      this.initMap();
    },
    initMap() {
      AMapLoader.load({
        key: "4776c927b5ebe35e9e33e5b14ec78b8f", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [""], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          this.map = new AMap.Map("map-container", {
            //设置地图容器id
            // viewMode: "3D", //是否为3D地图模式
            zoom: 17, //初始化地图级别
            center: this.center, //初始化地图中心点位置
            mapStyle: "amap://styles/grey",
          });

          console.log(this.markers);

          // 设置覆盖物
          if (this.markers && this.markers.length > 0) {
            const markers = [];
            this.markers.forEach((p, i) => {
              const type = p.icon;
              let infoContent = [];
              if (type === "jzKey") {
                infoContent.push(p.data.gcjzmc);
                infoContent.push(p.data.xxdz);
                infoContent.push(p.data.jzdx);
                infoContent.push("建筑高度：" + p.data.gd + "m");
                infoContent.push("建成年代：" + p.data.jcnd + "年");
              } else if (type === "xhsKey") {
                infoContent.push(p.data.code);
                infoContent.push(p.data.sylx);
                infoContent.push(p.data.address);
              } else if (type === "szxhsKey") {
                infoContent.push(p.data.code);
                infoContent.push(p.data.sylx);
                infoContent.push(p.data.address);
              } else if (type === "trsyKey") {
                infoContent.push(p.data.code);
                infoContent.push(p.data.sylx);
                infoContent.push(p.data.address);
              } else if (type === "xfscKey") {
                infoContent.push(p.data.code);
                infoContent.push(p.data.sylx);
                infoContent.push(p.data.address);
              } else if (type === "xfcKey") {
                infoContent.push(p.data.cph);
                infoContent.push(p.data.speed + "公里/小时");
              } else if (type === "lldKey") {
                infoContent.push(p.data.deviceName);
                infoContent.push(p.data.cameraType);
              } else if (type === "xfzKey") {
                infoContent.push(p.data.mc);
                infoContent.push("消防站（队站）");
                infoContent.push(p.data.fzr + " " + p.data.fzrLxdh);
              } else if (type === "jgKey") {
                infoContent.push(p.data.dwmc);
                infoContent.push("微型消防站");
                infoContent.push(p.data.lxr + " " + p.data.lxdh);
              }

              const icon = JSON.parse(JSON.stringify(this.icons[p.icon]));
              icon.size = new AMap.Size(icon.size[0], icon.size[1]);
              icon.imageSize = new AMap.Size(
                icon.imageSize[0],
                icon.imageSize[1]
              );
              p.icon = new AMap.Icon(icon);
              var marker = new AMap.Marker(p);
              // // this.map.add(marker);
              let content = [
                "<div class='info_box_contant' style=\"line-height: 30px;min-width: 250px; padding: 20px; font-size: 20px; color: #7ea2ff; font-family: 'Abel';  background: rgba(0, 0, 0, 0.82);\">" +
                  infoContent.join("<br />") +
                  " </div>",
              ];
              const infoWindow = new AMap.InfoWindow({
                isCustom: true, //使用自定义窗体
                content: content.join("<br>"),
                offset: new AMap.Pixel(0, -70),
              });

              marker.on("mouseover", (e) => {
                infoWindow.open(this.map, p.position); //后面的参数指的是经纬度，在此显示窗口
              });

              marker.on("mouseout", (e) => {
                infoWindow.close();
              });

              markers.push(marker);
            });
            this.map.add(markers);
          }

          // 设置着火点
          if (this.firePoint) {
            this.addFirePoint();
          }

          this.map.setFitView();
        })
        .catch((e) => {
          console.log(e);
        });
    },
    addFirePoint() {
      if (!this.firePoint) {
        return;
      }
      const self = this;
      // 着火点
      var markerFire = new AMap.Marker({
        icon: mapIconFire,
        position: this.firePoint.position,
        anchor: "center",
      });
      markerFire.on("click", function () {
        self.addInfoWindow();
      });
      this.map.add(markerFire);

      // 范围
      var circle = new AMap.Circle({
        center: new AMap.LngLat(
          this.firePoint.position[0],
          this.firePoint.position[1]
        ), // 圆心位置
        radius: this.radius, // 半径
        strokeColor: "rgba(255, 0, 61)", // 线颜色
        strokeOpacity: 0.6, // 线透明度
        strokeWeight: 1, // 线粗细度
        fillColor: "rgba(255, 0, 61)", // 填充颜色
        fillOpacity: 0.08, // 填充透明度
      });
      this.map.add(circle);

      // 信息窗口
      this.addInfoWindow();
    },
    addInfoWindow() {
      if (!this.firePoint) {
        return;
      }
      // 弹窗
      var infoWindow = new AMap.InfoWindow({
        isCustom: true,
        content: this.$refs.infoWindow,
        offset: new AMap.Pixel(0, -45),
        position: this.center,
      });
      infoWindow.open(
        this.map,
        new AMap.LngLat(this.firePoint.position[0], this.firePoint.position[1])
      );
    },
    closeInfoWindow() {
      this.map.clearInfoWindow();
    },
  },
  watch: {
    data: {
      handler() {
        if (this.map) {
          this.map.clearInfoWindow();
        }
      },
      immediate: true,
      deep: true,
    },
  },
};
</script>

<style scoped lang="less">
.map {
  width: 100%;
  height: 100%;

  #map-container {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    background-color: #070b13 !important;
    background-image: none;
  }
  .info-window {
    width: 434px;
    height: auto;

    .info-content {
      width: 100%;
      height: auto;
      background: rgba(0, 0, 0, 0.82);
      border: 1px solid rgba(61, 115, 255, 0.72);
      box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.5);
      position: relative;

      .title {
        width: 100%;
        height: 56px;
        background: url("../assets/images/map-infowindow-title-bg.png") center
          center no-repeat;
        background-size: cover;
        border-bottom: 1px solid rgba(61, 115, 255, 0.5);
        padding: 16px 16px 16px 32px;
        display: flex;
        box-sizing: border-box;

        .txt {
          flex-grow: 1;
          font-family: "Abel";
          font-style: normal;
          font-weight: 400;
          font-size: 24px;
          line-height: 24px;
          color: #ffb800;
        }

        .close {
          width: 24px;
          height: 24px;
          background: url(../assets/images/map-icon-close.png) center center
            no-repeat;
          background-size: 24px 24px;
          cursor: pointer;
        }
      }

      .content {
        width: 100%;
        height: auto;
        min-height: 50px;
        padding: 14px 32px;
        box-sizing: border-box;
        margin-bottom: 10px;

        .row {
          width: 100%;
          height: 24px;
          margin-bottom: 8px;
          font-family: "Abel";
          font-style: normal;
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;

          &.blue {
            color: #7ea2ff;
          }
        }
      }

      .border-bottom {
        width: 100%;
        height: 2px;
        display: flex;
        background: linear-gradient(
          90deg,
          #2d53dd 0.62%,
          #5c80ff 47.56%,
          #355ce9 94.62%
        );
        position: relative;
      }

      .l-t {
        width: 16px;
        height: 2px;
        left: 0;
        top: 0;
        background: #7b90ff;
        position: absolute;
      }

      .r-t {
        width: 16px;
        height: 2px;
        right: 0;
        top: 0;
        background: #7b90ff;
        position: absolute;
      }

      .l-b {
        width: 16px;
        height: 2px;
        left: 0;
        bottom: 0;
        background: #7b90ff;
        position: absolute;
      }

      .r-b {
        width: 16px;
        height: 2px;
        right: 0;
        bottom: 0;
        background: #7b90ff;
        position: absolute;
      }

      .c-b {
        width: calc(100% - 32px);
        height: 2px;
        left: 16px;
        bottom: 0;
        background: linear-gradient(
          90deg,
          #2d53dd 0.62%,
          #5c80ff 47.56%,
          #355ce9 94.62%
        );
        position: absolute;
      }
    }

    .info-bottom {
      width: 100%;
      height: 24px;
      margin-top: -2px;
      background: url(../assets/images/map-infowindow-arrow.png) center center
        no-repeat;
      background-size: 39px 23px;
    }
  }
}
</style>
