<!-- 选择下拉框 -->
<template>
  <a-select
    show-search
    optionFilterProp="label"
    :options="data"
    allow-clear
    :placeholder="placeholder"
    @change="onChange"
    style="width: 300px"
  />
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { message } from 'ant-design-vue';
  import { listUsers } from '@/api/system/user';
  import type { SelectProps } from 'ant-design-vue';
  import { UserParam } from '@/api/system/user/model';
  import { CustomerParam } from '@/api/oa/customer/model';

  const emit = defineEmits<{
    (e: 'search', where?: CustomerParam): void;
    (e: 'update:value', value: string): void;
    (e: 'blur'): void;
  }>();

  withDefaults(
    defineProps<{
      // value?: string;
      placeholder?: string;
    }>(),
    {
      placeholder: '请选择客户负责人'
    }
  );

  // 字典数据
  const data = ref<SelectProps['options']>([]);

  /* 更新选中数据 */
  // const updateValue = (value: string) => {
  //   emit('update:value', value);
  // };

  // 默认搜索条件
  const where = ref<UserParam>({});

  const search = () => {
    /* 获取用户列 */
    listUsers({ ...where?.value })
      .then((result) => {
        data.value = result?.map((d) => {
          return {
            value: d.userId,
            label: d.nickname
          };
        });
      })
      .catch((e) => {
        message.error(e.message);
      });
  };

  const onSearch = (userId) => {
  };

  search();

  /* 失去焦点 */
  const onBlur = () => {
  };

  // 搜素
  const onChange = (userId) => {
    emit('search', { userId });
  };
</script>
