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 ConfigOperate = (props, ref) => {
  const { nodeChage, editMsg } = props;
  const [form] = Form.useForm();
  const [backNodes, setBackNodes] = useState([]); // 允许返回的节点

  useEffect(() => {
    form.resetFields();
    const {
      Transferable,
      // EventsInformation,
      // IsSendMessage,
      BtnAliasNameConfig,
      IsSave,
      AutoClose,
      HalfwayClose,
      IsSuspend,
    } = editMsg;
    let newBtnAliasNameConfig;
    let newHalfwayCloseBtnAliasName;
    let newTransferableBtnAliasName;
    let newRollbackBtnAliasName;
    if (BtnAliasNameConfig) {
      newBtnAliasNameConfig = JSON.parse(BtnAliasNameConfig).saveBtnAliasName;
      newHalfwayCloseBtnAliasName = JSON.parse(BtnAliasNameConfig).HalfwayCloseBtnAliasName;
      newTransferableBtnAliasName = JSON.parse(BtnAliasNameConfig).TransferableBtnAliasName;
      newRollbackBtnAliasName = JSON.parse(BtnAliasNameConfig).RollbackBtnAliasName;
    }
    const obj = {
      Transferable: Transferable === 1,
      // EventsInformation: EventsInformation === 1,
      // IsSendMessage: IsSendMessage === 1,
      saveBtnAliasName: newBtnAliasNameConfig,
      HalfwayCloseBtnAliasName: newHalfwayCloseBtnAliasName,
      TransferableBtnAliasName: newTransferableBtnAliasName,
      RollbackBtnAliasName: newRollbackBtnAliasName,
      IsSave: IsSave === 1,
      AutoClose: AutoClose === '是',
      HalfwayClose: HalfwayClose === 1,
      IsSuspend: IsSuspend === 1,
    };

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

    rollBackNodes();
  }, [editMsg]);
  useImperativeHandle(ref, () => ({
    getParmar,
  }));
  const getParmar = () => {
    let obj = form.getFieldsValue();
    obj.Transferable = obj.Transferable ? 1 : 0;
    // obj.EventsInformation = obj.Transferable ? 1 : 0;
    // obj.IsSendMessage = obj.Transferable ? 1 : 0;
    obj.IsSave = obj.Transferable ? 1 : 0;
    obj.AutoClose = obj.Transferable ? 1 : 0;
    obj.HalfwayClose = obj.Transferable ? 1 : 0;
    obj.IsSuspend = 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 'Transferable':
        value = changedFields[0].value ? 1 : 0;
        break;
      // case 'EventsInformation':
      //   value = changedFields[0].value ? 1 : 0;
      //   break;
      // case 'IsSendMessage':
      //   value = changedFields[0].value ? 1 : 0;
      //   break;
      case 'IsSave':
        value = changedFields[0].value ? 1 : 0;
        break;
      case 'AutoClose':
        value = changedFields[0].value ? '是' : '否';
        break;
      case 'HalfwayClose':
        value = changedFields[0].value ? 1 : 0;
        break;
      case 'IsSuspend':
        value = changedFields[0].value ? 1 : 0;
        break;
      default:
        value = changedFields[0].value;
    }
    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"
      >
        <div
          style={{
            height: '40px',
            lineHeight: '40px',
            paddingLeft: '5px',
            background: '#EFEFEF',
            fontWeight: 700,
          }}
        >
          功能按钮配置
        </div>
        <Form.Item
          labelCol={{ span: 5 }}
          wrapperCol={{ span: 19 }}
          style={{
            marginBottom: '0',
            padding: '2px',
            borderBottom: '1px solid #ccc',
            display: editMsg.NodeType === '0' || editMsg.NodeType === '2' ? 'flex' : 'none',
          }}
          label={
            <div style={{ display: 'flex', alignItems: 'center' }}>
              {/* <Tooltip title="开始节点不允许转办">
                <InfoCircleOutlined style={{ color: '#1890ff', marginRight: '3px' }} />
              </Tooltip> */}
              <span>转办</span>
            </div>
          }
        >
          <Row>
            <Col span={18}>
              <Form.Item name="TransferableBtnAliasName" style={{ marginBottom: '0' }}>
                <Input placeholder="请输入转办按钮别名" style={{ width: '180px' }} />
              </Form.Item>
            </Col>
            <Col span={6}>
              <Form.Item name="Transferable" valuePropName="checked" style={{ marginBottom: '0' }}>
                <Switch
                  disabled={editMsg.NodeType === '1'}
                  checkedChildren="是"
                  unCheckedChildren="否"
                  style={{ marginLeft: '12px' }}
                />
              </Form.Item>
            </Col>
          </Row>
        </Form.Item>
        {/* <Form.Item
          valuePropName="checked"
          style={{ marginBottom: '0', padding: '2px', borderBottom: '1px solid #ccc' }}
          label="暂存"
          name="IsSave"
        >
          <Switch checkedChildren="是" unCheckedChildren="否" />
        </Form.Item> */}
        <Form.Item
          labelCol={{ span: 5 }}
          wrapperCol={{ span: 19 }}
          style={{ marginBottom: '0', padding: '2px', borderBottom: '1px solid #ccc' }}
          label="暂存"
        >
          <Row>
            <Col span={18}>
              <Form.Item name="saveBtnAliasName" style={{ marginBottom: '0' }}>
                <Input placeholder="请输入暂存按钮别名" style={{ width: '180px' }} />
              </Form.Item>
            </Col>
            <Col span={6}>
              <Form.Item name="IsSave" valuePropName="checked" style={{ marginBottom: '0' }}>
                <Switch
                  checkedChildren="是"
                  unCheckedChildren="否"
                  style={{ marginLeft: '12px' }}
                />
              </Form.Item>
            </Col>
          </Row>
        </Form.Item>
        <Form.Item
          labelCol={{ span: 5 }}
          wrapperCol={{ span: 19 }}
          style={{
            marginBottom: '0',
            padding: '2px',
            borderBottom: '1px solid #ccc',
            display: editMsg.NodeType === '0' ? 'flex' : 'none',
          }}
          label={
            <div style={{ display: 'flex', alignItems: 'center' }}>
              {/* <Tooltip title="开始节点和结束节点不可配置中途关单">
                <InfoCircleOutlined style={{ color: '#1890ff', marginRight: '3px' }} />
              </Tooltip> */}
              <span>中途关单</span>
            </div>
          }
        >
          <Row>
            <Col span={18}>
              <Form.Item name="HalfwayCloseBtnAliasName" style={{ marginBottom: '0' }}>
                <Input placeholder="请输入中途关单按钮别名" style={{ width: '180px' }} />
              </Form.Item>
            </Col>
            <Col span={6}>
              <Form.Item name="HalfwayClose" valuePropName="checked" style={{ marginBottom: '0' }}>
                <Switch
                  disabled={editMsg.NodeType === '1' || editMsg.NodeType === '2'}
                  checkedChildren="是"
                  unCheckedChildren="否"
                  style={{ marginLeft: '12px' }}
                />
              </Form.Item>
            </Col>
          </Row>
        </Form.Item>
        <Form.Item
          style={{
            marginBottom: '0',
            padding: '2px',
            borderBottom: '1px solid #ccc',
            display: editMsg.NodeType === '2' ? 'flex' : 'none',
          }}
          valuePropName="checked"
          label={
            <div style={{ display: 'flex', alignItems: 'center' }}>
              <Tooltip title="谨慎使用，由上一节点移交后，会自动归档">
                <InfoCircleOutlined style={{ color: '#1890ff', marginRight: '3px' }} />
              </Tooltip>
              <span>自动关单</span>
            </div>
          }
          name="AutoClose"
        >
          <Switch disabled={editMsg.NodeType === '1'} checkedChildren="是" unCheckedChildren="否" />
        </Form.Item>
        <div
          style={{
            display: 'flex',
            alignItems: 'center',
            marginBottom: '0',
            padding: '2px',
            borderBottom: '1px solid #ccc',
          }}
        >
          <div style={{ flex: `0 0 ${(20 / 24) * 100}%`, display: 'flex', alignItems: 'center' }}>
            回退至
            <Form.Item
              name="RollbackNode"
              wrapperCol={{ span: 24 }}
              style={{ marginLeft: '5px', width: '100px', marginBottom: 0 }}
            >
              <Select placeholder="请选择回退节点">
                {backNodes.map(item => (
                  <Option value={item.Name} key={item.Name}>
                    {item.AliasName}
                  </Option>
                ))}
              </Select>
            </Form.Item>
            <Form.Item
              name="RollbackBtnAliasName"
              wrapperCol={{ span: 24 }}
              style={{ marginLeft: '5px', width: '80px', marginBottom: 0 }}
            >
              <Input placeholder="按钮别名" style={{ width: '90px' }} />
            </Form.Item>
          </div>

          <Form.Item
            valuePropName="checked"
            name="Rollbackable"
            style={{ flex: `0 0 ${(4 / 24) * 100}%`, marginBottom: 0 }}
          >
            <Switch
              checkedChildren="是"
              unCheckedChildren="否"
              disabled={editMsg.NodeType === '1'}
              style={{ marginLeft: '4px' }}
            />
          </Form.Item>
        </div>
        <Form.Item
          labelCol={{ span: 5 }}
          wrapperCol={{ span: 19 }}
          style={{
            marginBottom: '0',
            padding: '2px',
            borderBottom: '1px solid #ccc',
            display: editMsg.NodeType === '0' ? 'flex' : 'none',
          }}
          label={
            <div style={{ display: 'flex', alignItems: 'center' }}>
              <span>挂起</span>
            </div>
          }
        >
          <Form.Item name="IsSuspend" valuePropName="checked" style={{ marginBottom: '0' }}>
            <Switch
              disabled={editMsg.NodeType === '1'}
              checkedChildren="是"
              unCheckedChildren="否"
              style={{ marginLeft: '190px' }}
            />
          </Form.Item>
        </Form.Item>
        {/* <Form.Item
          valuePropName="checked"
          style={{ marginBottom: '0', padding: '2px', borderBottom: '1px solid #ccc' }}
          label="显示事件信息"
          name="EventsInformation"
        >
          <Switch checkedChildren="是" unCheckedChildren="是" />
        </Form.Item> */}
        {/* <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(ConfigOperate);
