<template>
  <el-scrollbar>
    <ul class="menu-horizontal">
      <li
        v-for="(menu,index) of routes"
        :key="index"
        @click="getSecondMenu(menu.routePath)"
        :class="activeMenu.includes(menu.routePath)? 'active':''"
      >
        {{ menu.menuName }}
      </li>
    </ul>
  </el-scrollbar>

</template>

<script setup lang="ts">
import {computed, onMounted, reactive} from 'vue';
import { useRoute } from 'vue-router';
// import variables from '@/styles/variables.module.scss';
import useStore from '@/store';
// import { generateTitle } from '@/utils/i18n';
const { app } = useStore();

const route = useRoute();
const routes = computed<any>(() => app.getMenu);

const activeMenu = computed<any>(() => app.firstMenu);

const state = reactive({
  result: [] as any
})
// const {
//   result
// } = toRefs(state);

onMounted(()=>{
  state.result = [];
  setTimeout(() => {
    if(findParent(app.menuList, route.path)) {
      app.setFirstMenu(state.result[0]);
      getSecondMenu(state.result[0]);
    }
  },500);
})

function findParent(data:any, target: any) {
  for (let i in data) {
    let item = data[i];
    if (item.routePath === target) {
      //将查找到的目标数据加入结果数组中
      if(item.routePath){
        state.result.unshift(item.routePath);
      }
      return true
    }
    if (item.children && item.children.length > 0) {
      let ok = findParent(item.children, target)
      if(ok) {
        // state.result.unshift(item.path);
        return true;
      }
    }
  }
  return false
}

function getSecondMenu(path:any) {
  let allRoutes = app.getMenu;
  let secondRoutes:any;
  allRoutes.forEach(item=>{
    if(path.includes(item.routePath)) {
      secondRoutes = item.children;
    }
  })
  app.setFirstMenu(path);
  app.setSecondMenu(secondRoutes);
}
</script>

<style lang="scss" scoped>
@import '@/styles/variables.module.scss';
</style>
