<template>
  <el-container>
    <el-aside width="168px" v-if="!$route.meta.single" style="border-right: 1px solid #eee" v-show="asideShow" class="menu_aside_container">
      <el-card shadow="never">
        <div slot="header" class="clearfix">
          <b class="aside_top_title">{{ currentMenu.name }}</b>
        </div>
        <el-menu :default-active="activeMenuIndex" @select="handleSelect" unique-opened>
          <template v-for="menu in menus">
            <el-menu-item v-if="!menu.children || menu.children.length == 0" :key="menu.id" :index="menu.alias">{{
              menu.name
            }}</el-menu-item>
            <el-submenu v-else :key="menu.id" :index="menu.alias">
              <template slot="title">{{ menu.name }}</template>
              <template v-if="menu.children && menu.children.length > 0">
                <template v-for="item in menu.children" >
                  <el-menu-item  v-if="!item.children || item.children.length == 0" :key="item.id" :index="item.alias">{{ item.name }}</el-menu-item>
                  <el-submenu v-else :key="item.id" :index="item.alias">
                    <template slot="title">{{ item.name }}</template>
                    <template v-if="item.children && item.children.length > 0">
                      <template v-for="sunitem in item.children" >
                        <el-menu-item :key="sunitem.id" :index="sunitem.alias">{{ sunitem.name }}</el-menu-item>
                      </template>
                    </template>
                  </el-submenu>
                </template>
              </template>
            </el-submenu>
          </template>
        </el-menu>
      </el-card>
    </el-aside>
    <div
      v-if="!$route.meta.single"
      class="aside-navbar-collapse"
      :class="{'navbar-collapse-right': !asideShow}"
      @click="asideShow = !asideShow"
    >
      <div class="aside-navbar-collapse-bg">
        <i class="aside-navbar-collapse-arrow" :class="{'el-icon-arrow-left': asideShow, 'el-icon-arrow-right': !asideShow}"></i>
      </div>
    </div>
    <el-main class="content">
      <router-view v-if="!href" />
      <div v-if="href">
      <h3 class="flow_table_title">{{findCurrentMenuName()}}</h3>
      <templateHref  :href="href"  class="template__href-content"/>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import {mapState, mapActions} from 'vuex'
import templateHref from '@/components/dataTemplate/templateHref.vue'
import deepmerge from "deepmerge";
export default {
  name: 'menuContent',
  components: {templateHref},
  computed: mapState({
    menuAll: state => state.menu.all,
    menus: function(state) {
      let alias = ''
      if (state.menu.currentMenu.alias) {
        alias = state.menu.currentMenu.alias
      } else if (sessionStorage.menu_alias) {
        alias = sessionStorage.menu_alias
      }
      return state.menu.menuMaps[alias]
    },
    currentMenu: state => state.menu.currentMenu
  }),
  data() {
    return {
      asideShow:true,
      activeMenuIndex: '',
      href: '' //url菜单地址
    }
  },
  methods: {
    findCurrentMenuName(){
      let obj=this.menus.find(it=>it.alias === this.activeMenuIndex);
      let name="";
      if (obj){
        name= obj.name
      }else{
        let _menus = deepmerge({}, this.menus, {clone: true})
        let item=this.getChidlren(this.activeMenuIndex,_menus);
        if (item){
          name=item.name;
        }
      }
      return name;

    },
    getChidlren(alias,_menus){
      var hasFound = false, // 表示是否有找到id值
              result = null;
      var fn = function (data) {
        if (Array.isArray(data) && !hasFound) { // 判断是否是数组并且没有的情况下，
          data.forEach(item => {
            if (item.alias === alias) { // 数据循环每个子项，并且判断子项下边是否有id值
              result = item; // 返回的结果等于每一项
              hasFound = true; // 并且找到id值
            } else if (item.children && item.children.length>0) {
              fn(item.children); // 递归调用下边的子项
            }
          })
        }
      }
      fn(_menus); // 调用一下
      return result;
    },

    handleSelect(key) {
      //当前点击菜单的父级菜单路由
      let path = this.currentMenu.alias || sessionStorage.menu_alias
      if (path.indexOf('/') < 0) {
        path = '/' + path
      }
      sessionStorage.menu_path = path + '/' + key
      this.href = ''
      //判断4级URL菜单
      let item=this.getChidlren(key,this.menus);
      if (item.href){
        this.href = item.href
      }
      this.activeMenuIndex=key;
      this.$router.push({path: sessionStorage.menu_path})
    },
    selectCurentMenu(newVal) {
      //当前点击菜单的父级菜单路由
      let path = ''
      this.currentMenu.alias ? (path = this.currentMenu.alias) : (path = sessionStorage.menu_alias)
      // if(this.currentMenu.alias){
      //   path = this.currentMenu.alias;
      // }else{
      //   path = sessionStorage.menu_alias;
      // }
      if (path.indexOf('/') < 0) {
        path = '/' + path
      }
      let paths = []
      if (this.$router.history.pending) {
        paths = this.$router.history.pending.fullPath.split(path + '/')
      } else {
        paths = this.$router.history.current.fullPath.split(path + '/')
      }
      if (paths.length > 0) {
        this.activeMenuIndex = paths[1]
      } else {
        this.activeMenuIndex = paths[0]
      }

      let isFlag = true //是否需要默认加载一级菜单的第一个二级菜单
      this.href = ''
      for (let i = 0; i < this.menus.length; i++) {
        //判断是否是URL菜单
        if (this.menus[i].href) {
          if (this.activeMenuIndex == this.menus[i].alias) {
            this.href = this.menus[i].href
            isFlag = false
            break
          }
          let falg = false
          //判断菜单是否有下一级，且只能有一个下一级
          if (this.menus[i].children.length > 0) {
            for (let o = 0; o < this.menus[i].children.length; o++) {
              //判断是否是URL菜单
              if (this.activeMenuIndex == this.menus[i].children[o].alias) {
                this.href = this.menus[i].children[o].href
                falg = true
                break
              }
            }
            if (falg) {
              break
            }
          }
        }
      }
      //默认加载一级菜单的第一个二级菜单
      if (isFlag && (!this.activeMenuIndex || (this.activeMenuIndex && this.activeMenuIndex.indexOf('href/template') != -1))) {
        this.activeMenuIndex = this.getLastChildren();

        //判断是否是URL地址菜单
        if (this.menus[0].href) {
          this.href = this.menus[0].href
        }
        //判断菜单是否有下一级，且只能有一个下一级
        if (this.menus[0].children.length > 0) {
          for (let k = 0; k < this.menus[0].children.length; k++) {
            //判断是否是URL菜单
            if (this.menus[0].children[k].href) {
              this.href = this.menus[0].children[k].href
              this.activeMenuIndex = this.menus[0].children[k].alias
              break
            }
          }
        }
        sessionStorage.menu_path = path + '/' + this.activeMenuIndex
        this.$router.push({path: sessionStorage.menu_path})
      }
    },
    getLastChildren(){
      // 获取最后个children的第一个菜单
      let _alias = this.menus[0].alias;
      let _menus = this.menus[0];
      while(_menus.children && _menus.children.length>0){
        _alias = _menus.children[0].alias;
        _menus = _menus.children[0];
      }
      return _alias;
    },

    setCurrentMenu(path) {
      let that = this
      for (let i = 0; i < that.menuAll.length; i++) {
        if (that.menuAll[i].alias === path) {
          if (path.indexOf('/') > -1) {
            path = path.replace('/', '')
          }
          this.$store.dispatch('menu/getCurrentMenu', {
            alias: that.menuAll[i].code,
            name: that.menuAll[i].name
          })
          break
        }
      }
    },
    inCurrentMenu(newVal){
      if(newVal && newVal.length > 0){
        for(let i = 0 ; i < newVal.length ; i++){
          if(newVal[i].alias == this.activeMenuIndex){
            return true;
          }
          if(newVal[i].children && newVal[i].children.length > 0){
            let inCur = this.inCurrentMenu(newVal[i].children)
            if(inCur){
              return true;
            }
          }
        }
      }
    }
  },
  watch: {
    menus: {
      handler(newVal) {
        //判断当前菜单是否还在新菜单列表里
        let menuChange = !this.inCurrentMenu(newVal);
       //window.self === window.top  判断页面是否被嵌入iframe里面
        if (newVal && newVal.length > 0 && window.self === window.top && menuChange) {
          this.selectCurentMenu(newVal)
        }
        //切换一级菜单时情况URL地址
        if (!newVal || newVal.length == 0) {
          if (this.href != '') {
            this.href = ''
          }
        }
      },
      deep: true,
      immediate: true
    }
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.$root.$emit('updateTopMenuActive', from.name)
    })
  },
  beforeRouteUpdate(to, from, next) {
    next()
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/css/element-variables.scss';
.el-main {
  padding: 0;
}

.el-card {
  background-color: transparent;
}

.el-card /deep/ .el-card__header {
  height: 48px;
  border-bottom: 1.5px solid #dedede;
  color: #a2a2a2;
}

.el-card /deep/ .el-card__body {
  padding: 0;
}

.menu-ul {
  list-style: none;
  margin: 0;
  padding-left: 0;
}

.menu-ul > li {
  padding: 10px 0 10px 0;
  height: 30px;
  line-height: 30px;
  list-style: none;
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 1px solid #dfdfdf;
}

.menu-ul > li:last-child {
  border-bottom: 0;
}

.menu-ul > li > a {
  color: $--color-text-regular;
  padding: 2px 5px 2px 17px;
  border-left: 2px solid transparent;
  text-decoration: none;
}

.menu-ul > li > a:hover {
  color: $--theme-color;
}

.menu-ul > li > a.router-link-active {
  border-left: 2px solid $--theme-color;
  color: $--theme-color;
}

.el-menu,
/deep/ .el-menu {
  background-color: transparent;
  border-right: none;
}
.el-menu-item {
  height: 36px;
  line-height: 36px;
  font-size: 14px;
  color: #303133;
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 20px;
  list-style: none;
  cursor: pointer;
  position: relative;
  -webkit-transition: border-color 0.3s, background-color 0.3s, color 0.3s;
  transition: border-color 0.3s, background-color 0.3s, color 0.3s;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  white-space: nowrap;
   &:hover,&:focus{
      background-color: transparent;
      color:$--color-primary;
    }
}
.el-submenu .el-menu-item{
    height: 36px;
    line-height: 36px;
}
  .el-menu-item.is-active{
    position: relative;
    &::before{
      position: absolute;
      content: "";
      width: 2px;
      height: 14px;
      background:$--color-primary;
      top:12px;
      left: 12px;
    }
  }
  .el-submenu{
    .el-menu-item.is-active{
      &::before{
        left:30px;
        top: 12px;
      }
    }
  }
/deep/ div.el-submenu__title {
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  color: #303133;
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 20px;
  list-style: none;
  cursor: pointer;
  position: relative;
  -webkit-transition: border-color 0.3s, background-color 0.3s, color 0.3s;
  transition: border-color 0.3s, background-color 0.3s, color 0.3s;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  white-space: nowrap;
}
/deep/ i.el-submenu__icon-arrow {
  position: absolute;
  top: 50%;
  right: 0px;
  margin-top: -7px;
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
  font-size: 12px;
}
.menu_aside_container{
  .aside_top_title{
    font-size: 14px;
    // font-weight: normal;
    color: #303133;
  }
}
.aside-navbar-collapse{
  margin-top: 50px;
  .aside-navbar-collapse-bg{
    height: 28px;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: none;
    border-right: 10px solid #f5f5f5;
    position: relative;
    &:hover{
      cursor: pointer;
    }
    .aside-navbar-collapse-arrow{
      position: absolute;
      top: 7px;
    }
  }
}
.flow_table_title{
  background: #fff;
  padding-top: 10px;
  margin-top: 8px;
}
.content{
  background: #fff;
}
</style>
