<template>
  <div v-loading="loading" class="app-container">
    <iframe ref="companyIframe" marginwidth="0" marginheight="0" frameborder="0" scrolling="no" width="100%" :height="iframeHight" :src="src" />
  </div>
</template>

<script>
export default {
  name: 'PartyB',
  components: {

  },
  data() {
    return {
      loading: false, // 是否加载中
      iframeHight: window.innerHeight, // iframe高度
      scrollTop: 0, // 滚动条距离内部页面顶部距离
      secretId: '' // 需要携带的sdkId
    }
  },
  created() {
    if (this.$route.query.companyId) { // 获取companyId
      this.loading = true
      this.src = `https://pre-plug.jiansheku.com/enterprise/${this.$route.query.companyId}?secretId=${this.secretId}`
    }
  },
  mounted() {
    this.getInframeHight() // 实时控制iframe高度
    window.addEventListener('scroll', this.scrolling) // 监听页面滚动事件
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.scrolling) // 销毁页面滚动事件
  },
  methods: {
    getInframeHight() {
      const _this = this
      window.addEventListener('message', function(e) {
        const data = e.data
        const sc = document && document.documentElement.scrollTop || document && document.body.scrollTop
        if (data && typeof data === 'object') {
          // 动态设置iFrame高度
          if (data.height) {
            _this.iframeHight = data.height
            _this.loading = false
          }
          // 点击栏目名及子标签动态设置滚动高度
          if (data.scrollHeight) {
            window.scrollTo(sc, parseInt(data.scrollHeight) + 83)
          }
          // 点击下拉子标签动态设置滚动高度
          if (data.clientHeight) {
            window.scrollTo(sc, sc - 30)
          }
        }
      })
    },
    scrolling() {
      // 滚动条距文档顶部的距离
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      this.scrollTop = scrollTop
      // 准备传值
      this.$nextTick(() => {
        const ifa = this.$refs.companyIframe
        ifa.contentWindow.postMessage({ 'scrollTop': this.scrollTop }, '*')
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .app-container{
    padding: 0;
  }
</style>
