<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" v-if="currentLevel === 0">
        <el-col :span="6" v-for="item in currentMenu" :key="item.name">
          <el-card  class="menu_item">
            <div @click="handleMenuClick(item)">
              <div :class="['menu_img', 'menu_'+item.name]"></div>
              <div class="menu_title">
                <span>{{item.meta.title}}</span>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-row v-else :gutter="16">
        <el-col :span="4" v-for="item in currentMenu" :key="item.name">
          <el-card class="menu_child menu_item_child">
            <div  @click="handleMenuClick(item)">
              <div class="menu_icon">
                <svg-icon :icon-class="item.meta.icon"/>
              </div>
              <div class="menu_title">
                <span>{{item.meta.title}}</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 => {
        this.menuList = res.data
      })
    },

    // 构建完整路径
    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_img {
  width: 100%;
  height: 200px;
  margin-bottom: 10px;
}
.menu_BaseInfo {
  background: url("../assets/images/baseInfo.png") no-repeat;
  background-size: 100% 100%;
}
.menu_Basic {
  background: url("../assets/images/baseInfo.png") no-repeat;
  background-size: 100% 100%;
}
.menu_Law {
  background: url("../assets/images/law.png") no-repeat;
  background-size: 100% 100%;
}
.menu_Wu {
  background: url("../assets/images/wu.png") no-repeat;
  background-size: 100% 100%;
}
.menu_Checks {
  background: url("../assets/images/checks.png") no-repeat;
  background-size: 100% 100%;
}
.menu_Purchase {
  background: url("../assets/images/purchase.png") no-repeat;
  background-size: 100% 100%;
}
.menu_Inventory {
  background: url("../assets/images/inventory.png") no-repeat;
  background-size: 100% 100%;
}
.menu_Stock {
  background: url("../assets/images/inventory.png") no-repeat;
  background-size: 100% 100%;
}
.menu_Sale {
  background: url("../assets/images/sale.png") no-repeat;
  background-size: 100% 100%;
}
.menu_Production {
  background: url("../assets/images/production.png") no-repeat;
  background-size: 100% 100%;
}
.menu_Receivable {
  background: url("../assets/images/receivable.png") no-repeat;
  background-size: 100% 100%;
}
.menu_Arap {
   background: url("../assets/images/receivable.png") no-repeat;
  background-size: 100% 100%;
}
.menu_Report {
   background: url("../assets/images/dataReport.png") no-repeat;
  background-size: 100% 100%;
}
.menu_System {
  background: url("../assets/images/system.png") no-repeat;
  background-size: 100% 100%;
}
</style>

