<template>
  <div>
    <!--头部 header-->
    <div
      style="height:60px;width:100%;position: fixed"
      class="background-black"
    >
      <header-top
        :menu-list="menuList"
        :menu-theme="menuTheme"
        @on-result-change="_headerTopResult"
        @on-tag-result-change="_tagResult"
      />
    </div>
    <div>
      <!--左侧菜单 menu-->
      <div class="menu-list-cont background-black-menu" :class="{'shrink-menu-list-cont':isShrink}">
        <div style="color: #fff;">
          <!--展开时的菜单-->
          <side-bar-menu
            v-show="!isShrink"
            :menu-list="menuListTemp"
            :menu-theme="menuTheme"
          />
          <!--收缩时的菜单-->
          <shrink-side-bar-menu
            v-show="isShrink"
            :menu-list="menuListTemp"
            :menu-theme="menuTheme"
          />
        </div>
      </div>
      <!--右侧面包屑 bread-->
      <div class="bread-list-cont" :class="{'shrink-bread-list-cont':isShrink,'skin-star-bread':skin ==='theme-star'}">
        <bread-crumbs v-if="!navTags" :crumbs="crumbs" />
        <Tags v-else class="tags-con" />
      </div>
    </div>
  </div>
</template>
<script>
import Store from 'store2'
import SideBarMenu from '../menus/sideBarMenu'
import ShrinkSideBarMenu from '../menus/shrinkSideBarMenu'
import breadCrumbs from '../base/breadCrumbs'
import { sysResource } from '../../api'
import global from '../../api/config'
import Tags from '../tags/tags'
import headerTop from './headerTop'
export default {
  components: {
    headerTop,
    SideBarMenu,
    ShrinkSideBarMenu,
    breadCrumbs,
    Tags
  },
  props: ['crumbs'],
  data() {
    return {
      isShrink: false,
      menuList: [],
      menuTheme: 'dark',
      // 识别不了数组json?
      menuListTemp: [],
      navTags: false,
      // 默认 黑色
      skin: 'black_b',
      activeTextColor: ''
    }
  },
  mounted() {
    if (global.getLn()) {
      this._getNavMenu()
      this._tags()
    }
  },
  methods: {
    // 获取导航及其菜单
    _getNavMenu: async function() {
      const navInfo = global.getCommonInfo('nav')
      let index = ''
      console.log('navInfo', navInfo)
      if (navInfo) {
        // 存在
        // this.menuList = navInfo
        this.menuList = await sysResource.getNavMenu()
        console.log('this.menuList--------', this.menuList)
      } else {
        this.menuList = await sysResource.getNavMenu()
        console.log('this.menuList--1111111111------', this.menuList)
        global.setCommonInfo('nav', this.menuList)
      }
      for (let i = 0; i < this.menuList.length; i++) {
        if (this.menuList[i].code === global.getCode()) {
          index = i
          break
        }
      }
      this.menuListTemp = this.menuList[index].leftMenus
    },
    _headerTopResult(data) {
      this.isShrink = data
      this.$emit('on-result-change', data)
    },
    // 刷新控制 tags关闭与否
    _tags() {
      if (Store.get('navTags') === 'true') {
        // 打开
        this.navTags = true
      } else {
        this.navTags = false
      }
    },
    // 判断tag标签是否关闭
    _tagResult(data) {
      switch (data) {
        case 'navTags-true':
          // 打开多任务标签
          this.navTags = true
          break
        case 'navTags-false':
          // 关闭多任务标签
          this.navTags = false
          break
      }
    }
  }
}
</script>
<style>
.menu-list-cont {
  position: fixed;
  width: 200px;
  overflow: auto;
  margin-top: 60px;
  height: -moz-calc(100% - 60px) !important;
  height: -webkit-calc(100% - 60px) !important;
  height: calc(100% - 60px) !important;
}
.bread-list-cont {
  position: fixed;
  left: 200px;
  top: 60px;
  height: 40px;
  line-height: 40px;
  background: #f5f7f9;
  width: -moz-calc(100% - 200px);
  width: -webkit-calc(100% - 200px);
  width: calc(100% - 200px);
}
.shrink-menu-list-cont {
  width: 60px;
}
.shrink-bread-list-cont {
  left: 60px;
  width: -moz-calc(100% - 60px);
  width: -webkit-calc(100% - 60px);
  width: calc(100% - 60px);
}
</style>
