<script lang="ts" setup>
  import { ApiTreeSelect } from '/@/components/Form';
  import { Button } from 'ant-design-vue';
  import { getOrganizationList } from '/@/api/system/system';
  import { computed, ref, unref } from 'vue';
  import OrganizationDrawer from '/@/views/system/organization/OrganizationDrawer.vue';
  import { useDrawer } from '/@/components/Drawer';

  const [registerDrawer, { openDrawer }] = useDrawer();

  const props = withDefaults(
    defineProps<{
      value?: string | string[];
      apiTreeSelectProps?: Recordable;
      showCreate?: boolean;
    }>(),
    {
      showCreate: true,
    }
  );

  const emit = defineEmits(['change']);

  const handleOpenCreate = () => {
    openDrawer(true, { isUpdate: false });
  };

  const timespan = ref(Date.now());

  const getBindProps = computed(() => {
    const { value, apiTreeSelectProps = {} } = props;
    const { params = {} } = apiTreeSelectProps;
    return {
      replaceFields: { children: 'children', key: 'id', title: 'name', value: 'id' },
      getPopupContainer: () => document.body,
      placeholder: '请选择所属组织',
      maxLength: 250,
      ...apiTreeSelectProps,
      value,
      api: getOrganizationList,
      params: { ...params, _t: unref(timespan) },
      onChange: (...args: any[]) => {
        emit('change', ...args);
      },
    };
  });

  const handleReload = () => {
    timespan.value = Date.now();
  };
</script>

<template>
  <section class="flex">
    <ApiTreeSelect v-bind="getBindProps" />
    <Button v-if="showCreate" type="link" @click="handleOpenCreate">新增组织</Button>
    <OrganizationDrawer v-if="showCreate" @register="registerDrawer" @success="handleReload" />
  </section>
</template>