<template>
  <Layout style="height: 100%" class="main">
    <Sider hide-trigger collapsible :width="250" :collapsed-width="53" v-model="collapsed" class="left-sider">
      <side-menu accordion ref="sideMenu" :active-name="$route.name" :collapsed="collapsed" @on-select="turnToPage"
        :menu-list="menuList">
        <!-- 需要放在菜单上面的内容，如Logo，写在side-menu标签内部，如下 -->
        <div v-if="!collapsed" class="logo-con">
          <img src="@/assets/images/wfg_logo.png" key="max-logo" />
        </div>
        <div v-else class="logo-con min-logo">
          <img class="min-logo-pic" src="@/assets/images/min_wfg_logo.png" key="min-logo" />
        </div>
      </side-menu>
    </Sider>
    <Layout>
      <Header class="header-con">
        <header-bar :collapsed="collapsed" @on-coll-change="handleCollapsedChange">
          <user :user-avatar="userAvatar" />
          <!--<theme style="margin: 0 5px;"></theme>
           <fullscreen v-model="isFullscreen" style="margin-right: 10px;"/>
           <Poptip placement="right" width="350" height="570">
            <Button type="text">
              <Icon custom="iconfont icon-icon-liaotian" style="margin-right:2px" />
              联系客服
            </Button>
            <div class="api" slot="content">
              <img src="@/assets/images/customer-service.jpg" style="width:100%;height: 100%" />
            </div>
          </Poptip>

           <Button type="text" style="margin-top:13px" @click="buyEdition">
            <Icon type="md-cart" size="16" style="margin-right:2px;color: #D81E06;" />
           </Button>-->
          <!--<Button type="text" style="margin-top:13px">
              <Icon type="md-cart" size="16" style="margin-right:2px;color: #999;" />
            </Button>-->
          <msg />
        </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 v-if="!!keepAlive" style="height: 100%;width: 100%;box-sizing: border-box;" />
            </keep-alive>
            <router-view v-if="!keepAlive" style="height: 100%;width: 100%;box-sizing: border-box;" />
            <ABackTop :height="100" :bottom="80" :right="50" container=".content-wrapper"></ABackTop>
          </Content>
        </Layout>
      </Content>
    </Layout>
  </Layout>
</template>
<script>
import SideMenu from '_c/main/components/sideMenu/SideMenu'
import HeaderBar from '_c/main/components/headerBar/HeaderBar'
import TagsNav from '_c/main/components/tagsNav/TagsNav'
import User from '_c/main/components/user/User'
import ABackTop from '_c/main/components/backTop/BackTop'
// import Fullscreen from '_c/main/components/fullscreen/Fullscreen'
// import Theme from '_c/main/components/theme/Theme'
import { mapMutations, mapState } from 'vuex'
import { getNewTagList, routeEqual, objEqual } from '@/utils'

export default {
  name: 'Main',
  components: {
    SideMenu,
    HeaderBar,
    TagsNav,
    // Fullscreen,
    User,
    ABackTop,
    // Theme,
    // Msg
  },
  data () {
    return {
      collapsed: false,
      isFullscreen: false,
    }
  },
  computed: {
    ...mapState({
      tagNavList: (state) => state.auth.tagNavList,
      userAvatar: (state) => state.auth.avatarImgPath,
      mainPage: (state) => state.auth.mainPage,
    }),
    keepAlive () {
        return this.$route.meta.keepAlive
    },
    menuList () {
      return this.$store.getters.menuList
    }
  },
  methods: {
    ...mapMutations([
      'setBreadCrumb',
      'setTagNavList',
      'addTag',
      'closeTag'
    ]),
    turnToPage (route) {
      let { name, params, query } = {}
      // 当路由为页面配置为页面跳转
      if (typeof route === 'string') {
        name = route
      } else {
        // 如果为当前页面, 如果参数不一样，允许执行
        if (this.$route.name === route.name &&
          objEqual(this.$route.query, route.query) &&
          objEqual(this.$route.params, route.params)) {
          return
        }
        name = route.name
        params = route.params
        query = route.query
      }
      // 获取当前点击的一级菜单title
      let menuData = this.$store.getters.menuList
      menuData.forEach(item => {
        item.children && item.children.forEach(v => {
          if (name === v.name) {
            localStorage.setItem('firstMenuName', item.name)
          }
        })
      })
      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.$store.state.auth.indexPage)
        } else {
          if (routeEqual(this.$route, route)) {
            this.closeTag(route)
          }
        }
      }
      this.setTagNavList(res)
    },
    handleClick (item) {
      this.turnToPage(item)
    },
    // 购买版本
    buyEdition () {
      this.$router.push({
        path: '/edition'
      })
    },
  },
  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)
    }
  },
  mounted () {
    /**
     * @description 初始化设置面包屑导航和标签导航
     */
    this.setTagNavList()
    const { name, params, query, meta } = this.$route
    this.addTag({
      route: { name, params, query, meta }
    })
    this.setBreadCrumb(this.$route)
    // 如果当前打开页面不在标签栏中，跳到homeName页
    if (!this.tagNavList.find(item => item.name === this.$route.name)) {
      this.$router.push({
        name: this.$store.state.auth.indexPage
      })
    }
    // 获取租户信息
  }
}
</script>
<style lang="less" scoped>
.main {
  .logo-con {
    background: #ede9fe;
    overflow: hidden;
    padding: 25px 15px 0px 15px;
    img {
      height: 32px;
      width: 96px;
      display: block;
    }
    .min-logo-pic {
      width: 31px;
      height: 36px;
    }
  }
  .min-logo {
    background: #9146ff;
    padding: 25px 11px 0px 11px;
  }
  .header-con {
    background: #fff;
    padding: 0 20px;
    width: 100%;
    height: 53px;
    line-height: 53px;
  }

  .main-layout-con {
    height: 100%;
    overflow: hidden;
  }

  .main-content-con {
    height: ~'calc(100% - 60px)';
    overflow: hidden;
  }

  .tag-nav-wrapper {
    padding: 0;
    height: 40px;
    background: #f0f0f0;
  }
  .content-wrapper {
    padding: 18px;
    height: ~'calc(100% - 80px)';
    overflow: auto;
    background: #fff;
  }
  .left-sider {
    overflow: hidden;
    background: #9146ff;
    .ivu-layout-sider-children {
      overflow-y: scroll;
      margin-right: -18px;
    }
  }
}
/deep/.ivu-menu-light {
  background: #ede9fe;
}
/deep/.ivu-menu-light.ivu-menu-vertical .ivu-menu-submenu-title:hover {
  color: #5b21b6;
}
/deep/.ivu-menu-light.ivu-menu-vertical .ivu-menu-item:hover {
  color: #5b21b6;
}
/deep/.ivu-menu-light.ivu-menu-vertical
  .ivu-menu-item-active:not(.ivu-menu-submenu) {
  color: #ffffff;
  background: #7c3aed;
  border-radius: 4px;
  z-index: 2;
}
/* .ivu-menu-light.ivu-menu-vertical .ivu-menu {
  background: #F0F0F2;
  margin: 10px;
} */
/deep/.ivu-menu-light.ivu-menu-vertical
  .ivu-menu-item-active:not(.ivu-menu-submenu):after {
  content: '';
  display: block;
  width: 0;
  position: absolute;
  top: 10px;
  bottom: 10px;
  right: 10px;
  background: #7c3aed;
}

/deep/.side-menu-wrapper .ivu-menu-submenu .ivu-menu {
  background: #ede9fe;
  padding: 0 0 10px 10px;
}
/deep/ .ivu-breadcrumb > span:last-child {
  color: #000;
  font-weight: 500;
}

/deep/.ivu-menu-item,
/deep/.ivu-menu-submenu-title {
  //border-bottom: 1px solid #d1d5db;
  color: #000;
  padding: 10px !important;
  margin-top: 20px;
}
/deep/.ivu-menu-item::before {
  // content: '';
  // display: block;
  // width: 100%;
  // height: 1px;
  // position: absolute;
  // bottom: -10px;
  // right: 0px;
  // background: #d1d5db;
}
/deep/.ivu-menu-submenu > .ivu-menu > .ivu-menu-item::before {
  height: 0;
}
/deep/.ivu-menu-submenu > .ivu-menu > .ivu-menu-item > i {
  margin-right: 8px !important;
}
.collased-menu-dropdown {
  width: 100%;
  margin: 0;
  line-height: normal;
  padding: 7px 0 6px 16px;
  clear: both;
  font-size: 12px !important;
  white-space: nowrap;
  list-style: none;
  cursor: pointer;
  transition: background 0.2s ease-in-out;
  &:hover {
    background: rgba(100, 100, 100, 0.1);
  }
  & * {
    color: #666666;
  }
  .ivu-menu-item > i {
    margin-right: 12px !important;
  }
  .ivu-menu-submenu > .ivu-menu > .ivu-menu-item > i {
    margin-right: 8px !important;
  }
  .collapsed-menu i {
    color: #fff;
  }
}
.ivu-select-dropdown.ivu-dropdown-transfer {
  max-height: 400px;
}
/deep/.ivu-menu-vertical {
  overflow-y: auto !important;
  height: ~'calc(100vh - 53px)' !important;
  padding: 0 15px 15px 15px;
}
/deep/.ivu-menu-vertical::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 1px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
/deep/.ivu-menu-vertical.ivu-menu-light:after {
  width: 0;
}
/deep/.ivu-menu-vertical .ivu-menu-submenu-title-icon {
  right: 0px;
}
</style>
