<template>
  <Layout class="main" style="min-width: 1100px;">
    <Header class="header-con">
      <header-bar
        :collapsed="collapsed"
        @sr-handle="srHandle"
        @on-coll-change="handleCollapsedChange"
      ></header-bar>
    </Header>
    <Content class="main-content-con">
      <Layout
        style="height: 100%;"
        :style="{ background: isHome ? 'transparent' : '' }"
      >
      <!-- v-show="!hiddenSiderList.includes(access)" -->
        <Sider
          
          hide-trigger
          collapsible
          :width="200"
          :collapsed-width="75"
          v-model="collapsed"
          class="left-sider"
          :style="{ overflow: 'hidden' }"
        >
          <side-menu
            accordion
            ref="sideMenu"
            :active-name="$route.name"
            :collapsed="collapsed"
            @on-select="turnToPage"
            :menu-list="menuList"
          >
          </side-menu>
          <div class="collapsed" style="">
            <sider-trigger
              :collapsed="collapsed"
              icon="md-menu"
              @on-change="handleCollpasedChange"
            ></sider-trigger>
          </div>
        </Sider>
        <Content>
          <Layout class="main-layout-con">
            <div
              class="tag-nav-wrapper"
              v-if="!isHiddenHeaderBar && !hiddenBoardList.includes(access)"
            >
              <tags-nav
                :value="$route"
                @input="handleClick"
                :list="tagNavList"
                @on-close="handleCloseTag"
              />
            </div>
            <Content class="content-wrapper">
              <keep-alive :include="cacheList">
                <router-view />
              </keep-alive>
              <ABackTop
                :height="100"
                :bottom="80"
                :right="50"
                container=".content-wrapper"
              ></ABackTop>
            </Content>
          </Layout>
        </Content>
      </Layout>
    </Content>
  </Layout>
</template>
<script>
import siderTrigger from './components/header-bar/sider-trigger/sider-trigger'
import SideMenu from './components/side-menu'
import HeaderBar from './components/header-bar'
import TagsNav from './components/tags-nav'
import User from './components/user'
import ABackTop from './components/a-back-top'
import Fullscreen from './components/fullscreen'
import Language from './components/language'
import ErrorStore from './components/error-store'
import { mapMutations, mapActions, mapGetters } from 'vuex'
import { getNewTagList, routeEqual } from '@/libs/util'
import routers from '@/router/routers'
import maxLogo from '@/assets/images/avator.png'
import './main.less'
export default {
  name: 'Main',
  components: {
    SideMenu,
    HeaderBar,
    Language,
    TagsNav,
    Fullscreen,
    ErrorStore,
    User,
    ABackTop,
    siderTrigger
  },
  data () {
    return {
      collapsed: false,
      maxLogo,
      isFullscreen: false,
      userName: this.$store.state.user.name,
      access: this.$store.state.user.access,
      menuList:[],
      hiddenBoardList: ['supplier'], // 不显示导航标签的角色
      hiddenSiderList: [''] // 不显示侧边菜单的角色 manager老板角色
    }
  },
  computed: {
    ...mapGetters(['errorCount']),
    /* 是否为首页 */
    isHome () {
      return this.$route.name === 'home'
    },
    /* 隐藏头部标签选项卡 */
    isHiddenHeaderBar () {
      let hiddenRoute = this.$route.meta.hideInHeaderBar
      return hiddenRoute
    },
    isHiddenMenu () {
      let hiddenRoute = ['provider_shipment_manage']
      if (hiddenRoute.includes(this.$route.name)) {
        return false
      } else {
        return true
      }
    },
    tagNavList () {
      return this.$store.state.app.tagNavList
    },
    tagRouter () {
      return this.$store.state.app.tagRouter
    },
    userAvatar () {
      return this.$store.state.user.avatarImgPath
    },
    cacheList () {
      const list = [
        'ParentView',
        ...(this.tagNavList.length
          ? this.tagNavList
              .filter(item => !(item.meta && item.meta.notCache))
              .map(item => item.name)
          : [])
      ]
      return list
    },
    // menuList () {
    //   return this.$store.state.user.menu
    // },
    local () {
      return this.$store.state.app.local
    },
    hasReadErrorPage () {
      return this.$store.state.app.hasReadErrorPage
    },
    unreadCount () {
      return this.$store.state.user.unreadCount
    }
  },
  created(){
    this.getMenu()
  },
  methods: {
    ...mapMutations([
      'setBreadCrumb',
      'setTagNavList',
      'addTag',
      'setLocal',
      'setHomeRoute',
      'closeTag'
    ]),
    getMenu(){
      this.$get('/api/blade-system/menu/routes').then((res) => {
        res.data.map(item=>{
          if(item.id === '1585525818292314114') this.menuList = item.children
        })
      })
    },
    ...mapActions(['handleLogin']),
    /*
     * @description 长连接通知统一处理
     * @param {String} e 事件名称
     * @param {any} data 数据
     */
    srHandle (e, data) {},
    turnToPage (route) {
      let { name, params, query } = {}
      if (typeof route === 'string') name = route
      else {
        name = route.name
        params = route.params
        query = route.query
      }
      if (name.indexOf('isTurnByHref_') > -1) {
        window.open(name.split('_')[1])
        return
      }
      this.$router.push({
        name,
        params,
        query
      })
    },
    handleCollapsedChange (state) {
      this.collapsed = state
    },
    handleCollpasedChange (state) {
      this.collapsed = !this.collapsed
    },
    handleCloseTag (res, type, route) {
      if (type !== 'others') {
        if (type === 'all') {
          let menus = this.$store.state.user.menu
          let home = menus.find(item => item.name === '_home')
          if (!home && menus[0]) {
            this.turnToPage(menus[0].children[0].name)
          } else {
            this.turnToPage(this.$config.homeName)
          }
        } else {
          if (routeEqual(this.$route, route)) {
            this.closeTag(route)
          }
        }
      }
      this.setTagNavList(res)
    },
    handleClick (item) {
      this.turnToPage(item)
    }
  },
  watch: {
    $route (newRoute) {
      const { name, query, params, meta } = newRoute
      this.addTag({
        route: { name, query, params, meta },
        type: 'push'
      })
      this.setBreadCrumb(newRoute)
      this.setTagNavList(getNewTagList(this.tagNavList, newRoute))
      this.$refs.sideMenu && this.$refs.sideMenu.updateOpenName(newRoute.name)
    }
  },
  mounted () {
    /**
     * @description 初始化设置面包屑导航和标签导航
     */
    this.setTagNavList()
    this.setHomeRoute(routers)
    const { name, params, query, meta } = this.$route
    this.addTag({
      route: { name, params, query, meta }
    })
    this.setBreadCrumb(this.$route)
    // 设置初始语言
    this.setLocal(this.$i18n.locale)
    // 如果当前打开页面不在标签栏中，跳到homeName页
    if (!this.tagNavList.find(item => item.name === this.$route.name)) {
      // this.$router.push({
      //   name: this.$config.homeName
      // })
      this.$router.push({
        name: this.$store.state.user.menu[0].children[0].name
      })
    }
  }
}
</script>
<style>
.ivu-menu-submenu a {
  text-decoration: none;
}

</style>
