<template>
  <a-select
    :placeholder="placeholder"
    :default-active-first-option="false"
    :show-arrow="false"
    :filter-option="false"
    :not-found-content="null"
    allowClear
    show-search
    v-model:value="value"
    @search="onSearch"
    @change="onChange"
  >
    <a-select-option
      v-for="(item, index) in appList"
      :key="index"
      :value="item.appId"
    >
      {{ item.appName }}
      <span class="ele-text-placeholder"> ({{ item.appType }})</span>
    </a-select-option>
  </a-select>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { pageApp } from '@/api/app';
  import { App } from '@/api/app/model';

  withDefaults(
    defineProps<{
      value?: number | undefined;
      placeholder?: string;
    }>(),
    {
      placeholder: '请选择应用'
    }
  );

  const emit = defineEmits<{
    (e: 'done', appId): void;
    (e: 'select', where?: App): void;
    (e: 'clear'): void;
  }>();

  const onSearch = (e) => {
    reload(e);
    emit('select', e);
  };
  const onChange = (e) => {
    reload(e);
    emit('done', e);
  };
  // 查询租户列表
  const appList = ref<App[] | undefined>([]);

  const reload = (appName) => {
    pageApp({ appName }).then((result) => {
      appList.value = result?.list;
    });
  };
  reload(undefined);
</script>

<style scoped></style>
