<!-- 选择下拉框 -->
<template>
  <div>
    <a-select
      :options="merchants"
      v-model:value="value"
      :placeholder="placeholder"
      @update:value="updateValue"
      :style="`width: 200px`"
      @blur="onBlur"
      @change="onChange"
    />
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { Merchant } from '@/api/shop/merchant/model';

  const emit = defineEmits<{
    (e: 'update:value', value: string, item: any): void;
    (e: 'done', item: Merchant): void;
    (e: 'blur'): void;
  }>();

  const props = withDefaults(
    defineProps<{
      value?: any;
      merchants?: Merchant[];
      placeholder?: string;
    }>(),
    {
      placeholder: '请选择场馆'
    }
  );

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

  /* 更新选中数据 */
  const updateValue = (value: string) => {
    const item = options.value?.find((d) => d.merchantName == value);
    emit('update:value', value, item);
  };
  /* 失去焦点 */
  const onBlur = () => {
    emit('blur');
  };

  const onChange = (item: any) => {
    emit('done', item);
  };

</script>
