<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";
export default {
  data() {
    return {
      url:'https://apaasgis.wodcloud.com/portal/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',event =>{
        let data = event.data;
        // 智能制图发布服务
        if (data.cmd == 'mapviewmsg'){
          console.log(data);
          this.$store.commit("setZnztParams", data.params);
          this.$router.push(`/fwzc/fwcs`);
        }
        // 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;
          }
        }
      })
    })
  },
  methods: {},
  destroyed () {
    window.removeEventListener('message')
  } 
};
</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>
