// import { api, useStaff, useDevice } from "@nice/client";
import { useMainContext } from "../../layout/MainProvider";
import toast from "react-hot-toast";
import { Button, Form, Input, Modal, Select, Row, Col } from "antd";
import { useDevice } from "@nice/client";
import { useEffect } from "react";
import DepartmentChildrenSelect from "@web/src/components/models/department/department-children-select";
import DepartmentSelect from "@web/src/components/models/department/department-select";
import SystemTypeSelect from "@web/src/app/main/devicepage/select/System-select";
import DeviceTypeSelect from "../select/Device-select";
export default function DeviceModal() {
  const {
    form,
    formValue,
    setVisible,
    visible,
    editingRecord,
    setEditingRecord,
  } = useMainContext();
  const { create, update } = useDevice();
  const handleOk = async () => {
    try {
      const values = form.getFieldsValue();
      if (editingRecord?.id) {
        // 编辑现有记录
        await update.mutateAsync({
          where: { id: editingRecord.id },
          data: values
        });
        toast.success("更新故障成功");
      } else {
        // 创建新记录
        await create.mutateAsync(values);
        toast.success("创建故障成功");
      }
      
      // 关闭模态框并重置
      setVisible(false);
      setEditingRecord(null);
      form.resetFields();
    } catch (error) {
      console.error("保存故障信息失败:", error);
      toast.error("操作失败");
    }
  };

    // 当模态框关闭时清空编辑状态
    const handleCancel = () => {
      setVisible(false);
      setEditingRecord(null);
      form.resetFields();
    };


  // 模态框标题根据是否编辑而变化
  const modalTitle = editingRecord?.id ? "编辑故障信息" : "新增故障";

  return (

    <>
      <Modal
        title={modalTitle}
        open={visible}
        onOk={handleOk}
        onCancel={handleCancel}
        width={1000}
        style={{ top: 20 }}
        bodyStyle={{ maxHeight: "calc(100vh - 200px)", overflowY: "auto" }}
      >
        <Form form={form} initialValues={formValue} layout="vertical">
        <Row gutter={16}>
            <Col span={8}>
              <Form.Item name="systemType" label="网系类别">
                <SystemTypeSelect className="rounded-lg" />
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item name="deviceType" label="故障类型">
                <DeviceTypeSelect className="rounded-lg" />
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item
                name="showname"
                label="故障名称 "
                rules={[{ required: true, message: "请输入故障名称" }]}
              >
                <Input className="rounded-lg" placeholder="请输入故障名称" />
              </Form.Item>
            </Col>  
          </Row>
          <Row gutter={16}>
            <Col span={8}>
              <Form.Item name="deptId" label="单位">
                <DepartmentSelect />
              </Form.Item>
            </Col>
    
            <Col span={8}>
              <Form.Item name="deviceStatus" label="故障状态">
                <Select className="rounded-lg" placeholder="请选择故障状态">
                  <Select.Option value="normal">已修复</Select.Option>
                  <Select.Option value="maintenance">维修中</Select.Option>
                  <Select.Option value="broken">未修复</Select.Option>
                </Select>
              </Form.Item>
            </Col>
          </Row>
          <Form.Item name="notes" label="描述">
            <Input.TextArea rows={4} className="rounded-lg" />
          </Form.Item>
        </Form>
      </Modal>
    </>
  );
}