import React, { useEffect, useState, useRef, forwardRef, useImperativeHandle } from 'react';
import { Input, Select, Divider, Tooltip, message, Form, Button, Radio } from 'antd';

import { loadFeedbackType } from '@/services/flow/flow';

import styles from '../NodeModal.less';
const { Option } = Select;

const CongfigHeightMsg = (props, ref) => {
  const { nodeChage, editMsg, flowID } = props;
  const [form] = Form.useForm();

  const [backType, setBackType] = useState([]); // 反馈类型

  useImperativeHandle(ref, () => ({
    getParmar,
  }));
  useEffect(() => {
    form.resetFields();

    // 获取反馈类型
    getFeedbackName();
    getFormData();
  }, [editMsg]);
  const getParmar = () => form.getFieldsValue();
  // 获取表单回显
  const getFormData = () => {
    const { aheadHandle, NodeHandling } = editMsg;

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

  // 获取反馈类型
  const getFeedbackName = () => {
    loadFeedbackType().then(res => {
      if (res.code === 0) {
        setBackType(res.data);
      }
    });
  };
  // 节点配置表单监听
  const changeValue = (changedFields, allFields) => {
    nodeChage(changedFields[0].name[0], changedFields[0].value);
  };

  return (
    <div>
      <Divider
        orientation="left"
        style={{
          borderTopColor: '#99bbe8',
          color: '#15428b',
          fontWeight: 700,
        }}
      >
        前端视图、反馈类型配置
      </Divider>

      <Form
        form={form}
        labelCol={{ span: 6 }}
        wrapperCol={{ span: 18 }}
        onFieldsChange={changeValue}
        labelAlign="left"
      >
        <div
          style={{
            display:
              editMsg.NodeType === '20' ||
              editMsg.NodeType === '21' ||
              editMsg.NodeType === '22' ||
              editMsg.NodeType === '30'
                ? 'none'
                : 'block',
          }}
        >
          <Form.Item label="前端视图" name="WebPage">
            <Input placeholder="请配置前端视图" />
          </Form.Item>
          <Form.Item label="反馈类型" name="FeedbackName">
            <Select placeholder="请选择反馈类型" allowClear>
              {backType.map(item => (
                <Option value={item.value} key={item.value}>
                  {item.value}
                </Option>
              ))}
            </Select>
          </Form.Item>
        </div>
      </Form>
    </div>
  );
};

export default forwardRef(CongfigHeightMsg);
