<!-- 下拉选择用户，可远程搜索 -->
<template>
  <el-select :model-value="modelValue" :placeholder="placeholder" filterable remote reserve-keyword
    :remote-method="remoteMethod" :loading="loading" @change="$emit('update:modelValue', $event)">
    <el-option v-for="item in options" :key="item.id" :label="`${item.nickName} / ${item.phone}`" :value="item.id" />
  </el-select>
</template>

<script setup>
import _ from "lodash";
import { ref } from 'vue'
import { getShopUserList } from '@/api/coupon'

const loading = ref(false);
const options = ref([]);

const emits = defineEmits(['update:modelValue'])

const userId = defineModel('modelValue', {
  type: [String, Number],
  required: false
})

const props = defineProps({
  placeholder: {
    type: String,
    default: '用户昵称/用户ID/用户手机'
  }
})

// 远程搜索用户列表
const remoteMethod = _.debounce(async function (query) {
  try {
    if (query) {
      loading.value = true;
      const res = await getShopUserList({
        key: query,
        page: 1,
        size: 100,
      });
      options.value = res.records;
    }
  } catch (error) {
    console.error(error);
  }
  loading.value = false;
}, 200);
</script>