<template>
  <div>
    <el-tabs v-if="openTab && openTab.length > 0" v-model="activeIndex" class="nav-tab menu-tab-container" closable @tab-remove="closeSelectedTag">
      <el-tab-pane v-for="tag in openTab" :key="tag.code" :label="tag.name" :name="tag.code">
        <iframe ref="tabMainContent" :src="getFullPath(tag)" class="tab-main-content" name="tab-main-content" frameborder="0" />
      </el-tab-pane>
    </el-tabs>
    <div class="default-page-tip">
      <div class="default-page-tip-msg">
        <div class="default-page-tip-item">
          {{ defaultPageTipCn }}
        </div>
        <div class="default-page-tip-item">
          {{ defaultPageTipEn }}
        </div>
      </div>
      <copyright />
    </div>
  </div>
</template>
<style rel="stylesheet/scss" lang="scss" scoped>
iframe.tab-main-content{
  width: 100%;
  height: calc(100vh - 53px);
}
</style>
<script>
import Vue from 'vue'
import { mapGetters } from 'vuex'
export default {
  name: 'TabContent',
  data() {
    let defaultPageTip = Vue.prototype.defaultPageTip
    if (!defaultPageTip) {
      defaultPageTip = '欢迎访问质量管理系统/Welcome to Quality Management System'
    }
    let defaultPageTipCn = defaultPageTip
    let defaultPageTipEn
    if (defaultPageTip && defaultPageTip.indexOf('/') > 0) {
      defaultPageTipCn = defaultPageTip.substring(0, defaultPageTip.lastIndexOf('/'))
      defaultPageTipEn = defaultPageTip.substring(defaultPageTip.lastIndexOf('/') + 1)
    }
    return {
      defaultPageTipCn,
      defaultPageTipEn
    }
  },
  computed: {
    ...mapGetters([
      'openTab'
    ]),
    activeIndex: {
      get() {
        return this.$store.state.tabContent.activeIndex
      },
      set(val) {
        this.$store.commit('set_active_index', val)
      }
    }
  },
  created() {
    // 登录超时，给父iframe发送信号
    window.addEventListener('message', this.recieveMessage)
  },
  methods: {
    closeSelectedTag(tagName) {
      const index = this.$store.state.tabContent.openTab.findIndex((item) => item.code === tagName)
      const view = this.$store.state.tabContent.openTab[index]
      this.$store.commit('delete_tabs', view)
      if (tagName === this.activeIndex) {
        // 表示删除的是当前选中的菜单，选中前面的菜单
        this.toLastView(this.$store.state.tabContent.openTab, index > 0 ? (index - 1) : 0)
      }
    },
    toLastView(visitedViews, lastIndex) {
      if (visitedViews && visitedViews.length > 0 && visitedViews.length > lastIndex) {
        const latestView = visitedViews[lastIndex]
        if (latestView) {
          this.$store.commit('set_active_index', latestView.code)
        }
      }
    },
    getFullPath(tag) {
      let path
      if (tag.routePath === '/iframe-page/page') {
        // 表示是iframe页面
        let src
        let params = ''
        if (tag.routeQuery) {
          for (const key in tag.routeQuery) {
            if (key === 'src') {
              src = tag.routeQuery[key]
            } else {
              params += key + '=' + tag.routeQuery[key] + '&'
            }
          }
        }
        if (src) {
          path = src
        }
        if (params) {
          path += '?' + params
        }
      } else {
        // 表示页面跳转
        path = '#' + tag.routePath + '?'
        if (tag.routeQuery) {
          for (const key in tag.routeQuery) {
            path += key + '=' + tag.routeQuery[key] + '&'
          }
        }
      }
      if (path && path.length > 0 && path.lastIndexOf('&') === path.length - 1) {
        path = path.substring(0, path.lastIndexOf('&'))
      }
      return path
    },
    recieveMessage(event) {
      if (event && typeof event.data === 'string' && event.data.indexOf('loginTimeout') >= 0) {
        // 表示iframe中的页面发送了登录超时的信号，将信号传给最外层window
        console.log('tab-content-接收到登录超时的信息---event.data=', event.data)
        window.parent.postMessage(event.data, '*')
      } else if (event && typeof event.data === 'string' && event.data === 'return-to-system-list') {
        // 表示系统元数据/设计页面点击了“返回“按钮，需要返回到系统九宫格列表页面
        this.$store.commit('clear_tabs')
        this.$router.push({ path: '/mms/systems/list' })
      }
    }
  }
}
</script>

<style>
.nav-tab {
  padding-top: 5px;
  padding-left: 5px;
}
.nav-tab .el-tabs__header{
  margin: 0;
  /* border-bottom: 0px; */
}
.menu-tab-container .el-tabs__content{
  padding: 0;
}
.default-page-tip {
	width: 100%;
	position: absolute;
	height: 100vh;
	background: #f7f7f8;
}
.default-page-tip-msg {
  padding-top: 25%;
  padding-bottom: 30%;
  font-size: 24px;
  font-weight: 600;
  text-align: center;
  color: gray;
}
.default-page-tip-item {
  padding-top: 10px;
}
</style>
