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

const CustomRect = (props: any) => {
  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: any = (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 (type != TYPE.AUDIT) {
      if (initiator?.length > 0) {
        const list = initiator
          .map((item: any) => {
            return getName(item.origin, depUserTree);
          })
          .filter((item: any) => item);
        return list.join(',');
      } else {
        return text;
      }
    } else {
      if (audits?.length > 0) {
        switch (audits[0].type) {
          case IDTYPE.ROLE:
            return roleList.find((item: any) => item.ID == audits[0].value)
              ?.Name;
          case IDTYPE.USER:
            return userList.find((item: any) => item.ID == audits[0].value)
              ?.CName;
          case IDTYPE.LEADER:
            return '部门主管';
        }
      } 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 }: any) => ({
  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 = '抄送人',
}