<template>
  <div class="bg-gray" style="height: 100%;width: 100%;"></div>
</template>

<script setup>
import "ol/ol.css";
import Image from "ol/layer/Image";
import ImageWMS from "ol/source/ImageWMS";
import TileLayer from "ol/layer/Tile";
import XYZ from "ol/source/XYZ";
import { createXYZ } from "ol/tilegrid";
import { Map, View } from "ol";
import { transform } from "ol/proj";
import { register } from "ol/proj/proj4";
import proj4 from "proj4";
import ErrorCode from "@/utils/errorCode"
const { proxy } = getCurrentInstance();
import { getCurrencyConfigByMid } from "@/utils/analog";
const map = ref(null);
const zoom = 13;
const center = [121.757423,30.208547];
const tiandituUrl = "http://t{0-7}.tianditu.gov.cn/";
const hangdaotuUrl = "http://36.156.155.131:8090/";

// 解决海图图片偏移问题
proj4.defs(
  "EPSG:3395",
  "+proj=merc +lon_0=0 +k=1 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs"
);
register(proj4);
// 解决海图图片偏移问题

const curAnalog = computed(
  () =>
    proxy.$store.state.data.analogList.find(
      (item) => item.sn == proxy.$store.state.data.curAnalogSn
    ) || {}
);

// watch(
//   () => proxy.$store.state.data.curAnalogSn,
//   (newValue) => {
//     moveToShipBySn(newValue);
//   }
// );

/**
 * 初始化地图
 */
const initMap = () => {
  map.value = new Map({
    target: proxy.$el,
    layers: [
      new TileLayer({
        source: new XYZ({
          tileSize: 256 * 1,//地图vec_w 卫星图img_w
          url: `${tiandituUrl}DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=317e52a409b6b382957e09003ee7e235`, // 天地图
        }),
      }),
      new TileLayer({
        source: new XYZ({
          tileSize: 256 * 1,
          url: `${tiandituUrl}DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=317e52a409b6b382957e09003ee7e235`, // 天地图标注
        }),
      }),
    ],
    view: new View({
      // 指定地图投影模式
      projection: "EPSG:4326",
      // 定义地图显示的坐标
      center: [
        Number(getCurrencyConfigByMid("0a4") || center[0]),
        Number(getCurrencyConfigByMid("0a5") || center[1]),
      ],
      zoom: zoom,
      // 限制缩放级别，可以和extent同用限制范围
      maxZoom: 19,
      // 最小级别，越大则面积越大
      minZoom: 4,
      // 禁止地图旋转
      enableRotation: false,
    }),
    controls: [],
  });

  //地图拖动事件
  map.value.on("moveend", function (evt) {
    proxy.$emit("moveend", evt);
  });

  map.value.on("change", function (evt) {
    proxy.$emit("change", evt);
    if (source.getState() === "ready") {
      // 获取数据集
      // features = source.getFeatures();
      // console.log(source.getFeatures())
    }
  });

  map.value.on("pointermove", function (evt) {
    // console.log(evt)
    proxy.$emit("pointermove", evt);
  });

  map.value.on("singleclick", function (evt) {
    // console.log("singleclick");
    proxy.$emit("singleclick", evt);
  });

  // console.log(map.value);
  proxy.$emit("ready", map.value);
};
const moveToShipBySn = (sn, zoom) => {
  //// // // console.log(sn);
  //// console.log(proxy.$route)
  let analog =
    proxy.$store.state.data.analogList.find((item) => item.sn == sn) || {};
  let center = [Number(analog["0a4"]), Number(analog["0a5"])];
  if (
    analog["0a4"] == null ||
    analog["0a5"] == null ||
    isNaN(center[0]) ||
    isNaN(center[1])
  ) {
    proxy.$modal.msgError(ErrorCode["noAIS"]);
    return;
  }
  moveTo(center, zoom);
};
const moveTo = (center = center, zoom, duration = 300) => {
  // map.value.getView().setCenter(center);
  if (typeof zoom == "number") {
    map.value.getView().setZoom(zoom);
  }
  // console.log(center);
  map.value.getView().animate({
    center: center,
    duration: duration,
  });
  //    map.value.getView().adjustZoom()
};

nextTick(() => {
  initMap();
});

defineExpose({
  moveTo,
  moveToShipBySn,
  map,
});
</script>