import React, { useMemo } from 'react';
import styles from '../index.less';
import moment from 'moment';
import { ChartBoxTitle } from './ChartBox';
import { useModel, useRequest } from '@umijs/max';
import { getProject } from '@/Project/services/DataMeter';

function ProjectInfo(props: DataMeter.IModelsProps) {
  const { child, layout, projectId } = props;
  // const { project: projectDetail } = useModel('project');
  const { data: projectDetail } = useRequest(getProject, {
    defaultParams: [projectId],
  });
  const getMainLeader = () => {
    let user = [];
    if (!projectDetail) return;
    if (projectDetail.Leader) {
      user.push(projectDetail.Leader.CName);
    }
    if (projectDetail.SiteManagerUser) {
      user.push(projectDetail.SiteManagerUser.CName);
    }
    if (projectDetail.TechnicalDesignerUser) {
      user.push(projectDetail.TechnicalDesignerUser.CName);
    }
    if (projectDetail.MechanicalDesignerUser) {
      user.push(projectDetail.MechanicalDesignerUser.CName);
    }
    if (projectDetail.ElectricalDesignerUser) {
      user.push(projectDetail.ElectricalDesignerUser.CName);
    }
    return Array.from(new Set(user)).join(',');
  };
  const getUser = () => {
    if (!projectDetail || !projectDetail.User) return;
    let user = (projectDetail.User || []).map((item: Api.IUser) => item.CName);
    user = [...new Set(user)];
    return user.join('，');
  };

  const data = useMemo(() => {
    let halfItem: React.ReactElement[] = [];
    let fullItem: React.ReactElement[] = [];
    let dom: React.ReactElement[] = [];
    if (!projectDetail) return null;
    (child || []).forEach((item) => {
      if (!item.show) return '';
      switch (item.key) {
        case 'Code':
        case 'ConstructionUnit':
        case 'UndertakenUnit':
        case 'Position':
        case 'Scale':
        case 'MainProcess':
        case 'CooperateMode':
        case 'WaterStandard':
        case 'ServiceScope':
        case 'Duration':
        case 'ServiceTime':
        case 'CompanyName':
        case 'CompanyNumber':
        case 'Remark':
          halfItem.push(
            <p className={styles.detailItem} key={item.key}>
              <span>{item.title}：</span>
              <span className={styles.data}>
                {projectDetail && projectDetail[item.key]}
              </span>
            </p>,
          );
          break;
        case 'ContractTime':
          halfItem.push(
            <p className={styles.detailItem} key={item.key}>
              <span>{item.title}：</span>
              <span className={styles.data}>
                {projectDetail[item.key] &&
                  moment(projectDetail[item.key]).format('YYYY-MM-DD')}
              </span>
            </p>,
          );
          break;
        case 'Admin':
          fullItem.push(
            <div className={styles.detailRow}>
              <p
                className={`${styles.detailItem} ${styles.detailItemLine}`}
                key={item.key}
              >
                <span>{item.title}：</span>
                <span className={styles.data}>{getMainLeader()}</span>
              </p>
            </div>,
          );
          break;
        case 'User':
          fullItem.push(
            <div className={styles.detailRow}>
              <p
                className={`${styles.detailItem} ${styles.detailItemLine}`}
                key={item.key}
              >
                <span>{item.title}：</span>
                <span className={styles.data}>{getUser()}</span>
              </p>
            </div>,
          );
          break;
        default:
          return '';
      }
    });
    for (let i = 0; i < halfItem.length; i += 2) {
      dom.push(
        <div key={dom.length + 1} className={styles.detailRow}>
          {halfItem[i]}
          {halfItem[i + 1] || null}
        </div>,
      );
    }
    dom = dom.concat(fullItem);

    return dom;
  }, [child, projectDetail]);
  if (!projectDetail) return <div>loading projectDetail....</div>;

  return (
    <div className={styles.modelBox}>
      <ChartBoxTitle title={'项目概况'} width={layout.w} />
      <div className={`${styles.modelContent} ${styles.projectInfoContent}`}>
        {data}
      </div>
    </div>
  );
}

export default ProjectInfo;
