import * as React from 'react';
import { DatePicker, notification, Spin } from 'component/antd';
import moment, { Moment } from 'moment';
import { timeStampStr } from 'constants/strategy';
import { disabledDate } from 'lib/utils';
import * as echarts from 'echarts/core';

// 引入柱状图
import { BarChart, LineChart } from 'echarts/charts';

// 引入提示框和标题组件
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
  MarkLineComponent,
  DatasetComponent,
} from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';

// 注册必须的组件
echarts.use([
  TitleComponent,
  LegendComponent,
  TooltipComponent,
  GridComponent,
  BarChart,
  LineChart,
  CanvasRenderer,
  DatasetComponent,
  MarkLineComponent,
]);
import './index.less';

const { RangePicker } = DatePicker;

interface IChartProps {
  getChartData: (startTime: moment.Moment, endTime: moment.Moment) => any;
  customerNode?: React.ReactNode;
}

export class ChartWithDatePicker extends React.Component<IChartProps> {
  public state = {
    startTime: moment().subtract(1, 'hour'),
    endTime: moment(),
    loading: false,
    noData: false,
  };

  public id: HTMLDivElement = null;
  public chart: echarts.ECharts;

  public getData = () => {
    const { startTime, endTime } = this.state;
    const { getChartData } = this.props;
    this.setState({ loading: true });
    getChartData(startTime, endTime).then((data: any) => {
      this.setState({ loading: false });
      this.changeChartOptions(data);
    });
  }

  public componentDidMount() {
    this.chart = echarts.init(this.id);
    this.getData();
    window.addEventListener('resize', this.resize);
  }

  public componentWillUnmount() {
    window.removeEventListener('resize', this.resize);
  }

  public resize = () => {
    this.chart.resize();
  }

  public changeChartOptions(options: any) {
    const noData = options.series.length ? false : true;
    this.setState({ noData });
    options.tooltip.formatter = (params: any) => {
      let res =
        '<div style=\'margin-bottom:5px;padding:0 12px;width:100%;height:24px;line-height:24px;border-radius:3px;\'><p>' +
        params[0].data.time +
        ' </p></div>';
      // tslint:disable-next-line:prefer-for-of
      for (let i = 0; i < params.length; i++) {
        res += `<div key=${params[i].seriesName} style="color: #fff;padding:0 12px;line-height: 24px">
                  <span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;background-color:${[
            params[i].color,
          ]};"></span>
                  ${params[i].seriesName}
                  ${params[i].data[params[i].seriesName]}
                </div>`;
      }
      return res;
    };
    this.chart.setOption(options, true);
  }

  public handleTimeChange = (dates: Moment[]) => {
    this.setState({
      startTime: dates[0],
      endTime: dates[1],
    });
    const { getChartData } = this.props;
    this.setState({ loading: true });
    getChartData(dates[0], dates[1]).then((data: any) => {
      this.setState({ loading: false });
      this.changeChartOptions(data);
    });
  }

  public render() {
    const { customerNode } = this.props;
    return (
      <div className="status-box" style={{ minWidth: '930px' }}>
        <div className="status-graph">
          <div className="k-toolbar">
            {customerNode}
          </div>
          <ul className="k-toolbar">
            <li>
              <RangePicker
                ranges={{
                  今日: [moment().startOf('date'), moment()],
                  近一天: [moment().subtract(1, 'day'), moment()],
                  近一周: [moment().subtract(7, 'day'), moment()],
                }}
                disabledDate={disabledDate}
                defaultValue={[moment().subtract(1, 'hour'), moment()]}
                format={timeStampStr}
                onChange={this.handleTimeChange}
              />
            </li>
          </ul>
        </div>
        <Spin spinning={this.state.loading} className="chart-content">
          {this.state.noData ? <div className="nothing-style">暂无数据</div> : null}
          <div className={this.state.noData ? 'chart-no-data' : 'chart'} ref={(id) => this.id = id} />
        </Spin>
      </div>
    );
  }
}