mini-starter/packages/merchant-management-ui/src/components/MerchantSelector.tsx

import React from 'react';
import { useQuery } from '@tanstack/react-query';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@d8d/shared-ui-components/components/ui/select';
import { merchantClient } from '../api/merchantClient';

interface MerchantSelectorProps {
  value?: number;
  onChange?: (value: number) => void;
  placeholder?: string;
  disabled?: boolean;
  testId?: string;
}

export const MerchantSelector: React.FC<MerchantSelectorProps> = ({
  value,
  onChange,
  placeholder = "选择商户",
  disabled,
  testId
}) => {
  const { data: merchants, isLoading } = useQuery({
    queryKey: ['merchants'],
    queryFn: async () => {
      const res = await merchantClient.$get({
        query: {
          page: 1,
          pageSize: 100
        }
      });

      if (res.status !== 200) throw new Error('获取商户列表失败');
      const result = await res.json();
      return result.data;
    }
  });

  return (
    <Select
      value={value?.toString() || ''}
      onValueChange={(val) => onChange?.(parseInt(val))}
      disabled={disabled || isLoading}
    >
      <SelectTrigger data-testid={testId}>
        <SelectValue placeholder={placeholder} />
      </SelectTrigger>
      <SelectContent>
        {isLoading ? (
          <SelectItem value="loading" disabled>加载中...</SelectItem>
        ) : merchants && merchants.length > 0 ? (
          merchants.map((merchant) => (
            <SelectItem key={merchant.id} value={merchant.id.toString()}>
              {merchant.name}
            </SelectItem>
          ))
        ) : (
          <SelectItem value="no-merchants" disabled>暂无商户</SelectItem>
        )}
      </SelectContent>
    </Select>
  );
};