<template>
  <div class="overflow-hidden h-full">
    <BasicTree
      title=""
      :checkable="isCheckable"
      :treeData="treeData"
      switcher
      :fieldNames="{ children: 'children', title: 'name', key: 'id' }"
      @select="handleSelect"
      @check="handleCheck"
    />
  </div>
</template>

<script setup lang="ts">
  import { getInterfaceTree } from '/@/api/system/interface/index';
  import { TreeItem } from '/@/components/Tree';
  import { BasicTree } from '/@/components/Tree';
  import { onMounted, ref } from 'vue';

  defineProps({
    isCheckable: {
      type: Boolean,
      default: false,
    },
  });

  const emits = defineEmits(['select', 'check']);
  const treeData = ref<TreeItem[]>([]);
  async function getList() {
    treeData.value = (await getInterfaceTree()) as unknown as TreeItem[];
  }
  function handleSelect(keys: string) {
    emits('select', keys[0]);
  }

  function handleCheck(keys: string) {
    emits('check', keys);
  }
  onMounted(() => {
    getList();
  });
</script>
<style scoped>
  :deep(.vben-tree-header) {
    display: none;
  }

  :deep(.ant-tree) {
    padding: 0;
    padding-right: 2px;
    border: none;
    height: 100%;
    border-top: none !important;
  }
</style>
