<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 ::v-deep .el-card__header {
  height: 48px;
  border-bottom: 1.5px solid #dedede;
  color: #a2a2a2;
}

.el-card ::v-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,
::v-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;
    }
  }
}

::v-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;
}

::v-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>
