/** @format */

import * as Charts from 'edata-charts';
import React, { useEffect, useState } from 'react';

import EventInfoCard from '../components/EventInfoCard';
import Progress from '../components/Progress';
import Title from '../components/Title';
import { fetchChartData, fetchEventDetail } from '../services';
import { DEVICE_MAP } from '../WorkOrderList/helper';
import EventWebSocket from './EventWebSocket';
import { options } from './option';
import { Container } from './styled';

interface EventDetailLeftPanelProps {
  id: string;
  apiEnv: string;
  eventId?: string;
  size: {
    width: number;
    height: number;
  };
}

export const DEVICE_ERROR_TYPE_MAP: Record<string, any> = {
  '0': '离线',
  '1': '故障',
  '2': '正常',
};
export const EVENT_STATUS_MAP: Record<string, any> = {
  '0': '未完成',
  '1': '未完成',
  '2': '已完成',
};

/**
 * 左侧工单详情面板
 * @param props
 */
const OrderDetailLeftPanel = (props: EventDetailLeftPanelProps) => {
  const {
    id,
    apiEnv = 'dev',
    eventId: receivedEventId,
    size: { width, height },
  } = props;

  const [refreshKey, setRefreshKey] = useState('-1');
  const [eventId, setEventId] = useState(receivedEventId);
  const [townId, setTownId] = useState('');
  const [deviceId, setDeviceId] = useState('');
  const [xData, setXData] = useState<Record<string, any>>({});
  const [yData, setYData] = useState<Record<string, any>>({});
  const [dataSource, setDataSource] = useState<Record<string, any>>({});

  useEffect(() => {
    setRefreshKey(Date.now().toString());
  }, [height]);
  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(() => {
    if (!eventId || !apiEnv) {
      return;
    }
    const fetchChartDatas = async () => {
      try {
        const res: Record<string, any> = await fetchChartData(
          {
            townId,
            deviceUniqueId: deviceId,
          },
          apiEnv,
        );
        if (res && res.errorCode === 0) {
          const result = res.data;
          const xData: Array<string> = [];
          const yData: Array<string> = [];
          for (let i = 0; i < result.length; i++) {
            xData.push(result[i].solveDate.slice(5));
            yData.push(result[i].completeNum);
          }
          // setDataSource(res.data);
          setXData(xData);
          setYData(yData);
        }
      } catch (error) {
        console.error(error);
      }
    };
    fetchChartDatas();
  }, [townId, deviceId, apiEnv]);

  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);
        }
        if (result && result.content && result.content.deviceUniqueId) {
          setDeviceId(result.content.deviceUniqueId);
        }
      } 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();
    }
  }
  const chartProps = {
    option: options,
    data: {
      xData,
      yData: [yData],
    },
    isShowArea: true,
    // size: {
    //   width: 370,
    //   height: 270,
    // },
    theme: {
      textColor: '#fff',
      primaryColor: '#00B9FF',
      secondColor: '#50E1A8',
      thirdColor: '#DDD',
      colorList: ['#00B9FF', '#50E1A8', '#DDD'],
    },
  };

  return (
    <Container style={{ width, height }} key={refreshKey}>
      <Title title="工单信息" />
      <EventInfoCard data={dataSource.deviceRepairOrderCardVO}>
        <EventInfoCard.Item
          name="deviceErrorType"
          label="异常类型"
          render={(field: string, dataRecord: Record<string, any>) =>
            DEVICE_ERROR_TYPE_MAP[dataRecord[field]] || '-'
          }
        />
        <EventInfoCard.Item
          name="iocDeviceType"
          label="设备类型"
          render={(field: string, dataRecord: Record<string, any>) =>
            DEVICE_MAP[dataRecord[field]] || '-'
          }
        />
        <EventInfoCard.Item name="deviceName" label="设备名称" />
        <EventInfoCard.Item name="createTime" label="上报时间" />
        <EventInfoCard.Item name="address" label="设备地点" />
        <EventInfoCard.Item
          name="status"
          label="处理状态"
          render={(field: string, dataRecord: Record<string, any>) =>
            EVENT_STATUS_MAP[dataRecord[field]] || '未知状态'
          }
        />
      </EventInfoCard>
      <Title title="设备基础信息" />
      <EventInfoCard data={dataSource.repairOrderDeviceVO}>
        <EventInfoCard.Item name="vendorName" label="设备厂商" />
        <EventInfoCard.Item name="modelNumber" label="设备型号" />
        <EventInfoCard.Item name="usageTime" label="使用年限" />
      </EventInfoCard>
      <Title title="设备异常趋势" />

      <div style={{ padding: '15px 0 39px 0' }}>
        <Charts.SCLineChart {...chartProps} />
      </div>
      <Title title="历史完单记录" />
      <div className="orderList">
        {dataSource.deviceRepairRecordVOS &&
        dataSource.deviceRepairRecordVOS.length > 0 ? (
          <Progress data={dataSource.deviceRepairRecordVOS} />
        ) : (
          <p className="empty">暂无完单记录</p>
        )}
      </div>
      {townId ? (
        <EventWebSocket
          projectId={townId}
          env={apiEnv}
          onMessage={handleReceiveMessage}
        />
      ) : null}
    </Container>
  );
};

export default OrderDetailLeftPanel;