<script setup lang="ts">
import { searchUser } from '@/api/base'

interface SearchUser {
  id: string
  realname: string
  nickname: string
  username: string
  mobile: string
  email: string
}

let loading = $ref(false)
let userList = $ref<SearchUser[]>()
const remoteMethod = (q: string) => {
  if (!q) return
  loading = true
  searchUser({ q: q }).then(res => {
    loading = false
    userList = res.data.items
  })
}
</script>

<template>
  <el-select remote filterable value-key="id" :loading="loading" :remote-method="remoteMethod">
    <el-option v-for="item in userList" :key="item.id" :label="item.realname || item.nickname || item.username" :value="item.id">
      <span>{{ item.realname || item.nickname || item.username }}</span>
      <template v-if="item.mobile">
        <el-divider direction="vertical" />
        <span>{{ item.mobile }}</span>
      </template>
      <template v-if="item.email">
        <el-divider direction="vertical" />
        <span>{{ item.email }}</span>
      </template>
    </el-option>
  </el-select>
</template>
