<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"
    style="min-width: 360px"
    @search="onSearch"
    @change="onChange"
  >
    <template v-for="(item, index) in userList" :key="index">
      <a-select-option v-if="item.username !== 'www'" :value="item.userId">
        <span>{{ item.realName }}</span>
        <span class="ele-text-placeholder"> ({{ item.nickname }})</span>
      </a-select-option>
    </template>
  </a-select>
</template>

<script lang="ts" setup>
  import { User } from '@/api/system/user/model';
  import { ref } from 'vue';
  import { pageUsers } from '@/api/system/user';

  withDefaults(
    defineProps<{
      value?: any;
      placeholder?: string;
      type?: any | 0;
    }>(),
    {
      placeholder: '请选择用户'
    }
  );

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

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

  const reload = (text?: any) => {
    pageUsers({ type: 6, realName: text, limit: 50 }).then((result) => {
      userList.value = result?.list;
    });
  };
  reload();
</script>

<style scoped></style>
