/** @format */

import moment from 'moment';
import React, { useEffect, useState } from 'react';

import Empty from '../components/Empty';
import ImgList from '../components/ImgList';
import PersonCard from '../components/PersonCard';
import Progress from '../components/Progress2/index';
import Text from '../components/Text';
import Title from '../components/Title';
import { fetchEventDetail } from '../services';
import EventWebSocket from './EventWebSocket';
import { Container } from './styled';

const TIME_FORMAT = 'YYYY-MM-DD HH:mm:ss';

interface EventDetailRightPanelProps {
  id: string;
  apiEnv: string;
  size: {
    width: number;
    height: number;
  };
}

/**
 * 右侧事件详情面板
 * @param props
 */
const OrderDetailRightPanel = (props: EventDetailRightPanelProps) => {
  const {
    id,
    apiEnv = 'dev',
    size: { width, height },
  } = props;

  const [refreshKey, setRefreshKey] = useState('-1');
  const [eventId, setEventId] = useState(null);
  const [townId, setTownId] = useState('');
  const [dataSource, setDataSource] = useState<Record<string, any>>({});
  const fetchData = async () => {
    try {
      const res: Record<string, any> = await fetchEventDetail(
        {
          eventId: eventId,
        },
        apiEnv,
      );
      if (res && res.errorCode === 0) {
        setDataSource(res.data);
      }
    } catch (error) {
      console.error(error);
    }
  };

  useEffect(() => {
    if (!eventId || !apiEnv) {
      return;
    }

    fetchData();
  }, [eventId, apiEnv]);

  useEffect(() => {
    setRefreshKey(Date.now().toString());
  }, [height]);

  useEffect(() => {
    if (!id) {
      return;
    }
    function handleUpdateById(e: any) {
      try {
        const result = e.detail;
        if (result && result.id) {
          setEventId(result.id);
        }
        if (result && result.townId) {
          setTownId(result.townId);
        }
      } catch (error) {
        console.error(error);
      }
    }
    document.addEventListener(
      `edata-${id}-biz-order-detail-updateById`,
      handleUpdateById,
    );

    return () => {
      if (!id) {
        return;
      }
      document.removeEventListener(
        `edata-${id}-biz-order-detail-updateById`,
        handleUpdateById,
      );
    };
  }, [id]);

  function handleReceiveMessage(msg: Record<string, any>) {
    if (msg && msg.eventId === eventId) {
      fetchData();
    }
  }

  return (
    <Container style={{ width, height }} key={refreshKey}>
      <Title title="处理进度" />
      <Progress data={dataSource.records} />
      <Title title="线下执行情况" />
      <Title.SubTitle title="接单人员" />
      {dataSource.dealPersonVO ? (
        <PersonCard data={dataSource.dealPersonVO}>
          <PersonCard.Item name="name" label="姓名" />
          <PersonCard.Item name="roleName" label="角色" />
          <PersonCard.Item name="phone" label="联系方式" />
          <PersonCard.Item
            name="acceptTime"
            label="接单时间"
            render={(value: any) =>
              value ? moment(value).format(TIME_FORMAT) : ''
            }
          />
          <PersonCard.Item
            name="finishTime"
            label="完单时间"
            render={(value: any) =>
              value ? moment(value).format(TIME_FORMAT) : ''
            }
          />
        </PersonCard>
      ) : (
        <Empty content="暂无接单人员信息" minHeight={154} />
      )}

      <Title.SubTitle title="处理照片" />
      {dataSource.dealRecordDetailVO &&
      dataSource.dealRecordDetailVO.picUrls ? (
        <ImgList data={dataSource.dealRecordDetailVO.picUrls} />
      ) : (
        <Empty content="暂无处理照片" minHeight={292} />
      )}

      <Title.SubTitle title="处理说明" />
      {dataSource.dealRecordDetailVO &&
      dataSource.dealRecordDetailVO.dealContent ? (
        <Text data={dataSource.dealRecordDetailVO.dealContent} />
      ) : (
        <Empty content="暂无处理说明" minHeight={40} />
      )}
      {townId ? (
        <EventWebSocket
          projectId={townId}
          env={apiEnv}
          onMessage={handleReceiveMessage}
        />
      ) : null}
    </Container>
  );
};

export default OrderDetailRightPanel;