<template>
  <div class="kpi-assess">
    <div>
      1212112
    </div>
    <div class="top-menu">
      <div
        class="item"
        v-for="(item, index) in menuList"
        :key="index"
        :class="getActive(index)"
        @click="onToggle(index, item.url)"
      >
        {{ item.name }}
      </div>
    </div>
    <div class="k-content">
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
import OverView from "./OverView.vue";
export default {
  name: "kpiAsssess",
  components: {
    OverView,
  },
  data() {
    return {
      menuList: [],
      current: 0,
    };
  },
  mounted() {
    this.getPath();
  },
  methods: {
    // 获取是否active
    getActive(index) {
      let str = "item1";
      if (index === 0) str = "item0";
      if (index === 5) str = "item00";
      if (index === this.current) {
        return `${str} active`;
      }
      return `${str}`;
    },
    // 切换菜单
    onToggle(index, url) {
      this.current = index;
      this.$router.push({ path: url });
    },
    // 匹配路径
    getPath() {
      let path = this.$route.path;
      let list = this.$store.state.menu.list;
      list.map((item, index) => {
        if (item.path.split("/")[1] === path.split("/")[1]) {
          this.menuList = item.child;
          item.child.map((_item, _index) => {
            if (_item.url === path) this.current = _index;
          });
        }
      });
    },
  },
};
</script>
<style lang="less">
@import "./index.less";
</style>