<!-- 角色选择下拉框 -->
<template>
  <a-select
    allow-clear
    mode="multiple"
    :value="merchantIds"
    :placeholder="placeholder"
    @update:value="updateValue"
    @blur="onBlur"
  >
    <a-select-option
      v-for="item in data"
      :key="item.merchantId"
      :value="item.merchantId"
    >
      {{ item.merchantName }}
    </a-select-option>
  </a-select>
</template>

<script lang="ts" setup>
  import { ref, computed } from 'vue';
  import { message } from 'ant-design-vue/es';
  import { Merchant } from '@/api/shop/merchant/model';
  import { listMerchant } from '@/api/shop/merchant';

  const emit = defineEmits<{
    (e: 'update:value', value: Merchant[]): void;
    (e: 'blur'): void;
  }>();

  const props = withDefaults(
    defineProps<{
      // 选中的商户
      value?: Merchant[];
      //
      placeholder?: string;
    }>(),
    {
      placeholder: '请选择场馆'
    }
  );

  // 选中的角色id
  const merchantIds = computed(() =>
    props.value?.map((d) => d.merchantId as number)
  );

  // 角色数据
  const data = ref<Merchant[]>([]);

  /* 更新选中数据 */
  const updateValue = (value: number[]) => {
    emit(
      'update:value',
      value.map((v) => ({ merchantId: v }))
    );
  };

  /* 获取角色数据 */
  listMerchant({})
    .then((list) => {
      data.value = list;
    })
    .catch((e) => {
      message.error(e.message);
    });

  /* 失去焦点 */
  const onBlur = () => {
    emit('blur');
  };
</script>
