<template>
  <el-container class="body">
    <el-aside :width="getCollapseState?'64px':'220px'">
      <Aside></Aside>
    </el-aside>
    <el-container class="main">
      <el-header>
        <Header></Header>
        <AsideTitle></AsideTitle>
      </el-header>
      <el-main>
        <!--页面的展示-->
        <transition name="compAnimate" appear>
          <keep-alive>
            <router-view :style="{marginTop: '55px'}" :key="key"></router-view>
          </keep-alive>
        </transition>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
import Aside from './leftAside/Aside'
import Header from './rightMain/Header'
import AsideTitle from './rightMain/AsideTitle'
import Crumbs from './rightMain/Crumbs'
import { mapGetters } from 'vuex'
export default {
  name: 'Home',
  computed: {
    ...mapGetters({
      getCollapseState: 'header/CollapseState',
      getNavs: 'header/Navs',
      getAsideTitle: 'header/AsideTitle',
      getCount: 'header/Count'
    }),
    key() {
      return this.$route.path
    }
  },
  watch: {
    $route: function (to) {
      this.createTabs(to.path)
    }
  },
  methods: {
    /**
       * 动态添加标题标签函数
       * path：当前点击左侧导航的path
       * 1.首先会处理welcome（首页）页，welcome页已在vuex中初始化了，所以，当用户再次点击时，直接定位到首页即可
       * 2.如果不是首页，则会通过当前导航的path去和左侧导航数据比对，如果path相等存入vuex asideTitle
       * 3.如果vuex的asideTitle已有数据，再次点击时，只定位，不新增
       * 注意：vuex中的count（标题标签的增值变量，可以保证每次添加的标题标签不重复，作用于后面的标题标签定位），count每次进来都需要自增，保证唯一，默认为0
       * vuex中的asideTitle格式：
       * {
            title: '主控制台', // title name
            path: '/welcome',  //title the path
            activeIndex: 0 //default value
          }
       *
       * */
    createTabs(path) {
      if (path !== '/main') {
        let asideItem = {}
        // 得到当前点击的左侧导航的名字，存入vuex的header/asideTitle中
        let nav = this.getNavs.nav
        for (let i = 0; i < nav.length; i++) {
          const parentTitle = nav[i].title
          // 判断是否存在子导航，如果存在则取子导航的名字，如果没有，则取当前的导航名字
          if (nav[i].child) {
            for (let j = 0; j < nav[i].child.length; j++) {
              if (nav[i].child[j].path === path) {
                const childTitle = nav[i].child[j].title
                // 判断vuex中是否已经存在当前标题，如果存在则不处理，否则添加入vuex中
                let result = this.getAsideTitle.filter((item) => {
                  return item.title === nav[i].child[j].title
                })
                if (result.length === 0) {
                  // 添加标题标签
                  let count = this.getCount
                  count++
                  this.$store.commit('header/setCount', count)
                  asideItem.title = nav[i].child[j].title
                  asideItem.path = nav[i].child[j].path
                  asideItem.activeIndex = count
                  this.$store.commit('header/setAside', asideItem)
                  this.$store.commit('header/setActiveIndex', count)
                  this.setCrumbs(parentTitle, childTitle)
                  return
                } else {
                  // 定位到当前标题标签
                  if (nav[i].child[j].path === path) {
                    let result = this.getAsideTitle.filter((item) => {
                      return item.title === nav[i].child[j].title
                    })
                    this.$store.commit(
                      'header/setActiveIndex',
                      result[0].activeIndex
                    )
                    this.setCrumbs(parentTitle, childTitle)
                  }
                }
              }
            }
          } else {
            if (nav[i].path === path) {
              // 判断vuex中是否已经存在当前标题，如果存在则不处理，否则添加入vuex中
              let result = this.getAsideTitle.filter((item) => {
                return item.title === nav[i].title
              })
              const childTitle = nav[i].title
              // 添加标题标签
              if (result.length === 0) {
                let count = this.getCount
                count++
                this.$store.commit('header/setCount', count)
                asideItem.title = nav[i].title
                asideItem.path = nav[i].path
                asideItem.activeIndex = count
                this.$store.commit('header/setAside', asideItem)
                this.$store.commit('header/setActiveIndex', count)
                this.setCrumbs(childTitle, '')
                return
              } else {
                // 定位到当前标题标签
                if (nav[i].path === path) {
                  let result = this.getAsideTitle.filter((item) => {
                    return item.title === nav[i].title
                  })
                  this.$store.commit(
                    'header/setActiveIndex',
                    result[0].activeIndex
                  )
                  this.setCrumbs(childTitle, '')
                }
              }
            }
          }
        }
      } else {
        this.$store.commit('header/setActiveIndex', 0)
        this.setCrumbs('测试平台', '导航页面列表')
      }
    },
    setCrumbs(pt, ct) {
      let crumbs = []
      crumbs.push(pt, ct)
      this.$store.commit('header/setCrumbs', crumbs)
    }
  },
  components: {
    Aside,
    Header,
    AsideTitle,
    Crumbs
  }
}
</script>

<style lang="less" scoped>
.body {
  height: 100%;
}
.main {
  height: 100%;
}

.el-aside {
  background-color: #525e7c;
  height: 100%;
}

.el-header {
  padding: 0;
}

.el-main {
  padding: 0px 10px 10px 10px;
}
/*组件过渡动画*/
.compAnimate-enter {
  opacity: 0;
  transform: translateY(-60px);
}

.compAnimate-leave-to {
  opacity: 0;
}

.compAnimate-enter-active {
  transition: all 0.8s ease-in-out;
}
.compAnimate-leave-active {
  transition: all 0.2s ease;
}
</style>
