<template>
  <div class="overflow-hidden">
    <NodeHead class="header-title" :node-name="t('流程分类')" />
    <BasicTree
      :clickRowToExpand="true"
      :treeData="treeData"
      :selectedKeys="selectIds"
      :fieldNames="{ key: 'id', title: 'name' }"
      @select="handleSelect"
    />
  </div>
</template>

<script setup lang="ts">
  import { getDicDetailList } from '/@/api/system/dic';
  import { TreeItem } from '/@/components/Tree';
  import { BasicTree } from '/@/components/Tree';
  import { NodeHead } from '/@/components/ModalPanel/index';
  import { onMounted, ref } from 'vue';
  import { FlowCategory } from '/@/enums/workflowEnum';
  import { useI18n } from '/@/hooks/web/useI18n';
  defineProps({
    selectIds: Array<string>,
  });
  const { t } = useI18n();
  const emits = defineEmits(['select']);
  const treeData = ref<TreeItem[]>([]);
  async function getList() {
    treeData.value = (await getDicDetailList({
      itemId: FlowCategory.ID,
    })) as unknown as TreeItem[];
    treeData.value.unshift({
      id: '',
      name: '全部',
      key: '',
    });
  }
  function handleSelect(keys: string) {
    emits('select', keys[0]);
  }
  onMounted(() => {
    getList();
  });
</script>
<style scoped>
  .header-title {
    height: 50px;
    font-size: 16px;
    color: #333;
    border-bottom: 1px solid #eee;
    margin-left: 16px;
  }
</style>
