import React, { useEffect, useMemo } from 'react';
judgeServe;
import judgeServe, { ComponentName, FormItem } from './mapServe';
import {
  JudgeType,
  JudgeOptions,
  SiginOptions,
  SiginSmallOptions,
} from '../../components/judgeComponent';
import { connect } from 'umi';
export { judgeServe };

const JudgeRect = (props: any) => {
  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: any, data: any) => {
      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: any = getName(id, item.children);
          if (title) return title;
        }
      }
      return name;
    };

    if (formItems) {
      let data: FormItem[] = JSON.parse(formItems);
      data.forEach((item: FormItem) => {
        let judge = 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;
              const getSmallSigin = (sigin: Number) =>
                SiginSmallOptions.find((item) => item.value == sigin)?.label;

              text.push(
                `${smallValue} ${getSmallSigin(smallSign)} ${label} ${getSigin(
                  bigSign,
                )} ${bigValue} `,
              );
            }
            break;
          case ComponentName.Select:
          case ComponentName.MultiSelect:
            const values = judge.values;
            text.push(`${label} ${values?.join(' 且 ')}`);
            break;
        }
      });
    }
    if (text.length <= 0) text.push('其他条件进入此流程');
    return text;
  }, [formItems, depUserTree]);

  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',
          fontSize,
        }}
      >
        {(contentText || []).map((text, index) => (
          <span key={index}>
            {index != 0 && (
              <>
                <br />
                并且
                <br />
              </>
            )}

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

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