import {SVGRenderer, SvgChart} from '@wuba/react-native-echarts';
import {LineChart} from 'echarts/charts';
import {GridComponent, TooltipComponent} from 'echarts/components';
import * as echarts from 'echarts/core';
import React, {PureComponent} from 'react';
import {Dimensions} from 'react-native';

echarts.use([SVGRenderer, LineChart, GridComponent, TooltipComponent]);

const {width: winWidth} = Dimensions.get('window');

class TestEchart extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {};
    this.skiaRef = null;
  }

  componentDidMount() {
    this.initPage();
  }

  componentWillUnmount() {
    this.modalAct && this.modalAct.remove();
    this.chart?.dispose();
  }

  render() {
    return <SvgChart ref={ele => (this.skiaRef = ele)} />;
  }

  initPage = () => {
    const option = {
      animation: false,
      tooltip: {
        trigger: 'axis',
        position: function (point, params, dom, size, cont) {},
        formatter: function () {
          return '';
        },
        axisPointer: {
          type: 'line',
          lineStyle: {
            color: '#ec652e',
          },
        },
      },
      grid: {
        right: 10,
        top: 20,
        containLabel: false,
      },
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          data: [150, 230, 224, 218, 135, 147, 260],
          type: 'line',
          markLine: {
            silent: false,
            data: [
              {
                name: '平均线',
                type: 'average',
                xAxis: new Date().getTime(),
              },
              {
                name: 'Y 轴值为 100 的水平线',
                yAxis: 110,
              },
            ],
          },
        },
      ],
    };
    if (this.skiaRef) {
      /**
       * 五、初始化图表，指定下宽高
       */
      this.chart = echarts.init(this.skiaRef, 'light', {
        renderer: 'svg',
        width: winWidth,
        height: 320,
      });
      this.chart.setOption(option);
    }
  };
}

export default TestEchart;