import * as echarts from 'echarts';
import WaterLayout from './waterLayout.js';

echarts.extendChartView({
  type: 'water',
  render: function render(seriesModel, ecModel, api) {
    this.group.removeAll();
    var sys = api.getCoordinateSystems()[0];
    var data = seriesModel.getData();
    var item = data.getItemModel(0);
    var style = item.getModel('itemStyle');
    var layout = item.get('data').map(function (p) {
      return sys.convertToPixel(null, {
        seriesModel: seriesModel
      }, p);
    });
    var count = item.get('count');
    var height = api.getHeight() - (item.get('grid.0.bottom') || 0);
    for (var i = 0; i < count; i++) {
      var water = new WaterLayout({
        shape: {
          height: height,
          layout: layout,
          speedX: item.get('speedX'),
          speedY: item.get('speedY') + i / 1000,
          amplitude: item.get('amplitude'),
          wave: item.get('wave')
        },
        style: style.getItemStyle()
      });
      water.animate('shape', true).when(1000, {
        phase: 1
      }).start();
      this.group.add(water);
    }
  },
  dispose: function dispose() {
    this.group.removeAll();
  }
});
