<script setup lang="ts">
/**
 * 文件职责：时段规则关联商品弹窗。
 */
import type { ProductPickerItemDto } from '#/api/product';

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

defineProps<{
  keyword: string;
  loading: boolean;
  open: boolean;
  products: ProductPickerItemDto[];
  selectedIds: string[];
  submitting: boolean;
  title: string;
}>();

const emit = defineEmits<{
  close: [];
  search: [];
  setKeyword: [value: string];
  submit: [];
  toggleProduct: [id: string];
}>();

function setKeyword(value: string) {
  emit('setKeyword', value);
}
</script>

<template>
  <Modal
    :open="open"
    :title="title"
    ok-text="确认选择"
    cancel-text="取消"
    :confirm-loading="submitting"
    @ok="emit('submit')"
    @cancel="emit('close')"
  >
    <div class="ptm-picker-search">
      <Input
        :value="keyword"
        placeholder="搜索商品名称/SPU"
        allow-clear
        @update:value="setKeyword"
        @press-enter="emit('search')"
      />
      <button type="button" class="g-btn g-btn-sm" @click="emit('search')">
        搜索
      </button>
    </div>

    <div class="ptm-picker-list">
      <div v-if="loading" class="ptm-picker-empty">加载中...</div>
      <div v-else-if="products.length === 0" class="ptm-picker-empty">
        暂无可选商品
      </div>
      <label
        v-for="item in products"
        v-else
        :key="`picker-${item.id}`"
        class="ptm-picker-item"
      >
        <input
          :checked="selectedIds.includes(item.id)"
          type="checkbox"
          @change="emit('toggleProduct', item.id)"
        />
        <span class="name">{{ item.name }}</span>
        <span class="spu">{{ item.spuCode }}</span>
        <span class="price">¥{{ item.price.toFixed(2) }}</span>
      </label>
    </div>
  </Modal>
</template>
