/*
 * @Author: dengchao 754083046@qq.com
 * @Date: 2022-11-02 14:37:53
 * @LastEditors: dengchao 754083046@qq.com
 * @LastEditTime: 2022-11-02 14:40:57
 * @FilePath: \maintenance\src\components\RuleConfig\index.jsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React, { useEffect, useState, useRef } from 'react';
import { Modal, Input, Form } from 'antd';
import styles from './index.less';
import Tree from '@/components/ExpendableTree';
const { TextArea } = Input;
const RuleConfig = props => {
  const { visible, handleCancel, fieldList, onSubumit, RuleContent, flag } = props;
  const [rule, setRule] = useState([]);
  const [expandedKey, setExpandedKey] = useState(''); // 默认展开项
  const [currentSelectId, setCurrentSelectId] = useState(''); // 选中得节点
  const ruleText = useRef();
  const [form] = Form.useForm();
  useEffect(() => {
    if (visible) {
      console.log(fieldList, 'fieldList');
      setExpandedKey(fieldList[0].TableName);
      setRule(RuleContent);
    } else {
      setExpandedKey('');
      setCurrentSelectId('');
      setRule('');
    }
  }, [visible]);
  // 保存线配置
  const onSave = () => {
    onSubumit(rule);
  };
  // 处理树数据
  const mapTree = (val, index) => ({
    title: val.TableName,
    key: val.TableName,
    children: val.TableFieldNames.map(item => ({
      title: item,
      key: `${val.TableName}.${item}`,
    })),
  });
  const onSelect = (prop, treeNode) => {
    console.log(prop, treeNode);
    if (!treeNode.node.children) {
      setRule(`${rule} {${treeNode.node.key}} `);
      ruleText.current.focus();
    }
    setCurrentSelectId(prop[0]);
  };
  return (
    <div>
      <Modal
        title="节点扭转规则配置"
        visible={visible}
        onOk={onSave}
        width="860px"
        onCancel={handleCancel}
        maskClosable={false}
        destroyOnClose
        getContainer={false}
      >
        <div className={styles.configContent}>
          <div className={styles.leftTree}>
            <Tree
              blockNode
              autoExpandParent
              onSelect={onSelect}
              selectedKeys={[currentSelectId]}
              expandedKeys={expandedKey}
              treeData={fieldList.map((item, index) => mapTree(item, index))}
            />
          </div>
          <div className={styles.rightContent}>
            {flag == 1 && <div className={styles.title}>符合以下条件时工单扭转到对应的节点</div>}
            <div className={styles.textAreaBox}>
              <TextArea
                autoSize={{ minRows: 19, maxRows: 19 }}
                value={rule}
                rows={4}
                ref={ruleText}
                onChange={e => setRule(e.target.value)}
              />
            </div>
            <div className={styles.tipBox}>
              <p>请从左侧面板选择字段或选项</p>
              <p>{'支持英文模式下运算符（+、-、*、/、>、<、==、!=、<=、>=）及函数'}</p>
              {flag == 1 ? (
                <>
                  {' '}
                  <p>参考场景：</p>
                  <p>当报销金额大于10000时，才能进入所选节点，则可将流转条件设置为：</p>
                  <p>{'报销金额>10000'}</p>
                </>
              ) : (
                <p>{`示例：{表名.是否缴费} = ‘是’ and {表名.缴费金额} > 1000`}</p>
              )}
            </div>
          </div>
        </div>
      </Modal>
    </div>
  );
};

export default RuleConfig;
