<template>
  <section class="!flex">
    <ApiTreeSelect v-bind="getBindProps" class="flex-auto" />
    <Button v-if="getShowCreate" type="link" @click="handleOpenCreate" :disabled="disabled">
      {{ t('component.orgSelect.createOrganizationText') }}
    </Button>
    <OrganizationDrawer v-if="getShowCreate" @register="registerDrawer" @success="handleReload" />
  </section>
</template>
<script setup lang="ts">
import { ApiTreeSelect } from '/@/components/Form';
import { Button } from 'ant-design-vue';
import {computed, ref, unref} from "vue";
import {getAllCategory} from "/@/api/equipment/category";
import {useI18n} from "/@/hooks/web/useI18n";
const { t } = useI18n();
const emit = defineEmits(['change', 'optionsChange']);

const props = withDefaults(
  defineProps<{
    value?: string | string[];
    apiTreeSelectProps?: Recordable;
    showCreate?: boolean;
    disabled?: boolean;
  }>(),
  {
    showCreate: true,
    disabled: false,
  }
);
const timespan = ref(Date.now());
const needReload = ref(true);
const cateList = ref<Recordable[]>([]);
const getBindProps = computed<Recordable>(() => {
  const { value, apiTreeSelectProps = {}, disabled } = props;
  const { params = {} } = apiTreeSelectProps;
  return {
    replaceFields: { children: 'children', key: 'id', title: 'name', value: 'id' },
    getPopupContainer: () => document.body,
    placeholder: t('equipment.category.categoryPlaceholderText'),
    maxLength: 250,
    disabled,
    ...apiTreeSelectProps,
    value,
    dropdownStyle: { maxHeight: '300px' },
    api: async (params: any) => {
      try {
        if (!unref(needReload)) return unref(cateList);
        const result = ((await getAllCategory(params)) as unknown as Recordable[]) || [];
        cateList.value = result;
        needReload.value = false;
        return result;
      } catch (error) {
        return unref(cateList);
      }
    },
    params: {
      ...params,
      _t: unref(timespan),
    },
    onChange: (...args: any[]) => {
      emit('change', ...args);
    },
    onOptionsChange: (...args: any[]) => emit('optionsChange', ...args),
  };
});

</script>