collect-system/apps/web/src/app/main/devicepage/page.tsx

import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
import { Button, DatePicker, Form, Input, Modal, Select } from "antd";
import { useCallback, useEffect, useState, useRef } from "react";
import _ from "lodash";
import { useMainContext } from "../layout/MainProvider";
import DeviceTable from "./devicetable/page";
import DeviceModal from "./devicemodal/page";
import React from "react";
import {
  SearchOutlined,
  ReloadOutlined,
  PlusOutlined,
  ImportOutlined,
  ExportOutlined,
  UpOutlined,
  DownOutlined,
} from "@ant-design/icons";
import DepartmentSelect from "@web/src/components/models/department/department-select";

import SystemTypeSelect from "@web/src/app/main/devicepage/select/System-select";
import DeviceTypeSelect from "@web/src/app/main/devicepage/select/Device-select";
import dayjs from "dayjs";
import FixTypeSelect from "./select/Fix-select";
// 添加筛选条件类型
type SearchCondition = {
  deletedAt: null;
  systemType?: string;
  deviceType?: string;
  deptId?: string;
  responsiblePerson?: { contains: string };
  createdAt?: {
    gte: string;
    lte: string;
  }
};

export default function DeviceMessage() {
  const {
    form,
    formValue,
    setFormValue,
    setVisible,
    setSearchValue,
    editingRecord,
  } = useMainContext();
  // 控制展开/收起状态
  const [expanded, setExpanded] = useState(false);
  // 添加所有筛选条件的状态
  const [selectedSystem, setSelectedSystem] = useState<string | null>(null);
  const [selectedDeviceType, setSelectedDeviceType] = useState<string | null>(null);
  const [selectedDept, setSelectedDept] = useState<string | null>(null)
  const [time, setTime] = useState<string>("");
  const [ipAddress, setIpAddress] = useState<string>("");
  const [macAddress, setMacAddress] = useState<string>("");
  const [serialNumber, setSerialNumber] = useState<string>("");
  const [assetNumber, setAssetNumber] = useState<string>("");
  const [manufacturer, setManufacturer] = useState<string>("");
  const [model, setModel] = useState<string>("");
  const [location, setLocation] = useState<string>("");
  const [status, setStatus] = useState<string | null>(null);
  const [selectedSystemTypeId, setSelectedSystemTypeId] = useState<string>("");
  const [selectedFixType, setSelectedFixType] = useState<string | null>(null);

  // 创建ref以访问DeviceTable内部方法
  const tableRef = useRef(null);
  // 存储选中行的状态
  const [selectedKeys, setSelectedKeys] = useState<React.Key[]>([]);
  const [selectedData, setSelectedData] = useState<any[]>([]);

  const handleNew = () => {
    form.setFieldsValue(formValue);
    console.log(editingRecord);
    setVisible(true);
  };

  // 查询按钮点击处理
  const handleSearch = () => {
    // 构建查询条件
    const whereCondition: SearchCondition = {
      deletedAt: null,
      ...(selectedSystem && { systemType: selectedSystem }),
      ...(selectedDeviceType && { deviceType: selectedDeviceType }),
      ...(selectedFixType && { deviceStatus: selectedFixType }),
      ...(selectedDept && { deptId: selectedDept }),
      ...(time && {
        createdAt: {
          gte: dayjs(time).startOf('day').toISOString(),
          lte: dayjs(time).endOf('day').toISOString()
        }
      }),

      // ...(status && { status: { contains: status } }),
    };

    // 更新查询条件到全局上下文
    setSearchValue(whereCondition as any);

    // 也可以直接使用refetch方法进行刷新，确保查询条件生效
    // 如果DeviceTable组件暴露了refetch方法，可以通过ref调用
  };

  // 重置按钮处理
  const handleReset = () => {
    setSelectedSystem(null);
    setSelectedDeviceType(null);
    setSelectedDept(null);
    setTime("");
    setIpAddress("");
    setMacAddress("");
    setSerialNumber("");
    setAssetNumber("");
    setManufacturer("");
    setModel("");
    setLocation("");

    // 重置为只查询未删除的记录
    setSearchValue({ deletedAt: null } as any);
  };

  // 修复DepartmentSelect的onChange类型
  const handleDeptChange = (value: string | string[]) => {
    setSelectedDept(value as string);
  };

  // 处理选择变更的回调
  const   handleSelectedChange = (keys: React.Key[], data: any[]) => {
    console.log("选中状态变化:", keys.length);
    setSelectedKeys(keys);
    setSelectedData(data);
  };

  // 处理导出按钮点击
  const handleExport = () => {
    if (tableRef.current) {
      tableRef.current.handleExportSelected();
    }
  };

  // 系统类别变化处理
  const handleSystemTypeChange = (value: string) => {
    setSelectedSystemTypeId(value);
    form.setFieldValue('deviceType', undefined); // 清空已选故障类型
  };

  return (
    <div className="p-2 min-h-screen bg-white">
      <div className="flex justify-between items-center mb-4">
        <h1 className="text-xl font-normal">故障收录检索</h1>
        <Button type="primary" icon={<PlusOutlined />} onClick={handleNew}>
          新建  
        </Button>
      </div>

      <div className="flex flex-wrap items-center gap-2 mb-4">
        <div className="flex-1 min-w-[200px]">
          <SystemTypeSelect
            value={selectedSystem}
            onChange={setSelectedSystem}
            placeholder="选择网系类别"
            className="w-full"
          />
        </div>
        <div className="flex-1 min-w-[200px]">
          <DeviceTypeSelect
            value={selectedDeviceType}
            onChange={setSelectedDeviceType}
            placeholder="选择故障类型"
            className="w-full"
            systemTypeId={selectedSystemTypeId}
          />
        </div>  
        <div className="flex-1 min-w-[200px]"> 
          <FixTypeSelect
            value={selectedFixType}
            onChange={setSelectedFixType}
            placeholder="选择故障状态"
            className="w-full"
          />
        </div>
        <div className="flex-1 min-w-[200px]">
          <DepartmentSelect
            placeholder="单位"
            className="w-full"
            value={selectedDept}
            onChange={handleDeptChange}
          />
        </div>
        <div className="flex-1 min-w-[200px]">
          <DatePicker
            placeholder="选择日期"
            className="w-full"
            value={time ? dayjs(time) : null}
            onChange={(date, dateString) => setTime(dateString as string)}
            format="YYYY-MM-DD"
            allowClear
          />
        </div>
        <Button
          type="primary"
          icon={<SearchOutlined />}
          onClick={handleSearch}
        >
          查询
        </Button>
        <Button
          icon={<ReloadOutlined />}
          onClick={handleReset}
        >
          重置
        </Button>
      </div>

      {/* <div className="flex justify-end gap-2 mb-4 border-b pb-2">
        <Button icon={<ExportOutlined />}>下载模板文件</Button>
        <Button icon={<ImportOutlined />}>导入</Button>
        <Button icon={<ExportOutlined />}>导出选中数据</Button>
      </div> */}

      <div>
        <DeviceTable
          ref={tableRef}
          onSelectedChange={handleSelectedChange}
        />
        <DeviceModal />
      </div>
    </div>
  );
}