<template>
  <Layout style="height: 100%" class="main">
    <div class="background-top"></div>
    <Sider hide-trigger collapsible :width="256" :collapsed-width="64" v-model="collapsed" class="left-sider" :style="{overflow: 'hidden'}">
      <side-menu class="side-menu" accordion ref="sideMenu" :active-name="$route.name" :collapsed="collapsed" @on-select="turnToPage" :menu-list="menuList">
        <!-- 需要放在菜单上面的内容，如Logo，写在side-menu标签内部，如下 -->
        <div class="logo-con">
          <img v-if="platfromLogo" :src="platfromLogo" alt="">
          <div v-else class="company-name">{{companyName}}{{$t('open_platform')}}</div>
        </div>
      </side-menu>
    </Sider>
    <Layout>
      <Header class="header-con">
        <header-bar :collapsed="collapsed" @on-coll-change="handleCollapsedChange">

          <!-- <p><span style="color: #999"></span> -->
          <user/>
          <div style="margin-right:20px;">
            <p style="color:#333333;font-size:16px;height:16px;margin-bottom:3px;"> {{ username }} </p>
            <p style="color: #666666;font-size:12px;height:12px;">{{ member_level_name }}</p>
          </div>
          <language v-if="$config.useI18n" @on-lang-change="setLocal" style="margin-right:20px;" :lang="local"/>
          <fullscreen v-model="isFullscreen" style="margin-right: 15px;"/>

          <!-- <error-store v-if="$config.plugin['error-store'] && $config.plugin['error-store'].showInHeader" :has-read="hasReadErrorPage" :count="errorCount"></error-store> -->
        </header-bar>
      </Header>
      <Content class="main-content-con">
        <Layout class="main-layout-con">
          <!-- <div class="tag-nav-wrapper">
            <tags-nav :value="$route" @input="handleClick" :list="tagNavList" @on-close="handleCloseTag"/>
          </div> -->
          <Content class="content-wrapper">
            <!-- <keep-alive> -->
              <router-view/>
            <!-- </keep-alive> -->
            <ABackTop :height="100" :bottom="80" :right="50" container=".content-wrapper"></ABackTop>
          </Content>
        </Layout>
      </Content>
    </Layout>
  </Layout>
</template>
<script>
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, mapState, mapGetters } from 'vuex'
import { getToken } from '@/libs/util'
import routers from '@/router/routers'
import minLogo from '@/assets/images/logo-min.png'
import maxLogo from '@/assets/images/logo.png'
import './main.less'
export default {
  name: 'Main',
  components: {
    SideMenu,
    HeaderBar,
    Language,
    // TagsNav,
    Fullscreen,
    ErrorStore,
    User,
    ABackTop
  },
  data () {
    return {
      token: getToken(),
      member_level: '',
      collapsed: false,
      minLogo,
      maxLogo,
      isFullscreen: false,
      // companyName: this.$store.state.user.p_name,
      platfromLogo: this.$store.state.user.p_logo
    }
  },
  computed: {
    ...mapGetters([
      'userMemberLevel'
    ]),
    ...mapState({
      username: state => state.user.userProfile.username,
      nickname: state => state.user.userProfile.nickname,
      member_level_name: state => state.user.userProfile.member_level_name
    }),
    // 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.getters.menuList //
      return this.$store.state.app.menuList //
    },
    local () {
      return this.$store.state.app.local
    },
    hasReadErrorPage () {
      return this.$store.state.app.hasReadErrorPage
    },
    unreadCount () {
      return this.$store.state.user.unreadCount
    }
  },
  methods: {
    ...mapMutations([
      'setBreadCrumb',
      // 'setTagNavList',
      'addTag',
      'setLocal',
      'setHomeRoute',
      'closeTag'
    ]),
    ...mapActions([
      'handleLogin'
      // 'getUnreadMessageCount'
    ]),
    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
    },
    // handleCloseTag (res, type, route) {
    //   if (type !== 'others') {
    //     if (type === 'all') {
    //       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.updateOpenName(newRoute.name)
    },
    '$i18n.locale' () {
      this.$router.go(0)
    }
  },
  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
    //   })
    // }
  }
}
</script>
<style lang="scss">
.logo-con{
  display: flex;
  justify-content: center;
  width: 100%;
  img {
    height:100%;
    width:100%;
    object-fit: contain;
    margin: 0 auto;
  }
}
  .ivu-menu-dark.ivu-menu-vertical .ivu-menu-item, .ivu-menu-dark.ivu-menu-vertical .ivu-menu-submenu-title {
    color: rgb(80, 80, 80)!important;
  }
  .ivu-card-head {
    span{
      float: left;
    margin-left: 10px;
    }
  }
  .left-sider {
    position: relative;
    .sider-footer {
      margin: 20px 0;
      width: 100%;
      text-align: center;
      font-size: 12px;
      color: #949aa5b3;
      letter-spacing: 1px;
      /* font-weight: 600; */
      z-index: 9999;
    }

    .logo-con {
      justify-content: left;
      align-items: center;
    }
    .company-name {
      font-size: 18px;
      color: #4a6de2;
      line-height: 44px;
      margin-left: 20px;
    }
  }
  .ivu-menu-dark.ivu-menu-vertical .ivu-menu-submenu .ivu-menu-item-active, .ivu-menu-dark.ivu-menu-vertical .ivu-menu-submenu .ivu-menu-item-active:hover {
    border-left: #70a9ef solid 10px !important;
    color: #fff !important;
    background: #486dbe !important;
}
</style>
