<template>
  <div id="menus">
    <el-row v-if="menuInfo.info.display">
      <el-col :span="24" class="main" :style="{ background: menuInfo.info.backColor }">
        <div class="w_1200">
          <el-col :span="24" class="one">
            <el-menu
              :default-active="$route.title"
              :mode="menuInfo.info.mode"
              :background-color="menuInfo.info.backColor"
              :text-color="menuInfo.info.textColor"
              :active-text-color="menuInfo.info.actColor"
              router
            >
              <template v-for="item in menuInfo.menuList">
                <!-- 二级菜单，三级菜单 -->
                <template v-if="item.subs">
                  <el-submenu :index="item.index" :key="item.index">
                    <!-- 二级菜单-名称 -->
                    <template slot="title">{{ item.title }}</template>
                    <template v-for="subItem in item.subs">
                      <!-- 三级菜单 -->
                      <el-submenu v-if="subItem.subs" :index="subItem.index" :key="subItem.index">
                        <!-- 三级菜单-名称 -->
                        <template slot="title">{{ subItem.title }}</template>
                        <!-- 三级菜单-菜单列表 -->
                        <el-menu-item v-for="(threeItem, i) in subItem.subs" :key="i" :index="threeItem.index">
                          <template slot="title">{{ threeItem.title }}</template>
                        </el-menu-item>
                      </el-submenu>
                      <!-- 二级菜单-菜单列表 -->
                      <el-menu-item v-else :index="subItem.index" :key="subItem.index" :route="{ path: item.index }">
                        <template slot="title">{{ item.title }}</template>
                      </el-menu-item>
                    </template>
                  </el-submenu>
                </template>
                <!-- 一级菜单 -->
                <template v-else>
                  <el-menu-item :index="item.title" :key="item.index" :route="{ path: item.index }">
                    <template slot="title">{{ item.title }}</template>
                  </el-menu-item>
                </template>
              </template>
            </el-menu>
          </el-col>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
export default {
  name: 'menus',
  props: {
    menuInfo: { type: Object, default: () => {} },
  },
  components: {},
  data: function() {
    return {};
  },
  created() {},
  methods: {},
  computed: {
    ...mapState(['user']),
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    test: {
      deep: true,
      immediate: true,
      handler(val) {},
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  height: 51px;
  border-bottom: 1px solid #f1f1f1;
  .one {
    height: 50px;
    overflow: hidden;
    .el-menu--horizontal > .el-menu-item {
      height: 50px;
      line-height: 50px;
      border-bottom: none;
      font-size: 16px;
    }
    /deep/.el-menu--horizontal > .el-menu-item.is-active {
      background-color: #fe950e !important;
    }
    /deep/.el-menu--horizontal > .el-submenu .el-submenu__title {
      height: 50px;
      line-height: 50px;
      border-bottom: none;
    }
  }
}
</style>
