import React, { useState, useEffect, forwardRef, useImperativeHandle } from 'react';
import { Form, Input, Select, Divider, Tooltip, message, Switch, Row, Col, Checkbox } from 'antd';
import { InfoCircleOutlined } from '@ant-design/icons';
import { loadRollbackNodes } from '@/services/flow/flow';
const { Option } = Select;

const ConfigCase = (props, ref) => {
  const { nodeChage, editMsg } = props;
  const [form] = Form.useForm();
  const [backNodes, setBackNodes] = useState([]); // 允许返回的节点

  useEffect(() => {
    form.resetFields();
    const { EventsInformation, IsSendMessage, IsHookingGis } = editMsg;
    const obj = {
      EventsInformation: EventsInformation === 1,
      IsSendMessage: IsSendMessage === 1,
      IsHookingGis: IsHookingGis === 1,
    };

    form.setFieldsValue({ ...editMsg, ...obj });

    rollBackNodes();
  }, [editMsg]);
  useImperativeHandle(ref, () => ({
    getParmar,
  }));
  const getParmar = () => {
    let obj = form.getFieldsValue();
    obj.EventsInformation = obj.Transferable ? 1 : 0;
    obj.IsSendMessage = obj.Transferable ? 1 : 0;
    return obj;
  };
  // 加载修改流程节点配置允许退回列表
  const rollBackNodes = () => {
    if (!editMsg.ActivityId) {
      return;
    }
    loadRollbackNodes({ flowNodeId: editMsg.ActivityId }).then(res => {
      if (res.code === 0) {
        setBackNodes(res.data);
      }
    });
  };
  // 节点配置表单监听
  const changeValue = (changedFields, allFields) => {
    let value;
    switch (changedFields[0].name[0]) {
      case 'EventsInformation':
        value = changedFields[0].value ? 1 : 0;
        break;
      case 'IsSendMessage':
        value = changedFields[0].value ? 1 : 0;
        break;
      case 'IsHookingGis':
        value = changedFields[0].value ? 1 : 0;
        break;
      default:
        value = changedFields[0].value;
        break;
    }
    nodeChage(changedFields[0].name[0], value);
  };
  return (
    <div>
      <Divider
        orientation="left"
        style={{
          borderTopColor: '#99bbe8',
          color: '#15428b',
          fontWeight: 700,
        }}
      >
        工单配置
      </Divider>
      <Form
        form={form}
        labelCol={{ span: 20 }}
        wrapperCol={{ span: 4 }}
        onFieldsChange={changeValue}
        colon={false}
        labelAlign="left"
      >
        <Form.Item
          valuePropName="checked"
          style={{ marginBottom: '0', padding: '2px', borderBottom: '1px solid #ccc' }}
          label="显示事件信息"
          name="EventsInformation"
        >
          <Switch checkedChildren="是" unCheckedChildren="否" />
        </Form.Item>
        <div
          style={{
            display: editMsg.NodeType === '2' ? 'block' : 'none',
          }}
        >
          <Form.Item
            valuePropName="checked"
            style={{ marginBottom: '0', padding: '2px', borderBottom: '1px solid #ccc' }}
            label="挂接GIS设备"
            name="IsHookingGis"
          >
            <Switch checkedChildren="是" unCheckedChildren="否" />
          </Form.Item>
        </div>
        <Form.Item
          valuePropName="checked"
          style={{
            marginBottom: '0',
            padding: '2px',
            borderBottom: '1px solid #ccc',
            display: editMsg.NodeType === '0' ? 'flex' : 'none',
          }}
          label="是否发送短信"
          name="IsSendMessage"
        >
          <Switch checkedChildren="是" unCheckedChildren="否" />
        </Form.Item>
      </Form>
    </div>
  );
};

export default forwardRef(ConfigCase);
