<template>
  <div>
    <!--头部 header-->
    <div
      :class="{'background-black':skin==='black_b','background-green':skin==='green_g',
      'background-blue':skin==='blue_b','theme-star':skin ==='theme-star'}"
      style="height:60px;width:100%;position: fixed">
      <header-top
                  :menu-list="menuList"
                  :menu-theme="menuTheme"
                  :img-url="imgUrl"
                  @on-result-change="_headerTopResult"
                  @on-tag-result-change="_tagResult"
                  @on-skin-result-change="_skinResult"
                  />
    </div>
    <div>
      <!--左侧菜单 menu-->
      <div :class="{'shrink-menu-list-cont':isShrink}" class="menu-list-cont background-black-menu">
        <div style="color: #fff;">
          <!--展开时的菜单-->
          <side-bar-menu
            :isShrink = 'isShrink'
            :menu-list="menuListTemp"
            :menu-theme="menuTheme"
            :active-text-color="activeTextColor"/>
        </div>
      </div>
      <!--右侧面包屑 bread-->
      <div :class="{'shrink-bread-list-cont':isShrink,'skin-star-bread':skin ==='theme-star'}" class="bread-list-cont">
        <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/side-bar-menu'
import SideBarMenu from '../menus/sideBarMenu'
// import ShrinkSideBarMenu from '../menus/shrink-side-bar-menu'
import breadCrumbs from '../base/breadCrumbs'
import { sysResource, sysUser } from '../../api'
import global from '../../api/config'
import Tags from '../tags/tags'
import headerTop from './header-top'
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: '',
      imgUrl: ''
    }
  },
  mounted() {
    if (global.getLn()) {
      this._getNavMenu()
      this._getPermissionBtn()
      this._tags()
      this._skin()
      this._imgSrc()
    }
  },
  methods: {
    // 获取动态logo
    async _imgSrc() {
      const result = await sysUser.getUserInfo()
      if (result) {
        global.setUserInfo(result)
        this._getLogo(result)
      }
    },
    _getLogo(u) {
      if (u && u.logo) {
        this.imgUrl = global.baseURL + '/base/v1/company/logo?key=' + u.logo
      } else {
        this.imgUrl = `${global.staticURL}/img/logo1.png`
      }
    },
    // 获取皮肤
    _skin() {
      this.skin = localStorage.getItem('themeFile')
        ? localStorage.getItem('themeFile')
        : 'black_b'
      this._skinResult(this.skin)
    },
    // 获取导航及其菜单
    _getNavMenu: async function() {
      const result = await sysResource.getNavMenuAll()
      // this.menuListTemp = result[index].leftMenus.reverse()
      // 逻辑处理
      const zero = []
      const notZero = result.filter(o => {
        if (o.pid === '0') zero.push(o)
        return o.pid !== '0'
      })
      this._recursion(notZero, [zero[0]])
      this.menuListTemp = zero[0].leftMenus
      this.menuList = zero
    },
    // 递归查询菜单
    _recursion(more, rest) {
      rest.forEach(item => {
        const ool = more.filter(i => i.pid === item.id)
        if (ool.length !== 0) {
          item.leftMenus = ool
          this._recursion(more, ool)
        }
      })
    },
    // 获取按钮权限
    _getPermissionBtn: async function() {
      const result = await sysResource.getBtn()
      Store.session('showBtnList', result ? result.join(',') : [])
      // console.log('获取按钮权限===', result)
    },
    _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
      }
    },
    // 皮肤
    _skinResult(data) {
      this.skin = data
      switch (data) {
        case 'green_g':
          this.activeTextColor = '#32b16c'
          break
        default:
          this.activeTextColor = '#00a0e9'
      }
    }
  }
}
</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: 70px;
}
.shrink-bread-list-cont {
  left: 60px;
  width: -moz-calc(100% - 60px);
  width: -webkit-calc(100% - 60px);
  width: calc(100% - 60px);
}
</style>
