<script setup lang="ts">
import type { MemberCouponPickerItemDto } from '#/api/member';

import { Button, Checkbox, Input, Modal, Tag } from 'ant-design-vue';

interface Props {
  items: MemberCouponPickerItemDto[];
  keyword: string;
  loading: boolean;
  open: boolean;
  selectedIds: string[];
  title: string;
}

const props = defineProps<Props>();

const emit = defineEmits<{
  (event: 'close'): void;
  (event: 'search'): void;
  (event: 'setKeyword', value: string): void;
  (event: 'submit'): void;
  (event: 'toggle', couponId: string): void;
}>();
</script>

<template>
  <Modal
    :open="props.open"
    :title="props.title"
    ok-text="确认"
    cancel-text="取消"
    :confirm-loading="props.loading"
    :ok-button-props="{ disabled: props.selectedIds.length === 0 }"
    @ok="emit('submit')"
    @cancel="emit('close')"
  >
    <div class="mm-coupon-search">
      <Input
        :value="props.keyword"
        placeholder="搜索优惠券名称"
        allow-clear
        @update:value="(value) => emit('setKeyword', String(value ?? ''))"
        @press-enter="emit('search')"
      />
      <Button @click="emit('search')"> 搜索 </Button>
    </div>

    <div class="mm-coupon-list">
      <div v-if="props.loading" class="mm-coupon-empty">加载中...</div>
      <div v-else-if="props.items.length === 0" class="mm-coupon-empty">
        暂无可选优惠券
      </div>
      <label
        v-for="item in props.items"
        v-else
        :key="item.couponTemplateId"
        class="mm-coupon-item"
      >
        <Checkbox
          :checked="props.selectedIds.includes(item.couponTemplateId)"
          @update:checked="() => emit('toggle', item.couponTemplateId)"
        />
        <span class="name">{{ item.displayText || item.name }}</span>
        <Tag class="type">{{ item.couponType }}</Tag>
      </label>
    </div>
  </Modal>
</template>
