<template>
  <div class="slide">
    <el-menu :default-active="activeName" @select="selectHandle">
      <sub-menu :nav="nav" v-for="nav in navs" :key="nav.name" />
    </el-menu>
  </div>
</template>

<script>
import subMenu from './submenu'
import navs from '@/state/navs'
import { attach } from '@/constant/view'

export default {
  setup() {
    return { navs }
  },
  computed: {
    activeName() {
      let routeName = this.$route.name
      return attach[routeName] ? attach[routeName] : routeName
    }
  },
  methods: {
    selectHandle(data) {
      this.$router.push({name: data})
    }
  },
  components: {
    'sub-menu': subMenu
  }
}
</script>

<style lang="scss" scoped>
.slide {
  background: #FFFFFF;
}
</style>