<template>
  <div class="intelligent_drawing-container">
    <div class="apass_breadcrumb">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>在线组件工具</el-breadcrumb-item>
        <el-breadcrumb-item>智能制图</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="main-container">
      <iframe
        ref="intelligent_drawing_iframe"
        width="100%"
        height="100%"
        scrolling="no"
        :src="znztUrl"
        frameborder="0"
      ></iframe>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
const gisServiceUrl = window.serviceConfig.gisServiceRoot;
const gisPortalSiteName = window.serviceConfig.gisPortalSiteName
  ? window.serviceConfig.gisPortalSiteName
  : "portal";
export default {
  data() {
    return {
      url:
        gisServiceUrl +
        "/" +
        gisPortalSiteName +
        "/apaasplat/viewer/mapViewer.html",
      queryType: "",
      id: ""
    };
  },
  computed: {
    ...mapState(["znztDetailsParams"]),
    getZnztParams() {
      return this.$store.state.znztParams;
    },
    znztUrl() {
      if (this.queryType == "webmap") {
        return this.url + `?webmap=${this.id}`;
      } else if (this.queryType == "layers") {
        return this.url + `?layers=${this.id}`;
      } else {
        return this.url;
      }
    }
  },
  watch: {
    getZnztParams(newVal) {
      console.log("智能制图参数" + newVal);
    }
  },
  mounted() {
    this.id = this.znztDetailsParams.id;
    this.queryType = this.znztDetailsParams.queryType;
    this.$nextTick(() => {
      window.addEventListener("message", this.postmassageevt);
    });
  },
  methods: {
    postmassageevt(event) {
      let data = event.data;
      // 智能制图发布服务
      if (data.cmd == "mapviewmsg") {
        console.log(data);
        this.$store.commit("setZnztParams", data.params);
        this.$router.push(`/fwzc/fwcs?map=1`);
      }
      // App Builder页面 -- 新窗口打开
      if (data.cmd == "mapviewtoapp") {
        console.log(data);
        let params = {
          title: data.params.title,
          tags: data.params.tags,
          sharewithwebmap: data.params.shareWithWebMap,
          webmap: data.params.id,
          summary: data.params.summary
        };
        let routeData = this.$router.resolve({
          name: "intelligent_appbuilder",
          query: params
        });
        window.open(routeData.href, "_blank");
        // this.$store.commit("setAppBuilderParams", data.params);
      }
      // 智能制图服务详情--新窗口打开
      if (data.cmd == "mapdetailmsg") {
        console.log(data);
        let routeData = this.$router.resolve({
          name: "intelligent_details",
          query: data.params
        });
        window.open(routeData.href, "_blank");
      }
      // 智能制图页面跳转
      if (data.cmd == "mapviewurl") {
        console.log(data);
        switch (data.params.queryType) {
          case "webmap":
            this.queryType = "webmap";
            this.$store.commit("setZnztIdParams", data.params.id);
            this.id = data.params.id;
            break;
          case "layers":
            this.queryType = "layers";
            this.$store.commit("setZnztIdParams", data.params.id);
            this.id = data.params.id;
            break;
          default:
            this.queryType = "";
            this.$store.commit("setZnztIdParams", "");
            this.id = "";
            break;
        }
      }
    }
  },
  destroyed() {
    window.removeEventListener("message", this.postmassageevt);
  }
};
</script>

<style scoped>
.intelligent_drawing-container {
  margin: -157px 40px 20px;
}
.intelligent_drawing-container .main-container {
  height: calc(100vh - 150px - 43px);
  border-radius: 12px;
  background-color: #fff;
  padding: 0px;
}
.intelligent_drawing-container .main-container iframe {
  border-radius: 12px;
}
</style>

<style>
.intelligent_drawing-container .apass_breadcrumb {
  padding: 0 20px;
}
.intelligent_drawing-container
  .apass_breadcrumb
  > .el-breadcrumb
  .el-breadcrumb__inner {
  color: #626de9;
}
.intelligent_drawing-container
  .apass_breadcrumb
  > .el-breadcrumb
  .el-breadcrumb__item:last-child
  .el-breadcrumb__inner {
  color: #b4c0f5;
}
</style>
