cunkebao_v3/Cunkebao/src/components/DeviceSelection.tsx

import React, { useState, useEffect } from "react";
import { Search } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Checkbox } from "@/components/ui/checkbox";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { fetchDeviceList } from "@/api/devices";

// 设备选择项接口
interface DeviceSelectionItem {
  id: string;
  name: string;
  imei: string;
  wechatId: string;
  status: "online" | "offline";
}

// 组件属性接口
interface DeviceSelectionProps {
  selectedDevices: string[];
  onSelect: (devices: string[]) => void;
  placeholder?: string;
  className?: string;
}

export default function DeviceSelection({
  selectedDevices,
  onSelect,
  placeholder = "选择设备",
  className = "",
}: DeviceSelectionProps) {
  const [dialogOpen, setDialogOpen] = useState(false);
  const [devices, setDevices] = useState<DeviceSelectionItem[]>([]);
  const [searchQuery, setSearchQuery] = useState("");
  const [statusFilter, setStatusFilter] = useState("all");
  const [loading, setLoading] = useState(false);

  // 获取设备列表，支持keyword
  const fetchDevices = async (keyword: string = "") => {
    setLoading(true);
    try {
      const res = await fetchDeviceList(1, 100, keyword.trim() || undefined);
      if (res && res.data && Array.isArray(res.data.list)) {
        setDevices(
          res.data.list.map((d) => ({
            id: d.id?.toString() || "",
            name: d.memo || d.imei || "",
            imei: d.imei || "",
            wechatId: d.wechatId || "",
            status: d.alive === 1 ? "online" : "offline",
          }))
        );
      }
    } catch (error) {
      console.error("获取设备列表失败:", error);
    } finally {
      setLoading(false);
    }
  };

  // 打开弹窗时获取设备列表
  const openDialog = () => {
    setSearchQuery("");
    setDialogOpen(true);
    fetchDevices("");
  };

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

  // 过滤设备（只保留状态过滤）
  const filteredDevices = devices.filter((device) => {
    const matchesStatus =
      statusFilter === "all" ||
      (statusFilter === "online" && device.status === "online") ||
      (statusFilter === "offline" && device.status === "offline");
    return matchesStatus;
  });

  // 处理设备选择
  const handleDeviceToggle = (deviceId: string) => {
    if (selectedDevices.includes(deviceId)) {
      onSelect(selectedDevices.filter((id) => id !== deviceId));
    } else {
      onSelect([...selectedDevices, deviceId]);
    }
  };

  // 获取显示文本
  const getDisplayText = () => {
    if (selectedDevices.length === 0) return "";
    return `已选择 ${selectedDevices.length} 个设备`;
  };

  return (
    <>
      {/* 输入框 */}
      <div className={`relative ${className}`}>
        <Search className="absolute left-3 top-4 h-5 w-5 text-gray-400" />
        <Input
          placeholder={placeholder}
          className="pl-10 h-14 rounded-xl border-gray-200 text-base"
          readOnly
          onClick={openDialog}
          value={getDisplayText()}
        />
      </div>

      {/* 设备选择弹窗 */}
      <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
        <DialogContent
          className="w-full h-full max-w-none max-h-none flex flex-col bg-white"
          aria-describedby="device-selection-description"
        >
          <div id="device-selection-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 h-10 rounded border border-gray-300 px-2 text-base"
            >
              <option value="all">全部状态</option>
              <option value="online">在线</option>
              <option value="offline">离线</option>
            </select>
          </div>

          <div className="flex-1 overflow-y-auto">
            {loading ? (
              <div className="flex items-center justify-center h-full">
                <div className="text-gray-500">加载中...</div>
              </div>
            ) : (
              <div className="space-y-2">
                {filteredDevices.map((device) => (
                  <label
                    key={device.id}
                    className="flex items-start space-x-3 p-4 rounded-lg hover:bg-gray-50 cursor-pointer"
                  >
                    <Checkbox
                      checked={selectedDevices.includes(device.id)}
                      onCheckedChange={() => handleDeviceToggle(device.id)}
                      className="mt-1"
                    />
                    <div className="flex-1">
                      <div className="flex items-center justify-between">
                        <span className="font-medium">{device.name}</span>
                        <div
                          className={`w-16 h-6 flex items-center justify-center text-xs ${
                            device.status === "online"
                              ? "bg-green-500 text-white"
                              : "bg-gray-200 text-gray-600"
                          }`}
                        >
                          {device.status === "online" ? "在线" : "离线"}
                        </div>
                      </div>
                      <div className="text-sm text-gray-500 mt-1">
                        <div>IMEI: {device.imei}</div>
                        <div>微信号: {device.wechatId}</div>
                      </div>
                    </div>
                  </label>
                ))}
              </div>
            )}
          </div>

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