import arrow from '@/assets/images/arrow.png';
import yz from '@/assets/images/yz.png';

import { Flex, Space } from 'antd';
import dayjs from 'dayjs';
import React, { useMemo } from 'react';
import styles from './index.less';

import duration from 'dayjs/plugin/duration'; // ES 2015

dayjs.extend(duration);

/** @name 流程图 */
const FlowChart: React.FC<{
  dataSource: any;
}> = (props) => {
  const { dataSource } = props;

  const status = dataSource?.status === '待确认';

  const FlowList = useMemo(
    () => [
      {
        type: '接单',
        title: dataSource?.whName,
        time: dayjs(dataSource?.orderReceiveTime).format('YYYY-MM-DD HH:mm:ss'),
      },
      {
        type: '出单',
        title: dataSource?.operationalUnit,
        time: dayjs(dataSource?.orderGenerateTime).format(
          'YYYY-MM-DD HH:mm:ss',
        ),
      },
      {
        type: '告警',
        title: dataSource?.source,
        time: dataSource?.startTime,
      },
    ],
    [dataSource],
  );
  const diff = dayjs.duration(
    dayjs(dataSource?.orderFinishTime).diff(dataSource?.startTime),
  );
  const hours = diff.hours();
  const minutes = diff.minutes();

  return (
    <div className={styles.container}>
      <div className={styles.title}>办理经过</div>
      <div style={{ padding: '20px 0' }}>
        {status ? (
          <div className={styles.empty}>处置中</div>
        ) : (
          <Flex className={styles.endNode} justify="space-between">
            <Space>
              <div className={styles.avatarContainer}>
                <img alt="" src={yz}></img>
              </div>
              <div>
                <div className={styles.flowTitle}>{dataSource?.worker}</div>
                <div className={styles.flowTime}>
                  {dayjs(dataSource?.orderFinishTime).format(
                    'YYYY-MM-DD HH:mm:ss',
                  )}
                </div>
                <div className={styles.flowContent}>
                  处理内容：{dataSource?.workContent}
                </div>
              </div>
            </Space>
            <div>
              <div className={styles.status}>完成处置</div>
              <div>耗时：{`${hours}小时${minutes}分`}</div>
            </div>
          </Flex>
        )}
        {FlowList.map((item, index) => {
          return (
            <div key={index} className={styles.flowContainer}>
              <img src={arrow} alt="" style={{ margin: '4px 0' }}></img>
              <Flex
                className={styles.flowItem}
                align="center"
                justify="space-between"
              >
                <Space>
                  <div className={styles.avatarContainer}>
                    <img alt="" src={yz}></img>
                  </div>
                  <div>
                    <div className={styles.flowTitle}>{item.title}</div>
                    <div className={styles.flowTime}>{item.time}</div>
                  </div>
                </Space>
                <div className={styles.status}>{item.type}</div>
              </Flex>
            </div>
          );
        })}
      </div>
    </div>
  );
};

export default FlowChart;
