<template>
  <div >
    <header-menu :crumbs="crumbsList" @on-result-change="_headerMenuResult"/>
    <div :class="{'shrink-iview-layout-nuxt':isShrink}" class="iview-layout-nuxt">
      <nuxt v-if="isRouterAlive" />
    </div>
  </div>
</template>
<script>
// import Store from 'store2'
import headerMenu from '../components/headers/header-menu'
import Global from '../api/config'

export default {
  components: {
    headerMenu
  },
  data() {
    return {
      isShrink: false,
      crumbsList: [],
      show: false,
      isRouterAlive: false
    }
  },
  watch: {
    $route(newRoute) {
      this._setBreadCrumb(newRoute)
    }
  },
  mounted() {
    // this.show = true
    this._setBreadCrumb(this.$route)
    this.$nextTick(() => {
      this._initLoad()
    })
  },
  methods: {
    // 刷新
    _reload() {
      this.isRouterAlive = false
      this.$nextTick(() => {
        this.isRouterAlive = true
      })
    },
    // 初始化加载
    _initLoad() {
      if (!Global.getLn()) {
        // 暂时没有登录-跳到首页
        window.location.href = Global.ssoURL
      } else {
        this._reload()
      }
    },
    // 设置面包屑
    _setBreadCrumb(route) {
      this.crumbsList = this.$showBread(route)
      this._onpopstate(route)
    },
    _headerMenuResult(data) {
      this.isShrink = data
    },
    // 判断当前页面是否可以退回
    _onpopstate(route) {
      // 现在就剩如何获取上一个界面的路由？？？
      window.onpopstate = () => {
        history.go(1)
      }
    }
  }
}
</script>

<style>
.iview-layout-nuxt {
  position: absolute;
  top: 100px;
  left: 200px;
  background: #fff;
  width: -moz-calc(100% - 200px);
  width: -webkit-calc(100% - 200px);
  width: calc(100% - 200px);
  height: -moz-calc(100% - 100px);
  height: -webkit-calc(100% - 100px);
  height: calc(100% - 100px);
  overflow: auto;
  padding: 10px;
}
.shrink-iview-layout-nuxt {
  left: 60px;
  width: -moz-calc(100% - 60px);
  width: -webkit-calc(100% - 60px);
  width: calc(100% - 60px);
}
</style>
