import React, { useEffect, useMemo } from 'react';
judgeServe;
import judgeServe, { ComponentName, FormItem, TYPE } from './mapServe';
// import { Badge } from 'antd';
import { useXFlowApp, XFlowNodeCommands } from '@antv/xflow';
import { JudgeType, JudgeOptions, SiginOptions } from '../../components/judgeComponent';
import { connect } from 'dva';
export { judgeServe };

const JudgeRect = props => {
  const { size = { width: 130, height: 50 }, data, depUserTree } = props;
  const { width, height } = size;
  const { label, stroke, fill, fontFill, fontSize, type, priority, formItems } = data;

  const contentText = useMemo(() => {
    let text = [];
    const getName = (id, data) => {
      let name = '';
      for (let i = 0; i < data.length; i++) {
        let item = data[i];
        if (item.ID == id) {
          return item.title;
        } else if (item.children?.length > 0) {
          let title = getName(id, item.children);
          if (title) return title;
        }
      }
      return name;
    };

    if (formItems) {
      let data: FormItem[] = JSON.parse(formItems);
      data.forEach((item: FormItem) => {
        let judge: JudgeType = item.judge;
        const label: String = item.props.label;
        switch (judge?.type) {
          case ComponentName.Inner:
            const list = judge?.values
              .map(item => {
                return getName(item.value, depUserTree);
              })
              .filter(item => item);
            text.push('发起人属于:' + list.join('或'));
            break;
          case ComponentName.Number:
            const type: Number = judge.values[0];
            const condition = judge.condition;
            if (!condition) break;
            if (type != 6) {
              let JudgeLabel = JudgeOptions.find(item => item.value == type)?.label;

              text.push(`${label} ${JudgeLabel} ${condition.smallValue}`);
            } else {
              const { smallSign, smallValue, bigSign, bigValue } = condition;
              if (!smallSign || !smallValue || !bigSign || !bigValue) break;
              const getSigin = (sigin: Number) =>
                SiginOptions.find(item => item.value == sigin)?.label;

              text.push(
                `${smallValue} ${getSigin(smallSign)} ${label} ${getSigin(bigSign)} ${bigValue} `
              );
            }
            break;
          case ComponentName.Select:
          case ComponentName.MultiSelect:
            const values = judge.values;
            text.push(`${label} ${values.join(' 或 ')}`);
            break;
        }
      });
    }
    return text;
  }, [formItems]);

  return (
    <div
      style={{
        width,
        height,
        padding: '6px',
        boxShadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)',
      }}
    >
      <span style={{ color: '##7E8185', float: 'right', fontSize: '8px' }}>优先级{priority}</span>
      <div style={{ color: '#15BC83' }}>{label}</div>
      <div
        style={{
          height: `${height - 32}px`,
          overflow: 'hidden',
          textOverflow: 'ellipsis',
        }}
      >
        {(contentText || []).map((text, index) => (
          <>
            {index != 0 && (
              <>
                <br />
                并且
                <br />
              </>
            )}

            {text}
          </>
        ))}
      </div>
    </div>
  );
};

export default connect(({ flow }) => ({
  depUserTree: flow.depUserTree,
}))(JudgeRect);

const enum COLOR {
  AUDIT = '#FF943E',
  INITIATOR = '#576A95',
  COPYMAN = '#3296FA',
}
const enum TITLETEXT {
  AUDIT = '审批人',
  INITIATOR = '发起人',
  COPYMAN = '抄送人',
}