<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();

  withDefaults(
    defineProps<{
      apiTreeSelect?: Recordable;
      showCreate?: boolean;
    }>(),
    {
      showCreate: true,
    }
  );

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

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

  const getBindProps = computed(() => {
    return {
      maxLength: 250,
      placeholder: '请选择所属组织',
      api: getOrganizationList,
      params: { _t: unref(timespan) },
      replaceFields: { children: 'children', key: 'id', title: 'name', value: 'id' },
    };
  });

  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>