ckb-SuperAdmin/nkebao/src/components/DeviceSelectionDialog.tsx

import React, { useState, useEffect, useCallback } from 'react';
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Search, RefreshCw, Loader2 } from 'lucide-react';
import { fetchDeviceList } from '@/api/devices';
import { ServerDevice } from '@/types/device';
import { useToast } from '@/components/ui/toast';

interface Device {
  id: string;
  name: string;
  imei: string;
  wxid: string;
  status: 'online' | 'offline';
  usedInPlans: number;
  nickname: string;
}

interface DeviceSelectionDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  selectedDevices: string[];
  onSelect: (devices: string[]) => void;
}

export function DeviceSelectionDialog({ 
  open, 
  onOpenChange, 
  selectedDevices, 
  onSelect 
}: DeviceSelectionDialogProps) {
  const { toast } = useToast();
  const [searchQuery, setSearchQuery] = useState('');
  const [statusFilter, setStatusFilter] = useState('all');
  const [loading, setLoading] = useState(false);
  const [devices, setDevices] = useState<Device[]>([]);

  // 获取设备列表
  const fetchDevices = useCallback(async () => {
    setLoading(true);
    try {
      const response = await fetchDeviceList(1, 100, searchQuery);
      if (response.code === 200 && response.data) {
        // 转换服务端数据格式为组件需要的格式
        const convertedDevices: Device[] = response.data.list.map((serverDevice: ServerDevice) => ({
          id: serverDevice.id.toString(),
          name: serverDevice.memo || `设备 ${serverDevice.id}`,
          imei: serverDevice.imei,
          wxid: serverDevice.wechatId || '',
          status: serverDevice.alive === 1 ? 'online' : 'offline',
          usedInPlans: 0, // 这个字段需要从其他API获取
          nickname: serverDevice.nickname || '',
        }));
        setDevices(convertedDevices);
      } else {
        toast({ title: '获取设备列表失败', description: response.msg, variant: 'destructive' });
      }
    } catch (error) {
      console.error('获取设备列表失败:', error);
      toast({ title: '获取设备列表失败', description: '请检查网络连接', variant: 'destructive' });
    } finally {
      setLoading(false);
    }
  }, [searchQuery, toast]);

  useEffect(() => {
    if (open) {
      fetchDevices();
    }
  }, [open, searchQuery, fetchDevices]);

  const filteredDevices = devices.filter((device) => {
    const matchesSearch =
      device.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      device.imei.toLowerCase().includes(searchQuery.toLowerCase()) ||
      device.wxid.toLowerCase().includes(searchQuery.toLowerCase());

    const matchesStatus =
      statusFilter === 'all' ||
      (statusFilter === 'online' && device.status === 'online') ||
      (statusFilter === 'offline' && device.status === 'offline');

    return matchesSearch && matchesStatus;
  });

  const handleDeviceSelect = (deviceId: string) => {
    if (selectedDevices.includes(deviceId)) {
      onSelect(selectedDevices.filter(id => id !== deviceId));
    } else {
      onSelect([...selectedDevices, deviceId]);
    }
  };

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="flex flex-col">
        <DialogHeader>
          <DialogTitle>选择设备</DialogTitle>
        </DialogHeader>

        <div className="flex items-center space-x-4 my-4">
          <div className="relative flex-1">
            <Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
            <Input
              placeholder="搜索设备IMEI/备注"
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className="pl-9"
            />
          </div>
          <select 
            value={statusFilter} 
            onChange={(e) => setStatusFilter(e.target.value)}
            className="w-32 px-3 py-2 border border-gray-300 rounded-md text-sm"
          >
            <option value="all">全部状态</option>
            <option value="online">在线</option>
            <option value="offline">离线</option>
          </select>
          <Button variant="outline" size="icon" onClick={fetchDevices} disabled={loading}>
            {loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <RefreshCw className="h-4 w-4" />}
          </Button>
        </div>

        <div className="flex-1 overflow-y-auto -mx-6 px-6 max-h-[400px]">
          <div className="space-y-2">
            {loading ? (
              <div className="flex items-center justify-center h-full text-gray-500">
                加载中...
              </div>
            ) : filteredDevices.length === 0 ? (
              <div className="flex items-center justify-center h-full text-gray-500">
                暂无数据
              </div>
            ) : (
              filteredDevices.map((device) => (
                <label
                  key={device.id}
                  className="flex items-start space-x-3 p-4 rounded-lg hover:bg-gray-50 cursor-pointer border"
                >
                  <input
                    type="checkbox"
                    checked={selectedDevices.includes(device.id)}
                    onChange={() => handleDeviceSelect(device.id)}
                    className="mt-1 w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 focus:ring-2"
                  />
                  <div className="flex-1">
                    <div className="flex items-center justify-between">
                      <span className="font-medium">{device.name}</span>
                      <Badge variant={device.status === 'online' ? 'default' : 'secondary'}>
                        {device.status === 'online' ? '在线' : '离线'}
                      </Badge>
                    </div>
                    <div className="text-sm text-gray-500 mt-1">
                      <div>IMEI: {device.imei}</div>
                      <div>微信号: {device.wxid||'-'}</div>
                      <div>昵称: {device.nickname||'-'}</div>
                    </div>
                    {device.usedInPlans > 0 && (
                      <div className="text-sm text-orange-500 mt-1">已用于 {device.usedInPlans} 个计划</div>
                    )}
                  </div>
                </label>
              ))
            )}
          </div>
        </div>

        <div className="flex justify-between items-center mt-4 pt-4 border-t">
          <div className="text-sm text-gray-500">
            已选择 {selectedDevices.length} 个设备
          </div>
          <div className="flex space-x-2">
            <Button variant="outline" onClick={() => onOpenChange(false)}>
              取消
            </Button>
            <Button onClick={() => onOpenChange(false)}>
              确定{selectedDevices.length > 0 ? ` (${selectedDevices.length})` : ''}
            </Button>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  );
}