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';
import { Card } from 'antd';
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,
    formItemsOr,
  } = data;

  const contentText = useMemo(() => {
    let allText: any[] = [];
    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 (formItemsOr?.length > 0) {
      formItemsOr.forEach((formItems: string, index: number) => {
        let text: any[] = [];
        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.origin, 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;
          }
        });
        let content = (text || []).map((text, index) => (
          <div key={index}>
            {index != 0 && <div>并且</div>}
            {text}
          </div>
        ));
        if (formItemsOr.length == 1) {
          allText.push(content);
        } else {
          allText.push(
            <Card size="small" title={`条件组${index + 1}`}>
              {content}
            </Card>,
          );
        }
      });
    }
    if (allText.length == 0) allText.push('其他条件进入此流程');
    return allText;
  }, [formItemsOr, depUserTree]);

  return (
    <div
      style={{
        width,
        height,
        padding: '6px',
        overflowY: 'auto',
        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 - 36}px`,
          // overflow: 'hidden',
          // textOverflow: 'ellipsis',
          // whiteSpace: 'nowrap',
          fontSize,
        }}
      >
        {contentText}
      </div>
    </div>
  );
};

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