<template>
  <div class="nav-menu">
    <div class="header-logo">
      <span>SAAS 管理平台</span>
    </div>
    <el-menu
      ref="menu"
      router
      :default-active="this.$route.path"
      class="el-menu-vertical-demo"
      text-color="#fff"
      background-color="#1565C0"
      @click.native="onClickMenus"
      active-text-color="#ffd04b"
    >
      <div
        class="menu-list"
        v-for="nav in menuList"
        :key="nav.id"
      >
        <el-menu-item
          v-if="nav.children.length === 0"
          :index="nav.index"
        >
          <template slot="title">
            <i :class="nav.icon"></i>
            <span class="label">{{ nav.label }}</span>
          </template>
        </el-menu-item>
        <el-submenu v-else :index="nav.index">
          <template slot="title">
            <i :class="nav.icon"></i>
            <span class="label">{{ nav.label }}</span>
          </template>
          <el-menu-item
            :index="subs.index"
            v-for="subs in nav.children"
            :key="subs.id"
          >
            <template slot="title">
              <i :class="subs.icon"></i>
              <span class="label">{{
                subs.label
              }}</span></template
            >
          </el-menu-item>
        </el-submenu>
      </div>
    </el-menu>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
  name: 'navMenu',
  data() {
    return {
      menuList: [
        {
          id: 1,
          path: '',
          label: 'SaaS管理页面',
          icon: 'el-icon-menu',
          index: '/saas/manage',
          children: [],
        },
        {
          id: 2,
          path: '',
          label: '系统管理',
          icon: 'el-icon-setting',
          index: '/system',
          children: [
            {
              id: 3,
              path: '',
              label: '菜单管理',
              icon: '',
              index: '/saas/menu',
              children: [],
            },
          ],
        },
      ],
    }
  },
  computed: {
    ...mapGetters('tags', ['currentTag']),
  },
  watch: {
    currentTag(v) {
      if (!v) return
      const parent = this.menuList.find((e) => {
        if (e.path === v.path) return true
        if (e.children) {
          return e.children.some((ee) => ee.path === v.path)
        }
        return false
      })
      if (parent) {
        this.$refs.menu.open(parent.path)
      }
    },
  },
  methods: {
    onClickMenus() {},
  },
}
</script>
<style lang="scss" scoped>
.nav-menu {
  &::v-deep {
    .el-submenu__title i {
      color: #fff;
    }
  }
  i {
    color: #fff;
  }
}

.header-logo {
  font-size: 20px;
  color: #fff;
  font-weight: bold;
  padding: 12px 20px;
  font-style: italic;
  border-right: 1px solid #e6e6e6;
  background-color: #1565C0;
}

.label {
  font-size: 16px;
}
</style>
