import { Form, Input, Modal, Select, Spin } from "antd"
import React, { useEffect, useState } from "react"
import { getDeviceById } from "./service";


interface DeviceFormProps {
  modalVisible: boolean;
  titleName: string;
  onCancel: () => void;
  status: string;//状态 0-新建 1-编辑 2-查看
  type: string;
  tpId: string;
  deviceId: string;

}
const deviceTypeEnum = {
  'resource_door': { text: '门禁点' },
  'resource_camera': { text: '监控点' },
  'resource_nvr': { text: 'nvr' },
  'resource_encodeDevice': { text: '编码设备' },
  'resource_oneMachine': { text: '门禁一体机' },
}
const layout = {
  labelCol: { span: 7 },
  wrapperCol: { span: 10 },
};
const DeviceForm: React.FC<DeviceFormProps> = (props) => {

  const { titleName, modalVisible, onCancel, type, tpId, deviceId } = props;
  const [spinning, setSping] = useState<boolean>();//加载遮罩
  const [editInformation, setEditInformation] = useState<boolean>(false);//是否可编
  const [form] = Form.useForm();
  //窗口状态 0-新建 1-编辑 2-查看
  const [modalStatus, setModalStatus] = useState<string | undefined>(status);


  useEffect(() => {
    Int();
    form.resetFields();//清除form中数据
  }, [type, deviceId]);
  const Int = () => {

    setSping(true);
    if (type == "new") {//==========================================================新建

      setSping(false);
      setEditInformation(false);//可编辑
    
    } else if (type == "edit") {//=========================================================修改
      console.log(deviceId);
      getDeviceById(deviceId).then(res => {
          if (res.code == 200) {
            const data = res.data;
            
            form.setFieldsValue({
              "id": data.id,
              "deviceName": data.deviceName,
              "deviceManagementIp": data.deviceManagementIp,
              "deviceCode": data.deviceCode,
              "devicePlatform": data.devicePlatform,
              "placeId": data.placeId,
              "areaId": data.areaId,
            });
            setSping(false);
            setEditInformation(false);//可编辑

          }
        });


    } else if (type == "read") {//=========================================================查看
      getDeviceById(deviceId).then(res => {
        if (res.code == 200) {
          const data = res.data;
          
          form.setFieldsValue({
            "id": data.id,
              "deviceName": data.deviceName,
              "deviceManagementIp": data.deviceManagementIp,
              "deviceCode": data.deviceCode,
              "devicePlatform": data.devicePlatform,
              "placeId": data.placeId,
              "areaId": data.areaId,
          })
          
          setSping(false);
          setEditInformation(true)

        }
      });
    }
  }



  // @ts-ignore
  return (
    <Modal
      mask={true}
      destroyOnClose
      title={titleName}
      visible={modalVisible}
      onCancel={() => onCancel()}
      className="返回"
      width={"40%"}
      /*style={{top: "2%", height: "96%", overflowY: "auto"}}
      bodyStyle={{paddingTop: "16px"}}*/
      centered

    >
      <Spin spinning={spinning}>
        <Form
          {...layout}
          name="basic"
          form={form}
        >
        <Form.Item name="id" label="设备id" hidden>
          <Input />
        </Form.Item>
        <Form.Item name="devicePlatform" label="管理平台" rules={[{ required: !(modalStatus == "2") }]}>
            <Input placeholder="管理平台" disabled={modalStatus == "2"} maxLength={50} />
        </Form.Item>
        <Form.Item name="placeId" label="评标场所" rules={[{ required: !(modalStatus == "2") }]}>
           <Input placeholder="评标场所" disabled={modalStatus == "2"} maxLength={50} />
        </Form.Item>

        <Form.Item name="areaId" label="评标区域" rules={[{ required: !(modalStatus == "2") }]}>
            <Input placeholder="评标区域" disabled={modalStatus == "2"} maxLength={50} />
        </Form.Item>
        <Form.Item name="deviceCode" label="设备标识" rules={[{ required: !(modalStatus == "2") }]}>
          <Input placeholder="设备标识" disabled={modalStatus == "2"} maxLength={50} />
        </Form.Item>
        <Form.Item name="deviceManagementIp" label="网络IP" rules={[{ required: !(modalStatus == "2") }]}>
          <Input placeholder="网络IP" disabled={modalStatus == "2"} maxLength={50} />
        </Form.Item>
        <Form.Item name="deviceType" label="设备类型" rules={[{ required: !(modalStatus == "2") }]}>
              <Select
                  placeholder="选择设备类型"
                  allowClear
                  disabled={modalStatus == "2"}
              >
              </Select>
        </Form.Item>
        <Form.Item name="deviceName" label="设备名称" rules={[{ required: !(modalStatus == "2") }]}>
          <Input placeholder="设备名称" disabled={modalStatus == "2"} maxLength={50} />
        </Form.Item>
        </Form>
      </Spin>
    </Modal>

  )
}
export default DeviceForm