
/*
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements.  See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership.  The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License.  You may obtain a copy of the License at
*
*   http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied.  See the License for the
* specific language governing permissions and limitations
* under the License.
*/


/**
 * AUTO-GENERATED FILE. DO NOT MODIFY.
 */

/*
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements.  See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership.  The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License.  You may obtain a copy of the License at
*
*   http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied.  See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import { __assign, __extends } from "tslib";
import * as graphic from '../../util/graphic.js';
import { createClipPath } from '../helper/createClipPathFromCoordSys.js';
import ChartView from '../../view/Chart.js';
import { LongColor, ShortColor, ArrowSize, TriangleSize, LongBg, ShortBG } from './constants.js';
import { createSymbol } from '../../util/symbol.js';
import { each } from 'tvrender/lib/core/util.js';
import { getECData } from '../../util/innerStore.js';
import { toggleHoverEmphasis } from '../../util/states.js';
import { makeInner } from '../../util/model.js';
import PlaybackHtmlContent from './PlaybackHtmlContent.js';
var inner = makeInner();
var PlaybackOrderView = /** @class */function (_super) {
  __extends(PlaybackOrderView, _super);
  function PlaybackOrderView() {
    var _this = _super !== null && _super.apply(this, arguments) || this;
    _this.type = PlaybackOrderView.type;
    return _this;
  }
  // init(ecModel: GlobalModel, api: ExtensionAPI) {
  // }
  PlaybackOrderView.prototype.render = function (seriesModel, ecModel, api) {
    var data = seriesModel.getData();
    this.seriesModel = seriesModel;
    this._renderSymbol(data, seriesModel);
    this._renderHover();
    if (!this.htmlContent) {
      this.htmlContent = new PlaybackHtmlContent(api);
      api.getZr().on('mousedown', this._clickGlobal, this);
    }
    this._isSmallSize = seriesModel.get('isMobile') && api.getWidth() <= 600;
    var clipPath = seriesModel.get('clip', true) && createClipPath(seriesModel.coordinateSystem, false, seriesModel);
    this.api = api;
    if (clipPath) {
      this.group.setClipPath(clipPath);
    } else {
      this.group.removeClipPath();
    }
  };
  PlaybackOrderView.prototype._renderHover = function () {
    var obj = this._hoverParams;
    if (!obj) {
      return;
    }
    var seriesModel = this.seriesModel;
    var data = seriesModel.getData();
    var isUp = obj.type === 'up';
    var dataModal = data.getItemModel(obj.index);
    var orders = dataModal.get(isUp ? 'upOrders' : 'downOrders');
    if (!orders) {
      return;
    }
    var totalPrice = 0;
    each(orders, function (item) {
      totalPrice = item.price + totalPrice;
    });
    var coordSys = seriesModel.coordinateSystem;
    var avgPrice = totalPrice / orders.length;
    var store = data.getStore();
    var x = store.get(0, obj.index);
    var _a = coordSys.dataToPoint([x, avgPrice]),
      triangleX = _a[0],
      triangleY = _a[1];
    var z = seriesModel.get('z');
    this._hoverGroup.childAt(0).attr({
      style: {
        fill: isUp ? LongColor : ShortColor,
        lineWidth: 1,
        stroke: "#000"
      },
      shape: {
        x: triangleX,
        y: triangleY,
        width: TriangleSize[0],
        height: TriangleSize[1]
      },
      z: z
    });
    var arrows = data.getLayout(isUp ? 'upArrow' : "downArrow");
    var arrow = arrows[obj.orderIndex];
    var width = ArrowSize[0] + 8;
    var height = ArrowSize[1] + 8;
    this._hoverGroup.childAt(1).attr({
      style: {
        fill: isUp ? LongBg : ShortBG
      },
      shape: {
        r: 8,
        x: arrow[0] - width / 2,
        y: arrow[1] - height / 2,
        width: width,
        height: height
      },
      z: z
    });
  };
  PlaybackOrderView.prototype._clickGlobal = function () {
    this.htmlContent.hide();
    if (this._hoverParams) {
      this._mouseout();
    }
  };
  PlaybackOrderView.prototype._getClipShape = function (seriesModel) {
    if (!seriesModel.get('clip', true)) {
      return;
    }
    var coordSys = seriesModel.coordinateSystem;
    // PENDING make `0.1` configurable, for example, `clipTolerance`?
    return coordSys && coordSys.getArea && coordSys.getArea(.1);
  };
  PlaybackOrderView.prototype._mouseDown = function (e) {
    var obj = inner(e.target);
    if (!obj) {
      return;
    }
    e.cancelBubble = true;
  };
  PlaybackOrderView.prototype._mouseClick = function (e) {
    var obj = inner(e.target);
    if (!obj) {
      return;
    }
    e.cancelBubble = true;
    var seriesModel = this.seriesModel;
    var data = seriesModel.getData();
    var isUp = obj.type === 'up';
    var dataModal = data.getItemModel(obj.index);
    var orders = dataModal.get(isUp ? 'upOrders' : 'downOrders');
    if (!orders) {
      return;
    }
    var isSmallSize = this._isSmallSize;
    if (isSmallSize) {
      this.api.trigger('playbackorderclick', {
        isUp: isUp,
        orders: orders,
        time: dataModal.get('time'),
        precision: seriesModel.get('precision')
      });
      return;
    }
    this.htmlContent.show({
      isUp: isUp,
      orders: orders,
      x: e.offsetX,
      y: e.offsetY,
      time: dataModal.get('time'),
      precision: seriesModel.get('precision')
    });
  };
  PlaybackOrderView.prototype._mouseover = function (e) {
    var obj = inner(e.target);
    if (!obj) {
      return;
    }
    var seriesModel = this.seriesModel;
    if (!this._hoverGroup) {
      var z2 = seriesModel.get('z2');
      var z = seriesModel.get('z');
      this._hoverGroup = new graphic.Group();
      var downTriangleEl = createSymbol(obj.type === "up" ? 'lineTriangleRight' : 'lineTriangleLeft', 0, 0, 0, 0);
      downTriangleEl.z2 = z2 - 1;
      downTriangleEl.z2 = z;
      var rectEl = new graphic.Rect();
      rectEl.z2 = z2 - 1;
      rectEl.z2 = z;
      this._hoverGroup.add(downTriangleEl);
      this._hoverGroup.add(rectEl);
      this.group.add(this._hoverGroup);
    }
    // this._hoverGroup.ignore = false;
    this._hoverParams = obj;
    this._renderHover();
    // const coordSys = this.seriesModel.coordinateSystem;
    // const [index] = coordSys.pointToData([e.offsetX, e.offsetY]) as number[];
    // const dataModal = data.getRawDataItem(index, true);
    // console.log('%c [ dataModal ]-76', 'font-size:13px; background:pink; color:#bf2c9f;', index,dataModal)
  };

  PlaybackOrderView.prototype._mouseout = function () {
    this._hoverParams = null;
    this.group.remove(this._hoverGroup);
    this._hoverGroup = null;
    // this._hoverGroup.attr({
    //     ignore: true,
    // });
  };

  PlaybackOrderView.prototype._renderSymbol = function (data, seriesModel) {
    if (!this._symbolGroup) {
      this._symbolGroup = new graphic.Group();
      this.group.add(this._symbolGroup);
      this.group.on('mouseover', this._mouseover, this);
      this.group.on('mouseout', this._mouseout, this);
      this.group.on('click', this._mouseClick, this);
      this.group.on('mousedown', this._mouseDown, this);
    } else {
      this._symbolGroup.removeAll();
    }
    var symbolGroup = this._symbolGroup;
    var z2 = seriesModel.get('z2');
    var emphasisState = seriesModel.get('emphasis').emphasisState;
    var groupId = seriesModel.get('groupId');
    var upArrow = data.getLayout('upArrow');
    if (upArrow && upArrow.length) {
      each(upArrow, function (item, i) {
        var x = item[0],
          y = item[1],
          count = item[2],
          index = item[3];
        var symbolProxy = createSymbol('lineArrowUp', 0, 0, ArrowSize[0], ArrowSize[1]);
        symbolProxy.shape = __assign(__assign({}, symbolProxy.shape), {
          triangleWidth: 4,
          triangleHeight: 6,
          x: x,
          y: y,
          count: count
        });
        symbolProxy.style = {
          stroke: LongColor,
          fill: 'none',
          lineWidth: 2
        };
        symbolProxy.z2 = z2;
        symbolProxy.states.emphasis = emphasisState;
        inner(symbolProxy).index = index;
        inner(symbolProxy).type = 'up';
        inner(symbolProxy).orderIndex = i;
        symbolGroup.add(symbolProxy);
      });
    }
    var downArrow = data.getLayout('downArrow');
    if (downArrow && downArrow.length) {
      each(downArrow, function (item, i) {
        var x = item[0],
          y = item[1],
          count = item[2],
          index = item[3];
        var symbolProxy = createSymbol('lineArrowDown', 0, 0, ArrowSize[0], ArrowSize[1]);
        symbolProxy.shape = __assign(__assign({}, symbolProxy.shape), {
          triangleWidth: 4,
          triangleHeight: 6,
          x: x,
          y: y,
          count: count
        });
        symbolProxy.style = {
          stroke: ShortColor,
          fill: 'none',
          lineWidth: 2
        };
        symbolProxy.z2 = z2;
        symbolProxy.states.emphasis = emphasisState;
        inner(symbolProxy).index = index;
        inner(symbolProxy).type = 'down';
        inner(symbolProxy).orderIndex = i;
        symbolGroup.add(symbolProxy);
      });
    }
    toggleHoverEmphasis(this.group, null, null, false);
    getECData(this.group).groupId = groupId;
  };
  PlaybackOrderView.prototype.remove = function (ecModel, api) {
    this.seriesModel = null;
    this._symbolGroup && this._symbolGroup.removeAll();
    this._symbolGroup = null;
    this.group.removeAll();
    this.api = null;
  };
  PlaybackOrderView.prototype.dispose = function (ecModel, api) {
    this.remove(ecModel, api);
    this.htmlContent.dispose();
    api.getZr().off('mousedown', this._clickGlobal);
    this.htmlContent = null;
    // this._lineGroup.removeAll();
  };

  PlaybackOrderView.type = 'playbackOrder';
  return PlaybackOrderView;
}(ChartView);
export default PlaybackOrderView;