<template>
  <div class="intelligent_details-container">
    <div class="apass_breadcrumb">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>在线组件工具</el-breadcrumb-item>
        <el-breadcrumb-item>智能制图</el-breadcrumb-item>
        <!-- <el-breadcrumb-item>资源详情</el-breadcrumb-item> -->
      </el-breadcrumb>
    </div>

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

<script>
const gisServiceUrl = window.serviceConfig.gisServiceRoot;
export default {
  data() {
    return {
      originUrl: gisServiceUrl + '/portal/apaasplat/viewer/item.html',
    };
  },
  computed:{
    itemUrl(){
      let _self = this;
      if(_self.$route.name == 'intelligent_details'){
        return `${_self.originUrl}?id=${_self.$route.query.id}&activeMenu=${_self.$route.query.activeMenu}`
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      window.addEventListener('message',this.postmassageevt)
    })
  },
  methods: {
    postmassageevt(event){
      let data = event.data;
      // App Builder页面 -- 新窗口打开
      if (data.cmd == 'mapviewtoapp'){
        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 == 'mapdetailtoview'){
        console.log(data);
        this.$store.commit("setZnztDetailsParams", data.params);
        this.$router.push('/intelligent_drawing')
      }
    }
  },
  destroyed () {
    window.removeEventListener('message',this.postmassageevt)
  }
};

</script>

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

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