<template>
  <div
    id="container"
    v-loading="mapLoading"
    element-loading-text="地图加载中..."
    element-loading-background="rgba(1,18,38, 0.8)"
  ></div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, watch, ref } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";
// 乡镇标记点数据
import { markerData } from "./markerData";
// 路口标记点数据
import { junctionData } from "./junctionData";
// 厕所标记点数据
import { toiletData } from "./toiletData";
// 停车场标记点数据
import { parkingData } from "./parkingData";
// 加油站标记点数据
import { petrolData } from "./petrolData";
// 监控点位标记点数据
import { watchData } from "./watchData";
// 防火点位标记点数据
import { fireproofData } from "./fireproofData";
// 广播点位标记点数据
import { radioData } from "./radioData";
// 其他点位标记点数据
import { otherData } from "./otherData";
// 景区点位标记数据
import { scenicData } from "./scenicData";

const $props = defineProps({
  type: {
    type: String,
    default: "乡镇",
  },
});

const $emit = defineEmits(["clickMarker"]);

console.log($props.type);

// 地图实例对象
let map: any = null;

// loading加载效果控制
const mapLoading = ref(true);

// 标记点数据
const markerList = ref<any>([]);

onMounted(() => {
  // 初始化地图
  initAMap();
});

// 初始化地图
const initAMap = () => {
  // @ts-ignore  设置密匙
  window._AMapSecurityConfig = {
    securityJsCode: "aeecbbed516ac15400631deb4ba44c79",
  };

  AMapLoader.load({
    key: "d5b00a2684bdf5b38fcfbcf1f35c30bf",
    version: "",
    plugins: ["Map3D"],
  })
    .then((AMap) => {
      AMap.plugin("AMap.DistrictSearch", function () {
        // 创建行政区查询对象
        let district = new AMap.DistrictSearch({
          subdistrict: 1,
          // 返回行政区边界坐标等具体信息
          extensions: "all",
          // 设置查询行政区级别为 区
          level: "district",
        });

        district.search("靖安县", function (_status: any, result: any) {
          // 获取朝阳区的边界信息
          let bounds = result.districtList[0].boundaries;

          map = new AMap.Map("container", {
            // 地图渲染的模式
            viewMode: "3D",
            //地图级别
            zoom: 12,
            //地图中心点
            center: [115.210887, 28.901107],
            // 区域掩模
            mask: bounds,
            // 初始地图俯仰角度，默认 0，最大值根据地图当前 zoom 级别不断增大
            pitch: 30,
            // 是否展示地图文字和 POI 信息
            showLabel: false,
            // 是否可通过鼠标拖拽平移
            dragEnable: false,
            // 地图是否可缩放
            zoomEnable: false,
            // 是否可通过键盘控制
            keyboardEnable: false,
            // 地图是否可旋转
            rotateEnable: false,
            // 设置地图的显示样式
            mapStyle: "amap://styles/886d7c971146766e17a0bcea0e1a9823",
            layers: [
              // 添加路网图层，展示道路信息
              new AMap.TileLayer.RoadNet(),
              // 添加卫星图层
              new AMap.TileLayer.Satellite({
                opacity: 0.4,
              }),
              // 添加实时交通路况图层
              new AMap.TileLayer.Traffic({
                //是否自动刷新，默认为false
                autoRefresh: true,
                //刷新间隔，默认180s
                interval: 180,
              }),
            ],
          });

          //添加高度面
          const object3Dlayer = new AMap.Object3DLayer({
            zIndex: 1,
          });
          map.add(object3Dlayer);

          // 高度
          const height = -27000;
          // 颜色
          const color = "rgba(0, 69, 138, 0.6)";
          const wall = new AMap.Object3D.Wall({
            path: bounds,
            height: height,
            color: color,
          });
          wall.transparent = true;
          object3Dlayer.add(wall);

          // 添加描边
          for (let i = 0; i < bounds.length; i += 1) {
            new AMap.Polyline({
              // 线覆盖物路径
              path: bounds[i],
              // 线的颜色
              strokeColor: "#00A9E4",
              // 线宽
              strokeWeight: 40,
              // 线的透明度
              strokeOpacity: 0.4,
              map: map,
            });
          }

          // 定义回调函数
          function clearMarker(e: any) {
            $emit("clickMarker", e.target.De.title, $props.type);
          }

          // 判断需要展示什么标记
          let dataList: any = [];

          // 获取标记点数据
          dataList = getData();

          //添加点标记
          for (let i = 0; i < dataList.length; i++) {
            // 文本内容
            const markerContent = dataList[i].markerContent;

            //Marker 经纬度
            const position = new AMap.LngLat(dataList[i].lng, dataList[i].lat);

            // 标记对象
            const marker = new AMap.Marker({
              // 经纬度
              position: position,
              //将 html 传给 content
              content: markerContent,
              //以 icon 的 [center bottom] 为原点
              offset: new AMap.Pixel(dataList[i].left, dataList[i].right),
              // 鼠标滑过点标记时的文字提示
              title: dataList[i].title,
              // 点标记的叠加顺序,默认12
              // zIndex: dataList[i].zIndex ? dataList[i].zIndex : 12,
              map: map,
            });

            // 绑定点击事件
            marker.on("click", clearMarker);

            // 把标记点存储起来，方便后面清除
            markerList.value.push(marker);
          }

          mapLoading.value = false;
        });
      });
    })
    .catch((e) => {
      console.error(e); //加载错误提示
    });
};

// 监听地图类型变化重新渲染标记点
watch(
  () => $props.type,
  () => {
    console.log($props.type);

    if ($props.type === "防火点位") {
      // 更新地图描点上的数据
      fireproofData[0].markerContent = `
    <div class="fire"">
      <div class="fire_text">
         ${3}
         <div class="icon"></div>
      </div>
      <div class="fire_icon">
      </div>
    </div>
    `;
      fireproofData[1].markerContent = `
    <div class="fire"">
      <div class="fire_text">
         ${4}
         <div class="icon"></div>
      </div>
      <div class="fire_icon">
      </div>
    </div>
    `;
      fireproofData[2].markerContent = `
    <div class="fire"">
      <div class="fire_text">
         ${5}
         <div class="icon"></div>
      </div>
      <div class="fire_icon">
      </div>
    </div>
    `;
    }

    // 先清除之前标记点
    markerList.value.forEach((element: any) => {
      element.setMap(null);
    });

    // 重新添加标记点并绑定事件
    AMapLoader.load({
      key: "d5b00a2684bdf5b38fcfbcf1f35c30bf",
      version: "",
    })
      .then((AMap) => {
        // 定义回调函数
        function clearMarker(e: any) {
          $emit("clickMarker", e.target.De.title, $props.type);
        }

        // 判断需要展示什么标记
        let dataList: any = [];

        // 获取标记点数据
        dataList = getData();

        //添加点标记
        for (let i = 0; i < dataList.length; i++) {
          // 文本内容
          const markerContent = dataList[i].markerContent;

          //Marker 经纬度
          const position = new AMap.LngLat(dataList[i].lng, dataList[i].lat);

          // 标记对象
          const marker = new AMap.Marker({
            // 经纬度
            position: position,
            //将 html 传给 content
            content: markerContent,
            //以 icon 的 [center bottom] 为原点
            offset: new AMap.Pixel(dataList[i].left, dataList[i].right),
            // 鼠标滑过点标记时的文字提示
            title: dataList[i].title,
            // 点标记的叠加顺序,默认12
            // zIndex: dataList[i].zIndex ? dataList[i].zIndex : 12,
            map: map,
          });

          // 绑定点击事件
          marker.on("click", clearMarker);

          // 把标记点存储起来，方便后面清除
          markerList.value.push(marker);
        }
      })
      .catch((e) => {
        console.error(e);
      });
  }
);

// 获取标记点数据
const getData = () => {
  if ($props.type === "乡镇") {
    return scenicData;
  } else if ($props.type === "民宿") {
    return markerData;
  } else if ($props.type === "路口") {
    return junctionData;
  } else if ($props.type === "厕所") {
    return toiletData;
  } else if ($props.type === "停车场") {
    return parkingData;
  } else if ($props.type === "加油站") {
    return petrolData;
  } else if ($props.type === "监控点位") {
    return watchData;
  } else if ($props.type === "防火点位") {
    return fireproofData;
  } else if ($props.type === "广播点位") {
    return radioData;
  } else if ($props.type === "其他点位") {
    return otherData;
  } else {
    return;
  }
};

onUnmounted(() => {
  // 页面卸载时销毁地图实例
  map?.destroy();
  map = null;
});
</script>

<style lang="scss" scoped>
#container {
  width: 100%;
  height: 100%;
  background-color: transparent;
}

/* 标记点自定义样式 */
::v-deep(.marker) {
  position: relative;
  width: 72px;
  height: 129px;
  font-size: 28px;
  font-family: "庞门正道标题体";
  color: #fff;
  background-image: url(@/assets/images/45.png);
  background-size: 100% 100%;
}

::v-deep(.marker .marker_text) {
  position: absolute;
  top: 10px;
  left: 2px;
  width: 50px;
  height: 129px;
  white-space: wrap;
  // display: -webkit-box;
  // -webkit-box-orient: vertical;
  // -webkit-line-clamp: 3;
  // overflow: hidden;
  transform: translate(50%);
}

::v-deep(.junction) {
  position: relative;
  width: 170px;
  height: 116px;
  font-size: 16px;
  color: #fff;
  background-image: url(@/assets/images/48.png);
  background-size: 100% 100%;
}

::v-deep(.junction .junction_text) {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 36px;
  white-space: wrap;
  text-align: center;
}

::v-deep(.toilet) {
  width: 44px;
  height: 100px;
  background-image: url(@/assets/images/55.png);
  background-size: 100% 100%;
}

::v-deep(.parking) {
  width: 43px;
  height: 101px;
  background-image: url(@/assets/images/58.png);
  background-size: 100% 100%;
}

::v-deep(.petrol) {
  width: 44px;
  height: 100px;
  background-image: url(@/assets/images/59.png);
  background-size: 100% 100%;
}

::v-deep(.watch) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;

  .watch_text {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    height: 15px;
    font-size: 10px;
    color: #fff;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    border-radius: 10px;
    background-color: rgba(212, 155, 49, 0.5);
  }

  .watch_icon {
    width: 38px;
    height: 33px;
    background-image: url(@/assets/images/68.png);
    background-size: cover;
  }
}

::v-deep(.scenic) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  // margin-top: -125px;

  .scenic_text {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    height: 15px;
    font-size: 10px;
    color: #fff;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    border-radius: 10px;
    background-color: rgba(212, 155, 49, 0.5);
  }

  .scenic_icon {
    width: 38px;
    height: 33px;
    background-image: url(@/assets/images/68.png);
    background-size: cover;
  }
}

::v-deep(.fire) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;

  .fire_text {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    width: 62px;
    height: 30px;
    font-size: 20px;
    font-weight: bold;
    color: #abd6ff;
    white-space: wrap;
    border-radius: 18px;
    background-color: rgba(60, 107, 145, 0.8);

    .icon {
      width: 11px;
      height: 16px;
      background-image: url(@/assets/images/69.png);
      background-size: cover;
    }
  }

  .fire_icon {
    width: 75px;
    height: 66px;
    background-image: url(@/assets/images/70.png);
    background-size: cover;
  }
}

::v-deep(.radio) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;

  .radio_text {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    width: 62px;
    height: 30px;
    font-size: 20px;
    font-weight: bold;
    color: #ff5733;
    white-space: wrap;
    border-radius: 18px;
    background-color: rgba(255, 87, 51, 0.4);

    .icon {
      width: 11px;
      height: 16px;
      background-image: url(@/assets/images/71.png);
      background-size: cover;
    }
  }

  .radio_icon {
    width: 75px;
    height: 61px;
    background-image: url(@/assets/images/72.png);
    background-size: cover;
  }
}

::v-deep(.other) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;

  .other_icon {
    width: 75px;
    height: 66px;
    background-image: url(@/assets/images/74.png);
    background-size: cover;
  }
}

// 解决地图标记点区域过大问题
::v-deep(.amap-marker-content) {
  white-space: normal !important;
  width: 10px;
  // background-color: skyblue;
}

/* 去除高德地图自带水印 */
::v-deep(.amap-logo) {
  display: none !important;
  visibility: hidden !important;
}

::v-deep(.amap-copyright) {
  display: none !important;
  visibility: hidden !important;
}

::v-deep(.el-loading-spinner .el-loading-text) {
  font-size: 40px;
}
::v-deep(.el-loading-spinner .circular) {
  height: 160px;
  width: 160px;
}
</style>
