/** @format */

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

import BasicLineChart from '../../charts/BasicLineChart';

/**
 * @description 历史关联预警图表
 */

interface RelationWarningChartProps {
  data: Record<string, any>;
}

const RelationWarningChart = (props: RelationWarningChartProps) => {
  const { data } = props;

  const [monthArray, setMonthArray] = useState<number[]>([]);

  useEffect(() => {
    const _array = [];
    const currentDate = new Date();

    for (let index = 0; index < 6; index++) {
      _array.push(
        moment(currentDate)
          .subtract(5 - index, 'month')
          .month() + 1,
      );
    }
    setMonthArray(_array);
  }, []);

  const chartProps = {
    option: {
      legend: {
        show: false,
      },
      grid: {
        left: 0,
        right: 0,
        bottom: 0,
        top: 20,
      },
      yAxis: {
        splitLine: {
          lineStyle: { color: 'rgba(170, 170, 170, .1)' },
        },
      },
      series: [
        {
          name: '预警次数',
          symbol: 'none',
        },
      ],
    },
    size: {
      width: 350,
      height: 120,
    },
    data: {
      xData: monthArray.map(month => `${month}月`),
      yData: [data],
    },
  };

  return <BasicLineChart {...chartProps} />;
};

export default RelationWarningChart;