import React, { useEffect, useState, useRef } from 'react';
import { Button, Divider, Tooltip, message } from 'antd';

import classNames from 'classnames';
import ConfigSubprocess from './nodeModalComponents/ConfigSubprocess';
import ConfgGateway from './nodeModalComponents/ConfgGateway';
import ConfigNodeMsg from './nodeModalComponents/ConfigNodeMsg';
import ConfgUndertake from './nodeModalComponents/ConfgUndertake';
import ConfigCopyPerson from './nodeModalComponents/ConfigCopyPerson';
import ConfigOperate from './nodeModalComponents/ConfigOperate';
import ConfigCase from './nodeModalComponents/ConfigCase';
import ConfigView from './nodeModalComponents/ConfigView';
import ConfigTimeLimit from './nodeModalComponents/ConfigTimeLimit';
import CongfigHeightMsg from './nodeModalComponents/CongfigHeightMsg';

import styles from './NodeModal.less';
const tabList = ['常用配置', '权限配置', '高级配置'];
const NodeModal = props => {
  const {
    flowData,
    onSubumit,
    editMsg,
    flowID,
    nodeChage,
    currentNode,
    afterNodes,
    limitFinshNodes,
  } = props;
  const [activeConfig, setActiveConfig] = useState('常用配置');

  const refConfigSubprocess = useRef();
  const refConfgGateway = useRef();
  const refConfigNodeMsg = useRef();
  const refConfgUndertake = useRef();
  const refConfigCopyPerson = useRef();
  const refConfigOperate = useRef();
  const refConfigCase = useRef();
  const refConfigView = useRef();
  const refConfigTimeLimit = useRef();
  const refCongfigHeightMsg = useRef();

  useEffect(() => {
    console.log(editMsg, afterNodes, 'editMsgeditMsgeditMsg');
    setActiveConfig('常用配置');
  }, [editMsg]);

  // 提交表单
  const onFinish = () => {
    // 规则填写校验
    let obj = {
      ...refConfigNodeMsg.current?.getParmar(),
      ...refConfgGateway.current?.getParmar(),
      ...refConfgUndertake.current?.getParmar(),
      ...refConfigCopyPerson.current?.getParmar(),
      ...refConfigOperate.current?.getParmar(),
      ...refConfigCase.current?.getParmar(),
      ...refConfigSubprocess.current?.getParmar(),
      ...refConfigView.current?.getParmar(),
      ...refConfigTimeLimit.current?.getParmar(),
    };

    if (!obj.TableName) {
      message.error('请选择节点表名');
      return;
    }

    if (!obj.Fields) {
      message.error('请选择编辑字段');
      return;
    }

    for (let i = 0; i < obj.RuleList.length; i++) {
      if (!obj.RuleList[i].RuleName) {
        message.error('请填写规则名称');
        return;
      }
      if (!obj.RuleList[i].NextNodeId && obj.RuleList[i].NextNodeId !== 0) {
        message.error('请选择需要流转的节点');
        return;
      }
      if (!obj.RuleList[i].RuleContent) {
        message.error('请填写规则');
        return;
      }
    }
    const newListLength = new Set(obj.RuleList.map(item => item.NextNodeId)).size;
    if (obj.RuleList.length > newListLength) {
      message.error('规则流转到的节点不能重复');
      return;
    }
    console.log(currentNode, 'currentNode');
    onSubumit();
  };

  return (
    <>
      <div className={styles.configContent}>
        <div
          className={styles.confgMsk}
          style={{ display: JSON.stringify(editMsg) === '{}' || !editMsg ? 'block' : 'none' }}
          onClick={() => {
            message.error('请先选择节点');
          }}
        />
        <div
          className={styles.tabBox}
          style={{
            display:
              editMsg.NodeType === '20' ||
              editMsg.NodeType === '21' ||
              editMsg.NodeType === '22' ||
              editMsg.NodeType === '30'
                ? 'none'
                : 'flex',
          }}
        >
          {tabList.map(item => (
            <div
              key={item}
              onClick={() => setActiveConfig(item)}
              className={classNames(styles.name, {
                [styles.activeConfig]: activeConfig === item,
              })}
            >
              {item}
            </div>
          ))}
        </div>
        <div className={styles.nodeConfig}>
          {/*  配置切换栏 */}

          {/* 节点信息or网关信息 */}
          <div
            style={{
              display: activeConfig !== '常用配置' ? 'none' : 'block',
            }}
          >
            <ConfigNodeMsg
              ref={refConfigNodeMsg}
              nodeChage={nodeChage}
              editMsg={editMsg}
              flowID={flowID}
            />
            <div
              style={{
                display:
                  editMsg.NodeType === '1' ||
                  editMsg.NodeType === '20' ||
                  editMsg.NodeType === '21' ||
                  editMsg.NodeType === '22' ||
                  editMsg.NodeType === '30'
                    ? 'none'
                    : 'block',
              }}
            >
              <ConfigOperate
                ref={refConfigOperate}
                nodeChage={nodeChage}
                editMsg={editMsg}
                flowID={flowID}
              />
            </div>
          </div>
          <div
            style={{
              display:
                activeConfig !== '高级配置' ||
                editMsg.NodeType === '20' ||
                editMsg.NodeType === '21' ||
                editMsg.NodeType === '22' ||
                editMsg.NodeType === '30'
                  ? 'none'
                  : 'block',
            }}
          >
            {/* 时限配置 */}
            <ConfigTimeLimit
              ref={refConfigTimeLimit}
              nodeChage={nodeChage}
              editMsg={currentNode}
              afterNodes={afterNodes}
              limitFinshNodes={limitFinshNodes}
              flowID={flowID}
            />
            {/* 辅助视图 */}
            <ConfigView
              ref={refConfigView}
              nodeChage={nodeChage}
              editMsg={editMsg}
              flowID={flowID}
            />
            {/* 工单配置 */}
            <div
              style={{
                display:
                  editMsg.NodeType === '1' ||
                  editMsg.NodeType === '20' ||
                  editMsg.NodeType === '21' ||
                  editMsg.NodeType === '22' ||
                  editMsg.NodeType === '30'
                    ? 'none'
                    : 'block',
              }}
            >
              <ConfigCase
                ref={refConfigCase}
                nodeChage={nodeChage}
                editMsg={editMsg}
                flowID={flowID}
              />
            </div>
            {/* <CongfigHeightMsg
              ref={refCongfigHeightMsg}
              nodeChage={nodeChage}
              editMsg={editMsg}
              flowID={flowID}
            /> */}
          </div>

          <div
            style={{
              display:
                editMsg.NodeType === '20' ||
                editMsg.NodeType === '21' ||
                editMsg.NodeType === '22' ||
                editMsg.NodeType === '30' ||
                activeConfig !== '权限配置'
                  ? 'none'
                  : 'block',
            }}
          >
            {/* 承办管理 */}
            <ConfgUndertake ref={refConfgUndertake} nodeChage={nodeChage} editMsg={editMsg} />
            {/* 节点抄送人 */}
            <ConfigCopyPerson ref={refConfigCopyPerson} nodeChage={nodeChage} editMsg={editMsg} />
          </div>
          {/* 子流程配置 */}
          {editMsg.NodeType === '30' && (
            <ConfigSubprocess
              ref={refConfigSubprocess}
              editMsg={editMsg}
              flowID={flowID}
              nodeChage={nodeChage}
            />
          )}
          {/* 网关规则配置 */}
          <div
            style={{
              display:
                editMsg.NodeType !== '20' && editMsg.NodeType !== '21' && editMsg.NodeType
                  ? 'none'
                  : 'block',
            }}
          >
            <ConfgGateway
              ref={refConfgGateway}
              nodeChage={nodeChage}
              flowID={flowID}
              editMsg={editMsg}
              flowData={flowData}
            />
          </div>
        </div>
        <div className={styles.footer}>
          <Button type="primary" onClick={onFinish}>
            确定
          </Button>
        </div>
      </div>
    </>
  );
};
export default NodeModal;
