<template>
  <mapbox-map
    class="main"
    @load="handleLoad"
    :mapStyle="emptyStyle"
    :crs="crs"
    :accessToken="innertoken"
  >
    <mapbox-igs-tile-layer
      v-for="l in rasters"
      :key="l.id"
      :layer="l"
      :layerId="l.id"
      :sourceId="l.id"
      :url="l.url"
      :zoomOffset="1"
    />

    <mapgis-igserver-catlog v-if="false" ip="localhost" :port="6163">
      <template v-slot:catlog>
        <mapgis-igserver-catlog-vue />
      </template>
    </mapgis-igserver-catlog>

    <mapgis-document :wrapperStyle="documentStyle" :document="document">
      <template v-slot:document>
        <mapgis-document-vue :handleDocument="handleDocument" />
      </template>
    </mapgis-document>

    <!--     <mapbox-igs-doc-layer
      :key="l.id"
      v-if="false || isIgsDocLayer"
      :layer="l"
      :layerId="l.id"
      :sourceId="l.id"
      :url="l.url"
    />-->

    <mapgis-dock :wrapperStyle="catlogStyle" :items="docks"></mapgis-dock>
  </mapbox-map>
</template>

<script>
import "@mapgis/mapbox-gl/dist/mapbox-gl.css";
import Mapbox from "@mapgis/mapbox-gl";
import {
  MapboxMap,
  MapgisDocument,
  MapboxIgsTileLayer,
  // MapboxIgsDocLayer,
  // MapboxIgsWmtsLayer,
  MapgisIgserverCatlog
} from "@mapgis/webclient-vue-mapboxgl";
// import MapgisDocumentEle from "./components/Document/DocumentEle";
import MapgisDocumentVue from "./components/Document/DocumentVue";
import MapgisIgserverCatlogVue from "./components/Catlog/Igserver";
import MapgisDock from "./view/Sheet/Dock";

import { IDocument, VectorTile, Layer } from "@mapgis/webclient-store";
const { /* LayerType, */ IgsLayerType } = Layer;
let { Convert } = VectorTile;

function defaultDocument() {
  let conv = new Convert();
  const doc = conv.docTomvt(IDocument.Default());
  doc.crs = "EPSG:4326";
  return doc;
}

export default {
  name: "MapWraper",
  props: {
    document: Object
  },
  data() {
    return {
      crs: "EPSG:4326",
      innertoken:
        "pk.eyJ1IjoicGFybmRlZWRsaXQiLCJhIjoiY2o1MjBtYTRuMDhpaTMzbXhpdjd3YzhjdCJ9.sCoubaHF9-nhGTA-sgz0sA", // 使用mapbox样式需要的秘钥
      //innerstyle:"http://localhost:6163/igs/rest/mrms/vtiles/styles/浅色-经纬度.json", // 地图样式
      rasters: [],
      vectors: [],
      emptyStyle: defaultDocument(),
      innerzoom: 3,
      documentStyle: {
        position: "absolute",
        /*         width: "250px",
        overflowY: "scroll",
        background: "#ffffff",
        height: "80%", */
        marginTop: "10px",
        marginLeft: "10px"
      },
      catlogStyle: {
        position: "absolute",
        textAlign: "center",
        width: "100%",
        bottom: "4px"
      },
      docks: [
        { name: "数据", icon: "mdi-minus", color: "primary" },
        {
          name: "数据",
          icon: "mdi-heart",
          color: "teal"
        },
        {
          name: "数据",
          icon: "mdi-plus",
          color: "pink"
        },
        {
          name: "数据",
          icon: "mdi-format-list-bulleted-square",
          color: "indigo"
        },
        { name: "数据", icon: "mdi-pencil", color: "cyan" }
      ]
    };
  },
  components: {
    MapboxMap,
    MapboxIgsTileLayer,
    // MapboxIgsDocLayer,
    // MapboxIgsWmtsLayer,
    MapgisDocument,
    MapgisDocumentVue,
    //MapgisDocumentEle,
    MapgisIgserverCatlog,
    MapgisIgserverCatlogVue,
    MapgisDock
  },
  created() {
    // 在组件中使用mapbox-gl.js的脚本库功能
    this.mapbox = Mapbox;
    this.rasters = this.parseRasterTile(this.document);
  },
  watch: {
    document(val) {
      this.parseRasterTile(val);
    }
  },
  methods: {
    handleDocument(doc) {
      this.parseRasterTile(doc);
    },
    // 事件内
    handleLoad(/* payload */) {
      // let { map } = payload;
    },
    isIgsDocLayer(subtype) {
      return subtype == IgsLayerType.IgsDocLayer;
    },
    isIgsTileLayer(subtype) {
      return subtype == IgsLayerType.IgsTileLayer;
    },
    isIgsVectorLayer(subtype) {
      return subtype == IgsLayerType.IgsVectorLayer;
    },
    isIgsWmsLayer(subtype) {
      return subtype == IgsLayerType.IgsWmsLayer;
    },
    isIgsWmtsLayer(subtype) {
      return subtype == IgsLayerType.IgsWmtsLayer;
    },
    parseRasterTile(doc) {
      if (!doc || !doc.layers || !doc.sources) return;
      let idoc = IDocument.deepclone(doc);
      let conv = new Convert();
      let layers = conv.docTomvtLayers(idoc, false);

      this.rasters = layers.filter(l => {
        return l.type === "raster";
      });

      console.log("layers", this.rasters);
    }
  }
};
</script>

<style lang="scss">
.main {
  height: 100vh;
  width: 100%;
}
</style>