<template>
  <div class="app-container home">
    <el-card >
      <div slot="header" class="clearfix">
        <span>菜单列表</span>
        <el-button v-if="breadcrumb.length > 1" style="float: right; padding: 3px 0; font-size: 24px;" icon="el-icon-back" type="text" @click="goBack">返回上一级</el-button>
      </div>
      <el-row  :gutter="16">
        <el-col :span="4" v-for="item in currentMenu" :key="item.name">
          <el-card v-if="!item.hidden"  class="menu_child menu_item_child">
            <div   @click="handleMenuClick(item)">
              <div class="menu_icon">
                <svg-icon :icon-class="item.meta ? item.meta.icon : 'dashboard'" />
              </div>
              <div class="menu_title">
                <span>{{item.meta ? item.meta.title : item.name}}</span>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { getRouters } from '@/api/menu'
export default {
  name: "Index",
  data() {
    return {
        menuList: [],
      menuChild: [],
      parentPath: '',
      breadcrumb: [],
      currentMenu: [],
      currentLevel: 0,
      // 存储每一级的菜单数据
      levelData: {}
    }
  },
   created() {
    this.init()
  },
  watch: {
    menuList: {
      immediate: true,
      handler() {
        this.initializeMenu();
      }
    }
  },
  computed: {
    // 判断是否是最末级（没有子菜单）
    isLeafLevel() {
      return this.currentMenu.every(item =>
        !item.children || item.children.length === 0
      );
    }
  },
  methods: {
    initializeMenu() {
      this.currentMenu = this.menuList;
      this.breadcrumb = [{ name: '首页', path: '',fullPath: '' }];
      this.currentLevel = 0;
      this.levelData = { 0: this.menuList };
    },
    init() {
      getRouters().then(res => {
        // 第一层：有 name 的保留；没有 name 的剔除，改用其 children；hidden 为 true 的不展示
        const list = []
        res.data.forEach(item => {
          if (item.name) {
            list.push(item)
          } else if (item.children && item.children.length > 0) {
            list.push(...item.children)
          }
        })
        this.menuList = list.filter(item => !item.hidden)
      })
    },

    // 构建完整路径
    buildFullPath(item) {
      // 获取所有父级路径
      const parentPaths = this.breadcrumb
        .slice(1) // 去掉首页
        .map(b => b.path)
        .filter(path => path && path !== '');

      // 构建完整路径
      const fullPath = [...parentPaths, item.path]
        .filter(p => p && p !== '')
        .join('/');

      return fullPath;
    },

    handleMenuClick(item) {
      // 构建完整路径
      const fullPath = this.buildFullPath(item);
      if (item.children && item.children.length > 0) {
        this.enterNextLevel(item);
      } else {
        this.jumpToRoute(fullPath);
      }
    },
    enterNextLevel(item) {
      // 保存当前层级数据
      this.levelData[this.currentLevel] = this.currentMenu;
      // 更新层级
      this.currentLevel++;
      this.breadcrumb.push({
        name: item.name,
        path: item.path,
        data: item
      });
      this.currentMenu = item.children;
      this.levelData[this.currentLevel] = this.currentMenu;
    },
    jumpToRoute(fullPath) {
      if (fullPath && fullPath !== '/') {
        console.log('跳转到路径:', fullPath);
        this.$router.push(fullPath);
      }
    },
    goBack() {
      if (this.breadcrumb.length > 1) {
        this.breadcrumb.pop();
        this.currentLevel--;
        // 恢复上一级菜单数据
        this.currentMenu = this.levelData[this.currentLevel] || [];
      }
    },
  },
}
</script>

<style scoped lang="scss">
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}
.menu_item {
  width: 100%;
  height: 280px;
  margin-bottom: 20px;
  box-sizing: border-box;
  border-radius: 10px;
  text-align: center;
  //line-height: 80px;
  font-size: 26px;
  cursor: pointer;
  background: rgba(189, 216, 238, .6);
  //background: #BDD8EE;
}
.menu_item:hover {
  background: #00afff;
  color: #fff;
}
.menu_child {
  width: 100%;
  height: 140px;
  margin-bottom: 10px;
  box-sizing: border-box;
  border-radius: 10px;
  text-align: center;
  //line-height: 80px;
  font-size: 26px;
  cursor: pointer;
}
.menu_item_child {
  background: rgba(115, 232, 143, 0.6);
}
.menu_child:hover {
  background: #00afff;
  color: #fff;
}
.menu_icon {
  margin: 10px 0 20px 0;
}
.menu_title {
  font-size: 20px;
}
.menu_img {
  width: 100%;
  height: 200px;
  margin-bottom: 10px;
}
</style>

