<template>
  <el-menu :default-active="activeIndex" mode="horizontal" @select="handleSelect" class="menuBox">
    <template v-for="(item, index) in menuData">
      <component :index="prefix + '_' + index" v-if="item.children" is="el-submenu" class="menuItem" :class="{ 'menuActive': activeIndex.includes(prefix + '_' + index) }">
        <template slot="title">{{ item.title }}</template>

        <!-- 第二层菜单 -->
        <template v-for="(item1, index1) in item.children">
          <component :index="prefix + '_' + index + '-' + index1" v-if="item1.children" is="el-submenu" :class="{ 'menuActive': activeIndex.includes(prefix + '_' + index + '-' + index1) }">
            <template slot="title">
              <p index="1">{{ item1.title }}</p>
            </template>

            <!-- 第三层菜单 -->
            <template v-for="(item2, index2) in item1.children">
              <component :index="prefix + '_' + index + '-' + index1 + '-' + index2" is="el-menu-item" :class="{ 'menuActive': activeIndex.includes(prefix + '_' + index + '-' + index1 + '-' + index2) }">{{
                item2.title }}
              </component>
            </template>

          </component>
          <component :index="prefix + '_' + index + '-' + index1" v-else is="el-menu-item" :class="{ 'menuActive': activeIndex.includes(prefix + '_' + index + '-' + index1) }">{{ item1.title
          }}
          </component>
        </template>

      </component>
      <component :index="prefix + '_' + index" v-else is="el-menu-item" class="menuItem"
        :class="{ 'menuActive': activeIndex.includes(prefix + '_' + index) }">{{
          item.title }}
      </component>
    </template>
  </el-menu>
</template>
<script>
/**
 *
 */

export default {
  name: "CustomMenu",
  data() {
    return {
      activeIndex:""
    };
  },
  props: {
    prefix: {
      type: String,
      default: ""
    },
    // activeIndex: {
    //   type: String,
    //   default: ""
    // },
    menuData: {
      type: Array,
      default: () => []
    },
    activeMenu: {
      type: Object,
      default: () => { }
    }
  },
  watch: {
    $route:{
      handler(newV){
        this.activeIndex = newV.meta.menuId
      },
      immediate: true
    }
  },
  created() {

  },
  methods: {
    handleSelect(key, keyPath) {

      let arr = (key.split("_")[1]).split("-");
      let node = this.menuData
      for (let i = 0; i < arr.length; i++) {
        node = node[arr[i] * 1];
        if (node.children) {
          node = node.children;
        }
      }
      // this.$emit("onChange", node, key);

      
      this.$route.path != node.path && this.$router.push(node.path);
    }
  }
};
</script>
<style lang="scss" scoped>
@mixin btnClass{
  transition: none;
  width: 110px;
  height: 34px;
  line-height: 32px;
  font-size: 18px;
  text-align: center;
  color: #fff;
  padding: 0 !important;
}
@mixin activeBtnBg{
  background: url("../../images/active.png") no-repeat 0 0 !important;
  background-size: 100% 100% !important;
}
.menuBox {
  border: none;
  border-radius: 0;
  background: none;
  width: 25%;
  display: flex;
  justify-content: space-around;
  text-align: center;
}

.menuItem {
  @include btnClass;
  text-align: center;
  background-size: 100% 100%;
  ::v-deep &.is-active {
    border: none !important;
    color: #fff !important;
  }

  ::v-deep &:focus {
    border: none !important;
    color: #fff !important;
  }

  ::v-deep .el-icon-arrow-down {
    display: none !important;
  }
 
  ::v-deep .el-submenu__title{
    @include btnClass;
  }
  ::v-deep .el-submenu__title:hover {
    background: none !important;
  }

  &:hover {
    @include activeBtnBg;
    color: #fff !important;
    border: none !important;
    ::v-deep .el-submenu__title{
      color: #fff;
    }
  }

  &.menuActive {
    @include activeBtnBg;
    ::v-deep .el-submenu__title{
      color: #fff !important;
      border:none !important;
    }
  }
  ::v-deep &:focus .el-submenu__title{
    color: #fff !important;
    border:none !important;
  }

}
</style>
