<template>
  <div class="menue">
    <ul class="menue-list">
      <li v-for="item in props.menueData">
        <div
          class="menue-list-item"
          :class="{ 'parent-item': item.children?.length }"
          @click="onRowClick(item)">
          <span class="list-border-left"></span>
          <span>{{ item.meta?.describe || item.name }}</span>
        </div>
        <menueComponent
          :menueData="item.children"
          v-if="item.children?.length"
          class="children-menue">
        </menueComponent>
      </li>
    </ul>
  </div>
</template>

<script lang="ts" setup>
import menueComponent from "./menue.vue";
import { RouteRecordRaw } from "vue-router";
import { globalState } from "@/store/index";
import router from "@/routers/index";
const props = defineProps({
  menueData: Array<RouteRecordRaw>,
});
const globalStateStore = globalState();

function onRowClick(row: RouteRecordRaw) {
  if (!row.children || !row.children.length) {
    globalStateStore.setSelectMenue(row);
    globalStateStore.setLoadingShow(true);
    router.push(row.path);
    setTimeout(() => {
      globalStateStore.setLoadingShow(false);
    }, 1000);
  } else {
    
  }
}
</script>
<style lang="scss" scoped>
.parent-list {
  padding: 5px 10px;
  position: relative;
  box-shadow: none;
  .list-border-left {
    position: absolute;
    left: 4px;
    top: 50%;
    height: 0;
    border-left: 4px solid #66cccc;
    border-radius: 15px;
    transition: all 0.3s;
    transform: translateY(-50%);
  }
  &:hover .list-border-left {
    height: 70%;
  }
}
.menue-list {
  width: 100%;
  > li > .menue-list-item {
    padding: 4px 15px;
    width: 100%;
    font-size: 16px;
    transition: all 0.4s;
    position: relative;
    &:hover {
      background-color: #99cc99;
      // padding-top: 10px;
      // padding-bottom: 10px;
    }
  }
}
.children-menue > .menue-list {
  padding-left: 12px;
  .menue-list-item {
    font-size: 13px;
  }
}
.meunue-active {
  background-color: #99cc99;
}
.parent-item:hover {
  background-color: transparent !important;
}
</style>
