<template>
  <z-layout-page>
    <z-layout-page-item>
      <z-menu
        :treelists="treelist"
        :themeColor="themeColor"
        @handleToIndex="handleToIndexAction"
        @handleMenuClick="handleToResUrlAction"
      />
    </z-layout-page-item>
  </z-layout-page>
</template>

<script setup lang="ts">
import { ref } from "vue";
//菜单主题颜色
const themeColor = "red";
//跳转到首页事件
const handleToIndexAction = () => {
  console.log("通知跳转到首页");
};
//路由跳转事件
const handleToResUrlAction = (resUrl: string) => {
  console.log("路由跳转============ " + resUrl);
};
const treelist = [
  {
    resKey: "1",
    icon: "icon-xiangmu1",
    resName: "菜单1",
    children: [
      {
        resKey: "1-1",
        resName: "子菜单1-1",
        resUrl: "/router1",
        children: [],
      },
      {
        resKey: "1-2",
        resName: "子菜单1-2",
        resUrl: "/router2",
        children: [],
      },
    ],
  },
  {
    resKey: "2",
    icon: "icon-xiangmu2",
    resName: "菜单2",
    children: [
      {
        resKey: "2-1",
        resName: "子菜单2-1",
        children: [
          {
            resKey: "2-1-1",
            resName: "子菜单2-1-1",
            resUrl: "/router3",
          },
          {
            resKey: "2-1-2",
            resName: "子菜单2-1-2",
            resUrl: "/router4",
          },
        ],
      },
      {
        resKey: "2-2",
        resName: "子菜单2-2",
        resUrl: "/router5",
        children: [],
      },
    ],
  },
];
</script>
<style>
.zzMenuContainer {
  padding-top: 1px !important;
}
.vp-doc li + li {
  margin-top: 0;
}
</style>
