import React, { useState, useEffect, useRef } from 'react';
import { Line } from '@ant-design/plots';
import { Spin } from 'antd';
import styles from './index.less';
import TdbRHchart from './TdbRHchart.jsx';
import { queryPropertyData } from '@/services/sagacare_service/environment';
export default ({ paramObj, spaceId }) => {
  let [data, setData] = useState([]);
  let [levelMax, setLevelMax] = useState(0);
  const dealTime = (date) => {
    const str = date.substr(8, 4);
    const time = str.slice(0, 2) + ':' + str.slice(2);
    return time;
  };
  useEffect(() => {
    if (paramObj.id && spaceId) {
      fn();
    }
  }, [paramObj, spaceId]);
  const fn = async () => {
    setData([]);
    let dataArr = [];
    if (paramObj.id == 'Tdb,RH') {
      const arrId = paramObj.id.split(',');
      let resArr = [];
      arrId.forEach((item, idx) => {
        const type = item == 'Tdb' ? '温度' : '湿度';
        const resData = getChartData(item, type);
        resArr.push(resData);
      });

      Promise.all(resArr).then((res) => {
        let resData = [];
        if (res[0].length === 1 && res[1] === 1) {
          // 都没有数据
          resData = res[0];
        } else {
          res[0] = res[0].length !== 1 ? res[0] : [];
          res[1] = res[1].length !== 1 ? res[1] : [];
          for (let i = 0; i < res[0].length; i++) {
            let tempObj = { ...res[0][i], ...res[1][i] };
            resData.push(tempObj);
          }
        }
        setData(resData);
      });
    } else {
      const resData = await getChartData(paramObj.id, paramObj.name);
      setData(resData);
    }
  };
  const getChartData = (objId, type) => {
    const params = {
      spaceId: spaceId,
      funcid: objId,
    };
    return queryPropertyData(params).then((res) => {
      let chartArr = [];
      if (res.dayTarget) {
        let scalesCheckArr = [];
        let arr = [];
        const max = res.dayTarget[0] && res.dayTarget[0][paramObj.maxType];
        setLevelMax(max); // 最大值
        res.propertyData.shift();
        arr = res.propertyData;
        let key = 'scales';

        if (objId === 'RH' || objId === 'Tdb') {
          key = objId;
        }
        arr.forEach((itemArr) => {
          let scales = '--';
          if (itemArr[1] == '-9999') {
            scalesCheckArr.push(itemArr[1]);
            scales = '--';
          } else {
            scales = Number(itemArr[1].toFixed(paramObj.pointNum));
          }
          chartArr.push({ Date: dealTime(itemArr[0]), [key]: scales, type: type });
        });
        if (scalesCheckArr.length == arr.length) {
          // 有返回时间且数据都是-9999 显示暂无数据
          return ['noNum'];
        }
      } else {
        // 无返回数据 显示 该空间数据未配置
        return ['notDeploy'];
      }

      return chartArr;
    });
  };
  const config = {
    data,
    xField: 'Date',
    yField: 'scales',
    seriesField: 'type',
    xAxis: {
      range: [0, 1],
    },
    yAxis: {
      tickCount: 6,
    },
    legend: {
      layout: 'horizontal',
      position: 'top-right',
    },
    annotations: [
      // 辅助线
      {
        type: 'line',
        start: [0, levelMax],
        end: [data.length - 1, levelMax],
        top: true,
        style: {
          stroke: paramObj.id == 'Tdb,RH' ? 'white' : 'red',
          lineWidth: 1,
        },
      },
    ],
  };
  if (data[0] == 'notDeploy') {
    return <div className={styles.noNum}>该空间数据未配置</div>;
  } else if (data[0] == 'noNum') {
    return <div className={styles.noNum}>暂无数据</div>;
  } else if (data.length > 3) {
    if (paramObj.id == 'Tdb,RH') {
      return (
        <>
          <TdbRHchart data={data} />
          <div className={styles.chartText}>
            <span>温湿度逐时分布</span>
          </div>
        </>
      );
    } else {
      return (
        <>
          <Line {...config} />
          <div className={styles.chartText}>
            <span>浓度逐时分布</span>
          </div>
        </>
      );
    }
  } else {
    return (
      <div className={styles.noNum}>
        <Spin />
      </div>
    );
  }
};
