cunkebao_v3/Cunkebao/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[]>([]);

  // 获取设备列表，支持keyword
  const fetchDevices = useCallback(
    async (keyword: string = "") => {
      setLoading(true);
      try {
        const response = await fetchDeviceList(
          1,
          100,
          keyword.trim() || undefined
        );
        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);
      }
    },
    [toast]
  );

  // 打开弹窗时获取设备列表
  useEffect(() => {
    if (open) {
      fetchDevices("");
    }
  }, [open, fetchDevices]);

  // 搜索防抖
  useEffect(() => {
    if (!open) return;
    const timer = setTimeout(() => {
      fetchDevices(searchQuery);
    }, 500);
    return () => clearTimeout(timer);
  }, [searchQuery, open, fetchDevices]);

  // 过滤设备（只保留状态过滤）
  const filteredDevices = devices.filter((device) => {
    const matchesStatus =
      statusFilter === "all" ||
      (statusFilter === "online" && device.status === "online") ||
      (statusFilter === "offline" && device.status === "offline");
    return 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="w-full h-full max-w-none max-h-none flex flex-col bg-white"
        aria-describedby="device-selection-dialog-description"
      >
        <div id="device-selection-dialog-description" className="sr-only">
          请选择一个或多个设备，支持搜索和筛选。
        </div>
        <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(searchQuery)}
            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">
          {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 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>
  );
}