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

export default {
  components: {
    headerMenu
  },
  data() {
    return {
      isShrink: false,
      crumbsList: []
    }
  },
  watch: {
    $route(newRoute) {
      this._setBreadCrumb(newRoute)
    }
  },
  mounted() {
    this.$nextTick(() => {
      this._initLoad()
    })
  },
  methods: {
    // 初始化加载
    _initLoad() {
      if (!global.getLn()) {
        // 暂时没有登录-跳到首页
        // window.location.href = global.ssoURL
        this.$router.push({ path: '/login', query: {} })
        // window.location.href = global.WEB_URL + '/login'
      } else {
        this._setBreadCrumb(this.$route)
        if (!Store.session('showBtnList')) {
          this._getPermissionBtn()
        }
      }
    },
    // 获取按钮权限
    _getPermissionBtn: async function() {
      const result = await sysResource.getBtn({ theme: global.getCode() })
      Store.session('showBtnList', result.join(','))
      // this.$store.commit('showBtnList', result)
    },
    // 设置面包屑
    _setBreadCrumb(route) {
      this.crumbsList = this.$showBread(route)
      if (Store.get('navTags') === 'true') {
        // 根据路由 新增tab 标签(前提是多标签是打开的状态)
        const tagsObj = {
          name: route.meta.title,
          uri: route.path
        }
        this.$store.commit('createTag', tagsObj)
      }
    },
    _headerMenuResult(data) {
      this.isShrink = data
    }
  }
}
</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>
