import React, { useState, useEffect, useRef } from 'react';
import { DualAxes } from '@ant-design/plots';
import { Spin } from 'antd';
import styles from './index.less';
export default ({ data }) => {
  let tdbArr = [];
  let rhArr = [];
  let minMaxTdb = {
    minTdb: 100,
    maxTdb: 0,
  };
  let minMaxRH = {
    maxRH: 0,
    minRH: 100,
  };
  data.map((item) => {
    if (item.Tdb) {
      tdbArr = data;
      if (item.Tdb < minMaxTdb.minTdb) {
        minMaxTdb.minTdb = item.Tdb;
      }
      if (item.Tdb > minMaxTdb.maxTdb) {
        minMaxTdb.maxTdb = item.Tdb;
      }
    }
    if (item.RH) {
      rhArr = data;
      if (item.RH < minMaxRH.minRH) {
        minMaxRH.minRH = item.RH;
      }
      if (item.RH > minMaxRH.maxRH) {
        minMaxRH.maxRH = item.RH;
      }
    }
  });
  const config = {
    data: [tdbArr, rhArr],
    xField: 'Date',
    yField: ['Tdb', 'RH'],
    padding: [18],
    xAxis: {
      range: [0, 1],
    },
    yAxis: {
      RH: {
        max: Math.ceil(minMaxRH.maxRH) + 1,
        min: Math.floor(minMaxRH.minRH),
        // tickCount: 5,
      },
      Tdb: {
        max: Math.ceil(minMaxTdb.maxTdb) + 1,
        min: Math.floor(minMaxTdb.minTdb),
        // tickCount: 5,
      },
    },
    tooltip: {
      formatter: (item) => {
        return {
          name: 'RH' in item ? '湿度' : '温度',
          value: 'RH' in item ? `${item.RH}%` : `${item.Tdb}°C`,
        };
      },
    },
    legend: false,
    annotations: [
      [
        {
          type: 'text',
          content: '°C',
          position: ['-6%', '-10%'],
        },
      ],
      [
        {
          type: 'text',
          content: '%',
          position: ['102%', '-10%'],
        },
      ],
    ],
    geometryOptions: [
      {
        geometry: 'line',
        color: '#5B8FF9',
      },
      {
        geometry: 'line',
        color: '#5AD8A6',
      },
    ],
  };
  return (
    <>
      <div className={styles.legend}>
        <div className={styles.itemLegend}>
          <i className={`${styles.linebox} ${styles.lineTdb}`}></i>
          <span>温度</span>
        </div>
        <div className={styles.itemLegend}>
          <i className={styles.linebox}></i>
          <span>湿度</span>
        </div>
      </div>
      <DualAxes {...config} />
    </>
  );
};
