<template>
  <div style="display: flex; flex: 1; width: 100%">
    <div
      id="schemaMap"
      style="
        display: flex;
        flex: 1;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      "
    ></div>
  </div>
</template>
<script>
let schemaMap = null;
export default {
  data() {
    return {
      schemaMap: null,
      isLogin: false,
      AdminRegionLayer: null,
      ythMenuFlag: false,
      drawerFlag: false, //显示菜单列表
      drawerClose: false, //关闭的图标
      menuDetailsFlag: false, //详情页弹框
      openUrlInfo: {}, //打开的详情
    };
  },
  mounted() {
    this.init();
    // this.initWebGIS();
  },
  methods: {
    getShowval() {
      console.log(12345);
      this.$emit("getShow");
      console.log(11111111111);
    },
    // 初始化
    init() {
      let that = this;
      this.$nextTick(() => {
        Require(
          [
            "Axios",
            "PSRMap",
            "SpatialAnalyst",
            "Projection",
            "CustomGraphics",
            "Util",
          ],
          () => {
            schemaMap = new WebGIS.Map();

            schemaMap.init(
              "schemaMap",
              {
                style: WebGIS.Config.styles.base,
                center: WebGIS.Config.examples.center,
                zoom: WebGIS.Config.examples.zoom,
                container: "schemaMap",
                controls: ["geolocate", "navigation"],
                fullExtent: WebGIS.Config.examples.fullExtent,
              },
              () => {
                schemaMap.on("load", async () => {
                  let psrmap = new WebGIS.PSRMap(schemaMap);
                  that.getShowval();
                  psrmap.addPSR();
                  psrmap.on("click", function (data) {
                    const MenusData = that.$api.getMenusByid(data[0].devId);

                    if (data != null) {
                      MenusData.then((data) => {
                        that.$router.push({
                          path: "/monitor",
                          query: {
                            menuId: data.data.data.menuId,
                          },
                        });
                      });
                    }
                  });
                  window.markerGroup = new WebGIS.MarkerGroup(schemaMap);
                  window.apolygon = new WebGIS.Polygon(schemaMap, {
                    paint: {
                      "fill-color": "rgba(47, 143, 253, 0.2)",
                      "line-color": "#2F8FFD",
                      "line-width": 2,
                    },
                  });
                });
              }
            );
          }
        );
      });
    },
    initWebGIS() {
      let self = this;
      let map = null;
      let modules = [
        "Axios",
        "ResourceQuery",
        "PSRMap",
        "MapControls",
        "Projection",
        "Util",
        "CustomGraphics",
        "Mutually",
        "PowerGridTheme",
        "GridThematic",
        "GeoThematic",
        "VisualThematic",
        "Diagram",
        "SpatialAnalyst",
        "Topology",
        "Measure",
        "Meteorology",
        "components.Core",
        "Axios",
        "VisualAnimations", // 渲染轨迹需要
      ];
      Require(modules, () => {
        map = new WebGIS.Map();
        console.log(WebGISAPPConfig.styleUrl);
        map.init(
          "map",
          {
            style: WebGISAPPConfig.styleUrl,
            center: WebGISAPPConfig.coordinate,
            zoom: WebGISAPPConfig.zoom,
            container: "map",
            // fullExtent: {
            //   xmin: 120.0677327888884,
            //   ymin: 37.36772472773977,
            //   xmax: 120.22000561028432,
            //   ymax: 37.43552321719099,
            // },
            preserveDrawingBuffer: true,
          },
          function () {
            let psrmap = new WebGIS.PSRMap(map);
            psrmap.once("load", function () {
              if (!self.isLogin) {
                let config = window.Components.Config.Instance;
                config.init(map, psrmap);
                self.isLogin = true;
              }
            });
            map.once("load", function () {
              psrmap.addPSR();
              window["psrmap"] = psrmap; //全局添加电网图对象
            });

            map.once("idle", () => {
              // 添加然后隐藏鹰眼图
              // const controls = new WebGIS.MapControls(map);
              // controls.addControls(["OverviewControl"]);
              // controls.hideControls(["OverviewControl"]);
            });
            map.switch("vector"); // 默认显示显色地图
          }
        );
        window["map"] = map;
      });
    },
  },
};
</script>
<style></style>
