<template>
  <div class="w100">
    <el-tree-select
      v-model="value"
      :data="menuData"
      placeholder="请选择上级菜单"
      :default-expand-all="false"
      class="w100"
      node-key="id"
      check-strictly
      :render-after-expand="false"
      :props="defaultProps"
      @node-click="handleNodeClick"
    >
      <template #default="{ data: { title } }"> {{ title }}</template>
    </el-tree-select>
  </div>
</template>

<script setup lang="ts">
import { defineExpose, reactive, onMounted, ref, watch, watchEffect } from "vue";
import { storeToRefs } from "pinia";
import { useRoutesList } from "/@/stores/routesList";
// 定义变量内容
const stores = useRoutesList();
const { routesList, routepageList } = storeToRefs(stores);
const menuData = ref();
const value = ref();

const defaultProps = {
  children: "children",
  label: "title",
};
function seelctsetitem(row?: Number) {
  value.value = row;
}
loadData();
function loadData() {
  let arr = Array.from(routepageList.value);
  menuData.value = arr;
}
const emit = defineEmits(["getvalue"]);

function handleNodeClick(node: any) {
  emit("getvalue", node.id);
}

defineExpose({
  seelctsetitem,
  loadData,
});
</script>
