<template>
  <div class="menu">
    <ul class="menu-list">
      <li class="menu-item" v-for="(menu, index) of menus" :key="menu" @click="click(index)" :class="{ active: activeIndex == index }">
        <router-link :to="menu.path">
            <span class="svg-icon" :class="activeIndex == index ? 'svg-icon-green' : 'svg-icon-gray'">
                <SvgIcon :svgid="menu.icon"></SvgIcon>
            </span>
        </router-link>
      </li>
    </ul>
  </div>
</template>
<script>
    import SvgIcon from '@com/coms/icon/svg-icon.vue';
export default {
    components: {
        SvgIcon
    },
  data() {
    return {
      menus: [
        {
          text: "领导驾驶舱",
          icon: "svg-lead-cockpit",
          path: "/",
        },
        {
          text: "矩阵",
          icon: "svg-matrix",
          path: "/lightmatrix",
        },
        {
          text: "矩阵",
          icon: "svg-matrix",
          path: "/lightmatrix1",
        },
        {
          text: "矩阵",
          icon: "svg-matrix",
          path: "/lightmatrix2",
        },
        {
          text: "矩阵",
          icon: "svg-matrix",
          path: "/lightmatrix3",
        },
        {
          text: "Agc",
          icon: "svg-agc",
          path: "/agc",
        },
        {
          text: "链路",
          icon: "svg-periodic-line",
          path: "/status",
        },
        {
          text: "网络",
          icon: "svg-agc",
          path: "/",
        },
        {
          text: "温度点",
          icon: "svg-temperature",
          path: "/",
        },
        {
          text: "天气",
          icon: "svg-weather",
          path: "/",
        },
        {
          text: "风场",
          icon: "svg-wind-site",
          path: "/windsite/home",
        },
        {
          text: "关于",
          icon: "svg-agc",
          path: "/about",
        },
      ],
      activeIndex: 0,
    };
  },
  methods: {
    click(index) {
      console.log(index);
      this.activeIndex = index;
    },
  },
  computed: {
    activeClass(data) {
      return data.isActive ? "active" : "";
    },
  },
};
</script>

<style lang="less">
.menu {
  padding-top: 16px;

  .menu-list {
    margin: 0;
    padding: 0;
    list-style: none;

    .menu-item {
      &.active i {
        color: #05bb4c;
      }
      padding: 16px 0;
      text-align: center;
      line-height: 1.5;
    }
  }

  i {
    font-size: 24px;
    color: rgba(255, 255, 255, 50%);
  }
}
</style>
