<script setup lang="ts">
import { ref, nextTick } from "vue";
import { httpList } from "/@/api/system/menuOperator"
import type { IMenuTree } from "../types";
import { ElTree } from "element-plus"

const defaultProps = { label: "menu_name", children: "child" };

const emit = defineEmits(["treeSelectChange", "initTableData"]);


const treeData = ref<Array<IMenuTree>>([]);
const defaultExpandedKeys = ref<Array<string>>([]);
const treeRef = ref<InstanceType<typeof ElTree>>(null);

//获取菜单树列表
async function initMenuList() {
  const { data: list } = await httpList({ level: '0,1' });
  treeData.value = list;
  const menu = list[0];
  const page = menu.child[0];
  defaultExpandedKeys.value = [menu.id];
  //默认选中节点
  nextTick(() => treeRef.value.setCurrentKey(page.id));
  emit("initTableData", page.id);
}

initMenuList();
</script>

<template>
  <div class="max-w-280px w-[280px] h-full min-h-780px bg-white p-2 mt-5px mr-10px">
    <div class="flex justify-between mb-1 font-bold"><h1>菜单列表</h1></div>
    <el-tree
      accordion
      ref="treeRef"
      node-key="id"
      :data="treeData"
      highlight-current
      :props="defaultProps"
      :default-expanded-keys="defaultExpandedKeys"
      @current-change="node => emit('treeSelectChange', node)"
    />
  </div>
</template>
