<template>
  <div v-show="currentIframeRoute" class="app-container" :style="siteContentViewHeight">
    <iframe
      v-for="item in iframeRouteList"
      v-show="currentIframeRoute && item.name === currentIframeRoute.name"
      :id="item.name"
      ref="iframeRoute"
      :key="item.name"
      :src="item.url"
      class="iframe"
    />
  </div>
</template>

<script>
import { param } from 'ecip-web/utils'

export default {
  name: 'RouteIframe',
  components: { },
  data() {
    return {
      allIframeList: []
    }
  },
  computed: {
    documentClientHeight: {
      get() {
        return this.$store.state.app.documentClientHeight
      }
    },
    siteContentViewHeight() {
      const height = this.documentClientHeight - 90
      return this.currentIframeRoute ? 'height:' + height + 'px' : 'minHeight:' + height + 'px'
    },
    currentIframeRoute: {
      get() {
        return this.$store.state.tagsView.currentIframeRoute
      },
      set(val) {
        this.$store.commit('tagsView/SET_CURRENT_IFRAME_ROUTE', val)
      }
    },
    iframeRouteList: {
      get() {
        return this.$store.state.tagsView.iframeRouteList
      },
      set(val) {
        this.$store.commit('tagsView/SET_IFRAME_ROUTE_LIST', val)
      }
    },
    menuActiveName: {
      get() {
        return this.$store.state.app.menuActiveName
      },
      set(val) {
        this.$store.commit('app/SET_MENU_ACTIVE_NAME', val)
      }
    },
    topMenuActiveIndex: {
      get() {
        return this.$store.state.app.topMenuActiveIndex
      },
      set(val) {
        this.$store.commit('app/SET_TOP_MENU_ACTIVE_INDEX', val)
      }
    }
  },
  watch: {
    $route() {
      this.openIframe()
    }
  },
  created() {
    this.$events.$on('refreshIframe', (route) => {
      const iframe = document.getElementById(route.name)
      if (!iframe) {
        return
      }
      iframe.src = iframe.src
    })
    this.$events.$on('clickIframe', (route) => {
      const iframeMenu = this.iframeRouteList.filter(item => item.name === (route.query && route.query.name))
      if (iframeMenu && iframeMenu.length > 0) {
        const menu = iframeMenu[0]
        this.$store.commit('app/SET_SHOW_TAGS', menu)
        this.$store.commit('app/SET_SHOW_SIDEBAR', menu)
        this.topMenuActiveIndex = menu.meta && menu.meta.topParentId || ''
      }
    })
    this.allIframeList = JSON.parse(sessionStorage.getItem('allIframeList') || '[]')
    this.openIframe()
  },
  beforeDestroy() {
    this.$events.$off('refreshIframe', {})
    this.$events.$off('clickIframe', {})
  },
  methods: {
    openIframe() {
      const item = this.$route
      if (!item.meta || !item.meta.isIframe) {
        this.currentIframeRoute = null
        return
      }
      const menuId = item.query.name || item.query.src
      // const url = item.meta.iframeUrl || item.query.src
      const target = this.iframeRouteList.filter(item => item.name === menuId)
      // console.log(target)
      if (target && target.length > 0) {
        this.currentIframeRoute = target[0]
        this.menuActiveName = menuId
        return
      }
      const iframeMenu = this.allIframeList.filter(item => item.name === menuId)
      let route
      if (iframeMenu.length > 0) {
        // console.log(iframeMenu)
        const url = item.query.src || iframeMenu[0].meta.iframeUrl
        const query = Object.assign({}, item.query)
        delete query.src
        const queryParam = param(query)
        if (url.indexOf('?') > -1) {
          iframeMenu[0].url = `${url}&${queryParam}`
        } else {
          iframeMenu[0].url = `${url}?${queryParam}`
        }
        route = iframeMenu[0]
      } else {
        route = { name: menuId, path: `/${menuId}`, meta: { title: item.query.title, isIframe: true }}
        const url = item.query.src
        const query = Object.assign({}, item.query)
        delete query.src
        const queryParam = param(query)
        let fullUrl
        if (url.indexOf('?') > -1) {
          fullUrl = `${url}&${queryParam}`
        } else {
          fullUrl = `${url}?${queryParam}`
        }
        route.url = fullUrl
        route.meta.iframeUrl = fullUrl
      }

      // console.log(route)
      this.iframeRouteList.push(route)
      this.currentIframeRoute = route
      this.menuActiveName = menuId
      this.topMenuActiveIndex = route.meta && route.meta.topParentId || ''
      this.$store.dispatch('tagsView/addVisitedView', route)
    }
  }
}
</script>
<style lang="scss" scoped>
  .iframe {
    width: 100%;
    height: 100%;
    border: 0;
    overflow: hidden;
    box-sizing: border-box;
  }
</style>
