<template>
  <div id="menus">
    <el-menu :default-active="activeMenu" active-text-color="#850000" @select="changeMenu">
      <el-menu-item v-for="(item, index) in list" :key="index" :index="item.path" :style="`${activeMenu === item.path ? 'border-left:2px solid #850000' : ''}`">
        <span slot="title">{{ item.name }}</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
import _ from 'lodash';
export default {
  name: 'menus',
  props: {
    menuList: { type: Array, default: () => [] },
  },
  data: () => ({
    activeMenu: '',
    list: [],
  }),
  created() {
    this.getMenu();
  },
  mounted() {
    this.getPage();
  },
  watch: {
    $route: {
      handler(val) {
        this.$set(this, `activeMenu`, val.path);
      },
      deep: true,
    },
  },
  methods: {
    getMenu() {
      let route = this.$route.path;
      let menu = sessionStorage.getItem('menu');
      if (menu) {
        menu = JSON.parse(menu);
        let res = menu.filter(fil => {
          if (fil.path === route) return;
          else {
            let is_this = false;
            if (fil.children) {
              for (const item of fil.children) {
                if (item.path === route) {
                  is_this = true;
                  break;
                }
              }
            }
            return is_this;
          }
        });
        if (res.length > 0) {
          let this_menu = res[0];
          if (this_menu.children.length > 0) {
            this_menu = this_menu.children;
          }
          this.$set(this, `list`, this_menu);
        }
      }
    },
    changeMenu(val) {
      this.$router.push({ path: val });
      this.$set(this, `activeMenu`, val);
    },
    getPage() {
      let path = this.$route.path;
      this.$set(this, `activeMenu`, path);
      return path;
    },
  },
};
</script>

<style lang="less" scoped>
.el-menu-item {
  line-height: 32px;
  height: 32px;
}
</style>
