<template>
  <div>
    <el-menu default-active="1" @open="handleOpen" @close="handleClose">
      <template v-for="(item, index) in menuList">
        <el-sub-menu v-if="item.children.length > 0" :key="item.path" :index="index">
          <template #title>
            <span>{{ item.name }}</span>
          </template>
          <el-menu-item
            v-for="(ite, indey) in item.children"
            :key="ite.path"
            :index="`${index}-${indey}`"
            @click="menuClick(item, ite)"
          >
            {{ ite.name }}
          </el-menu-item>
        </el-sub-menu>
        <el-menu-item v-else :key="item.name" :index="`${index}`" @click="menuClick(item)">{{
          item.name
        }}</el-menu-item>
      </template>
    </el-menu>
  </div>
</template>
<script setup lang="ts">
import { reactive } from "vue";
import { useRouter } from "vue-router";
const menuList = reactive([
  {
    path: "InformationFilling",
    name: "信息填报",
    children: [
      {
        path: "outWarehouseInfo",
        name: "出库信息填报"
      },
      {
        path: "enterWarehouseInfo",
        name: "入库信息填报"
      }
    ]
  },
  {
    path: "InformationAudit",
    name: "信息审核",
    children: [
      {
        path: "outWarehouseAudit",
        name: "出库信息审核"
      },
      {
        path: "enterWarehouseAudit",
        name: "入库信息审核"
      }
    ]
  },
  {
    path: "dataStatistics",
    name: "数据统计",
    children: [
      {
        path: "reliefMaterial",
        name: "救灾物资数量价值表"
      },
      {
        path: "floodPrevention",
        name: "防汛物资储备价值表"
      },
      {
        path: "droughtResistant",
        name: "抗旱物资储备价值表"
      },
      {
        path: "emergencySupplies",
        name: "应急物资分类表"
      }
    ]
  }
]);

const router = useRouter();

const handleOpen = (key: string, keyPath: string[]) => {
  // console.log(key, keyPath);
};
const handleClose = () => ({});
const menuClick = (item: any, child: any = {}) => {
  if (child?.path) {
    router.push(`/${item.path}/${child.path}`);
  } else {
    router.push(`/${item.path}`);
  }
};
</script>
<style lang="scss" scoped>
::v-deep .el-menu {
  background-color: #020066;
  .el-sub-menu__title,
  .el-menu-item {
    color: #fff;
    &:hover {
      background-color: #0c0b73;
      color: #666ee8;
    }
  }
  .is-active {
    background-color: #666ee8;
  }
}
</style>
