import React, { useMemo } from 'react';
AuditServe;
import AuditServe, { IDTYPE, TYPE } from './mapServe';
import { connect } from "umi";
export { AuditServe };

const CustomRect = props => {
  const { size = { width: 130, height: 50 }, data, depUserTree, roleList, userList } = props;
  const { width, height } = size;
  const { label, stroke, fill, fontFill, fontSize, type = 2, initiator, audits } = data;

  const contentText = useMemo(() => {
    let text = '请选择审批人';
    switch (type) {
      case TYPE.AUDIT:
        text = '请选择审批人';
        break;
      case TYPE.INITIATOR:
        text = '所有人';
        break;
      case TYPE.COPYMAN:
        text = '请选择抄送人';
        break;
    }
    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 (type != TYPE.AUDIT) {
      if (initiator?.length > 0) {
        const list = initiator
          .map(item => {
            return getName(item.origin, depUserTree);
          })
          .filter(item => item);
        return list.join(',');
      } else {
        return text;
      }
    } else {
      if (audits?.length > 0) {
        return audits[0].type == IDTYPE.ROLE
          ? roleList.find(item => item.ID == audits[0].value)?.Name
          : userList.find(item => item.ID == audits[0].value)?.CName;
        // return roleList.find(item => item.ID == audits[0].value)?.Name;
      } else {
        return text;
      }
    }
  }, [initiator, type, audits, depUserTree, roleList]);

  // const type: TYPE = 0;
  const titleDom = () => {
    let color = COLOR.AUDIT;
    let text = label == '动作节点' ? TITLETEXT.AUDIT : label;
    switch (type) {
      case TYPE.AUDIT:
        color = COLOR.AUDIT;
        text = TITLETEXT.AUDIT;
        break;
      case TYPE.INITIATOR:
        color = COLOR.INITIATOR;
        text = TITLETEXT.INITIATOR;
        break;
      case TYPE.COPYMAN:
        color = COLOR.COPYMAN;
        text = TITLETEXT.COPYMAN;
        break;
    }
    return (
      <div
        style={{
          width: '100%',
          height: `${fontSize + 16}px`,
          paddingLeft: '6px',
          backgroundColor: color,
          color: 'white',
          fontSize,
        }}
      >
        {text}
      </div>
    );
  };
  return (
    <div
      style={{
        width,
        height,
        boxShadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)',
      }}
    >
      {titleDom()}
      <div
        style={{
          paddingLeft: '6px',
          height: `${height - fontSize - 16}px`,
          lineHeight: `${height - fontSize - 16}px`,
          fontSize,
        }}
      >
        {contentText}
      </div>
    </div>
  );
};

export default connect(({ user }) => ({
  depUserTree: user.depUserTree,
  roleList: user.roleList,
  userList: user.list,
}))(CustomRect);

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