
/*
* 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.
 */

import { __assign, __extends } from "tslib";
import * as graphic from '../../util/graphic.js';
import ComponentView from '../../view/Component.js';
import { getWidth } from 'tvrender/lib/contain/text.js';
import { createSymbol } from '../../util/symbol.js';
import { isGradientObject } from 'tvrender/lib/core/util.js';
import { DefaultFamily } from '../../data/Constant.js';
import { blendColors, getIsLightColor } from '../../util/color.js';
var labelRectWidth = 38;
var orderTpLMargin = 11;
var descLMargin = 7;
var descRectPadding = 10;
var descProfitPadding = 12;
var descClosePadding = 10;
var maxCircleMargin = 28;
var circleR = 4;
var longColor = 'rgba(41, 107, 239, 1)';
var longBg = 'rgba(41, 107, 239, 0.1)';
var shortColor = 'rgba(242, 54, 70, 1)';
var shortBg = 'rgba(242, 54, 70, 0.1)';
var stopProfit = 'rgba(4, 154, 129, 1)';
var stopProfitBg = 'rgba(4, 154, 129, 0.1)';
var stopLoss = 'rgba(255, 152, 0, 1)';
var stopLossBg = 'rgba(255, 152, 0, 0.1)';
var closePIcon = 'path://M428.8 192c-12.8-6.4-32 0-38.4 6.4L179.2 409.6c-12.8 12.8-12.8 32 0 44.8 6.4 6.4 12.8 6.4 25.6 6.4s19.2 0 25.6-6.4L384 294.4v505.6c0 19.2 12.8 32 32 32s32-12.8 32-32v-576c0-12.8-6.4-25.6-19.2-32zM838.4 569.6c-12.8-12.8-32-12.8-44.8 0L640 723.2V224c0-19.2-12.8-32-32-32s-32 12.8-32 32v582.4c0 6.4 6.4 12.8 6.4 12.8 6.4 12.8 19.2 12.8 25.6 12.8s19.2 0 25.6-6.4l211.2-211.2c6.4-12.8 6.4-32-6.4-44.8z';
var backIcon = 'path://M145.066667 486.4l247.466666-213.333333c17.066667-17.066667 42.666667-17.066667 59.733334-8.533334 8.533333 8.533333 17.066667 17.066667 17.066666 25.6v435.2c0 25.6-17.066667 42.666667-42.666666 42.666667-17.066667 0-25.6 0-34.133334-8.533333L145.066667 537.6c-25.6-17.066667-25.6-34.133333 0-51.2zM571.733333 486.4l247.466667-213.333333c17.066667-17.066667 42.666667-17.066667 59.733333 0 8.533333 8.533333 17.066667 17.066667 17.066667 25.6v435.2c0 17.066667-17.066667 34.133333-42.666667 34.133333-17.066667 0-25.6 0-34.133333-8.533333L571.733333 537.6c-25.6-17.066667-25.6-34.133333 0-51.2z';
var closeIcon = 'path://M844.8 247.466667l-68.266667-68.266667L512 452.266667 247.466667 179.2l-68.266667 68.266667L452.266667 512 179.2 776.533333l68.266667 68.266667L512 571.733333l264.533333 273.066667 68.266667-68.266667L571.733333 512z';
var getTextWidth = function (text) {
  var font = "14px " + DefaultFamily;
  return getWidth(text, font);
};
var getProfitColor = function (profit, bgColor) {
  if (profit > 0) {
    return "#049A81";
  } else if (profit < 0) {
    return "#F23646";
  } else if (typeof bgColor !== 'string') {
    return "#049A81";
  }
  return getIsLightColor(bgColor) ? "rgba(0,0,0,0.5)" : "rgba(255,255,255,0.5)";
};
var PlaybackOrderView = /** @class */function (_super) {
  __extends(PlaybackOrderView, _super);
  function PlaybackOrderView() {
    var _this = _super !== null && _super.apply(this, arguments) || this;
    _this.type = PlaybackOrderView.type;
    _this.mouseSelected = false;
    _this.selected = false;
    _this.dragType = '';
    _this.dragGroupType = '';
    return _this;
  }
  PlaybackOrderView.prototype.init = function (ecModel, api) {
    this.ecModel = ecModel;
    this.api = api;
  };
  PlaybackOrderView.prototype.render = function (playbackOrderModel, ecModel, api) {
    var order = playbackOrderModel.get('order');
    if (!order || !order.show) {
      this.clear();
      return;
    }
    if (this.lastOrderDirection && this.lastOrderDirection !== order.direction) {
      this.clear();
    }
    if (!this.eventMount) {
      this.ecModel = ecModel;
      this.api = api;
      this.group.on('mousemove', this.orderMouseover, this);
      this.group.on('mouseout', this.orderMouseout, this);
      this.group.on('mousedown', this.orderMousedown, this);
      this.group.on('click', this.orderClick, this);
      var zr = api.getZr();
      zr.on('mousedown', this.zrMouseDown, this);
      zr.on('mousemove', this.zrMouseMove, this);
      zr.on('mouseup', this.zrMouseUp, this);
      this.eventMount = true;
    }
    this.playbackOrderModel = playbackOrderModel;
    this.lastOrderDirection = order.direction;
    this.renderOrder();
  };
  PlaybackOrderView.prototype.sendMessage = function (type) {
    var order = this.playbackOrderModel.get('order');
    this.api.trigger('playbackorder', {
      type: type,
      order: order,
      dragPrice: this.dragPrice
    });
    if (this.dragPrice) {
      this.dragPrice = null;
    }
  };
  PlaybackOrderView.prototype.zrMouseMove = function (e) {
    var _a;
    if (this.dragType) {
      this.dragPrice = this.yAxisModel.coordToData(this.yAxisModel.toLocalCoord(e.offsetY));
      this.renderOrder();
      return;
    }
    if (this.dragGroupType) {
      var dragPrice = this.yAxisModel.coordToData(this.yAxisModel.toLocalCoord(e.offsetY));
      this.playbackOrderModel.updateOrder((_a = {}, _a[this.dragGroupType === 'profit' ? 'stopProfit' : 'stopLoss'] = dragPrice, _a));
      this.dragPrice = dragPrice;
      this.renderOrder();
    }
  };
  PlaybackOrderView.prototype.zrMouseUp = function () {
    if (this.dragType) {
      this.dragPrice && this.sendMessage(this.dragType === 'TP' ? 'addTp' : 'addSl');
      this.dragType = '';
      var pointer = this.ecModel.getComponent('axisPointer', 0);
      if (pointer) {
        pointer.option.updatePointDisable = false;
      }
      this.renderOrder();
      return;
    }
    if (this.dragGroupType) {
      this.dragPrice && this.sendMessage(this.dragGroupType === 'profit' ? 'dragStopProfit' : 'dragStopLoss');
      this.dragGroupType = '';
      var pointer = this.ecModel.getComponent('axisPointer', 0);
      if (pointer) {
        pointer.option.updatePointDisable = false;
      }
      this.renderOrder();
    }
  };
  PlaybackOrderView.prototype.orderElVisible = function (type, invisible) {
    var _a = this.orderGroupEls,
      orderClosePositionEl = _a.orderClosePositionEl,
      orderTpEl = _a.orderTpEl,
      orderSlEl = _a.orderSlEl,
      orderCircleEl = _a.orderCircleEl;
    // orderCircleEl.invisible = invisible
    var playbackOrderModel = this.playbackOrderModel;
    var order = playbackOrderModel.get('order');
    var color = order.direction === 'long' ? longColor : shortColor;
    orderCircleEl.attr({
      style: {
        fill: this.selected ? color : this.backgroundColor,
        stroke: color
      },
      shape: {
        r: this.selected ? circleR - 1 : circleR
      },
      invisible: invisible
    });
    if (this.stopProfitEls) {
      // this.stopProfitEls.stopCircleEl.invisible = invisible;
      this.stopProfitEls.stopCircleEl.attr({
        style: {
          fill: this.selected ? stopProfit : this.backgroundColor,
          stroke: stopProfit
        },
        shape: {
          r: this.selected ? circleR - 1 : circleR
        },
        invisible: invisible
      });
      this.stopProfitEls.stopJoinLineEl.ignore = invisible;
    }
    if (this.stopLossEls) {
      // this.stopLossEls.stopCircleEl.invisible = invisible;
      this.stopLossEls.stopJoinLineEl.ignore = invisible;
      this.stopLossEls.stopCircleEl.attr({
        style: {
          fill: this.selected ? stopLoss : this.backgroundColor,
          stroke: stopLoss
        },
        shape: {
          r: this.selected ? circleR - 1 : circleR
        },
        invisible: invisible
      });
    }
    orderClosePositionEl.children().forEach(function (item) {
      item.attr('invisible', invisible);
    });
    orderTpEl.children().forEach(function (item) {
      item.attr('invisible', invisible);
    });
    orderSlEl.children().forEach(function (item) {
      item.attr('invisible', invisible);
    });
  };
  PlaybackOrderView.prototype.orderMouseover = function (e) {
    if (!this.dragType && !this.dragGroupType) {
      e.cancelBubble = true;
    }
    if (this.mouseSelected) {
      return;
    }
    this.api.dispatchAction({
      type: 'updateAxisPointer',
      currTrigger: 'globalout'
    });
    if (!this.orderGroupEls || this.selected) {
      return;
    }
    // const pointer = this.ecModel.getComponent('axisPointer', 0)
    this.mouseSelected = true;
    this.orderElVisible('mouseover', false);
  };
  PlaybackOrderView.prototype.orderMouseout = function (e) {
    this.mouseSelected = false;
    if (!this.orderGroupEls || this.selected) {
      return;
    }
    this.orderElVisible('mouseout', true);
  };
  PlaybackOrderView.prototype.orderClick = function (e) {
    e.cancelBubble = true;
  };
  PlaybackOrderView.prototype.orderMousedown = function (e) {
    e.cancelBubble = true;
    if (this.selected) {
      return;
    }
    this.selected = true;
    this.orderElVisible('mousedown', false);
  };
  PlaybackOrderView.prototype.zrMouseDown = function (e) {
    if (!this.selected) {
      return;
    }
    this.selected = false;
    this.orderElVisible('mousedown', true);
  };
  PlaybackOrderView.prototype.createOrderEl = function () {
    var _this = this;
    var playbackOrderModel = this.playbackOrderModel;
    var order = playbackOrderModel.get('order');
    var color = order.direction === 'long' ? longColor : shortColor;
    var orderBg = order.direction === 'long' ? longBg : shortBg;
    var zlevel = playbackOrderModel.get('zlevel');
    var orderGroup = this.orderGroup;
    var orderLineEl = new graphic.Line({
      zlevel: zlevel
    });
    var orderClosePositionEl = new graphic.Group();
    var closePositionRect = new graphic.Rect({
      shape: {
        y: -9,
        width: labelRectWidth,
        height: 18,
        r: 10
      },
      style: {
        fill: this.backgroundColor,
        stroke: color
      },
      invisible: true,
      zlevel: zlevel
      // z2: 2,
    });

    var closePositionIcon = createSymbol(closePIcon, 13, -6, 12, 12, color);
    orderClosePositionEl.add(closePositionRect);
    orderClosePositionEl.add(closePositionIcon);
    orderClosePositionEl.onmouseover = function () {
      //    const rect = closePositionRect.getBoundingRect();
      _this.clearTimer();
      _this._timer = setTimeout(function () {
        var _a = closePositionRect.transformCoordToGlobal(closePositionRect.shape.x + closePositionRect.shape.width / 2, closePositionRect.shape.y),
          x = _a[0],
          y = _a[1];
        _this.api.dispatchAction({
          type: 'showTipText',
          escapeConnect: true,
          text: "平仓反手",
          x: x,
          y: y
        });
      }, 500);
      closePositionRect.attr('style', {
        fill: blendColors(orderBg, _this.backgroundColor)
      });
    };
    orderClosePositionEl.onmouseout = function () {
      closePositionRect.attr('style', {
        fill: _this.backgroundColor
      });
      _this.clearTimer();
      _this.api.dispatchAction({
        type: 'hideTipText',
        escapeConnect: true
      });
    };
    orderClosePositionEl.onclick = function () {
      _this.sendMessage('closePosition');
    };
    closePositionIcon.invisible = true;
    closePositionIcon.zlevel = zlevel;
    var orderTpEl = new graphic.Group();
    var orderTpRect = new graphic.Rect({
      invisible: true,
      zlevel: zlevel
    });
    var orderTpText = new graphic.Text({
      invisible: true,
      zlevel: zlevel
    });
    var orderTpBgEl = new graphic.Rect({
      silent: true,
      ignore: true,
      zlevel: zlevel
    });
    orderTpEl.add(orderTpRect);
    orderTpEl.add(orderTpText);
    orderGroup.add(orderTpBgEl);
    orderTpEl.onmouseover = function () {
      orderTpBgEl.attr({
        style: {
          fill: stopProfitBg
        },
        shape: order.direction === 'long' ? {
          x: _this.rect.x,
          y: -_this.y,
          width: _this.rect.width,
          height: _this.y
        } : {
          x: _this.rect.x,
          y: 0,
          width: _this.rect.width,
          height: _this.rect.height - _this.y
        },
        ignore: false
      });
      _this.clearTimer();
      _this._timer = setTimeout(function () {
        var _a = orderTpRect.transformCoordToGlobal(orderTpRect.shape.x + orderTpRect.shape.width / 2, orderTpRect.shape.y),
          x = _a[0],
          y = _a[1];
        _this.api.dispatchAction({
          type: 'showTipText',
          escapeConnect: true,
          text: "拖动以添加止盈",
          x: x,
          y: y
        });
      }, 500);
      orderTpRect.attr('style', {
        fill: blendColors(stopProfitBg, _this.backgroundColor)
      });
    };
    orderTpEl.onmouseout = function () {
      orderTpRect.attr('style', {
        fill: _this.backgroundColor
      });
      orderTpBgEl.attr('ignore', true);
      _this.clearTimer();
      _this.api.dispatchAction({
        type: 'hideTipText',
        escapeConnect: true
      });
    };
    orderTpEl.onmousedown = function () {
      _this.dragType = 'TP';
      var pointer = _this.ecModel.getComponent('axisPointer', 0);
      if (pointer) {
        pointer.option.updatePointDisable = true;
      }
    };
    var orderSlEl = new graphic.Group();
    var orderSlRect = new graphic.Rect({
      invisible: true,
      zlevel: zlevel
    });
    var orderSlText = new graphic.Text({
      invisible: true,
      zlevel: zlevel
    });
    var orderSlBgEl = new graphic.Rect({
      silent: true,
      ignore: true,
      zlevel: zlevel
    });
    orderSlEl.add(orderSlRect);
    orderSlEl.add(orderSlText);
    orderGroup.add(orderSlBgEl);
    orderSlEl.onmouseover = function () {
      orderSlBgEl.attr({
        style: {
          fill: stopLossBg
        },
        shape: order.direction === 'short' ? {
          x: _this.rect.x,
          y: -_this.y,
          width: _this.rect.width,
          height: _this.y
        } : {
          x: _this.rect.x,
          y: 0,
          width: _this.rect.width,
          height: _this.rect.height - _this.y
        },
        ignore: false
      });
      orderSlRect.attr('style', {
        fill: blendColors(stopLossBg, _this.backgroundColor)
      });
      _this.clearTimer();
      _this._timer = setTimeout(function () {
        var _a = orderSlRect.transformCoordToGlobal(orderSlRect.shape.x + orderSlRect.shape.width / 2, orderSlRect.shape.y),
          x = _a[0],
          y = _a[1];
        _this.api.dispatchAction({
          type: 'showTipText',
          escapeConnect: true,
          text: "拖动以添加止损",
          x: x,
          y: y
        });
      }, 500);
    };
    orderSlEl.onmouseout = function () {
      orderSlRect.attr('style', {
        fill: _this.backgroundColor
      });
      orderSlBgEl.attr('ignore', true);
      _this.clearTimer();
      _this.api.dispatchAction({
        type: 'hideTipText',
        escapeConnect: true
      });
    };
    orderSlEl.onmousedown = function () {
      _this.dragType = 'SL';
      var pointer = _this.ecModel.getComponent('axisPointer', 0);
      if (pointer) {
        pointer.option.updatePointDisable = true;
      }
    };
    var orderDescEl = new graphic.Group();
    var orderDescRect = new graphic.Rect({
      zlevel: zlevel
    });
    var orderSizeRect = new graphic.Rect({
      zlevel: zlevel
    });
    var orderSizText = new graphic.Text({
      zlevel: zlevel
    });
    var orderPlaybackIcon = createSymbol(backIcon, 0, -4, 8, 8, "#ffffff");
    orderPlaybackIcon.zlevel = zlevel;
    var orderProfitText = new graphic.Text({
      zlevel: zlevel
    });
    var orderCloseRect = new graphic.Rect({
      invisible: true,
      zlevel: zlevel
    });
    var orderCloseLine = new graphic.Line({
      zlevel: zlevel
    });
    var orderCloseIcon = createSymbol(closeIcon, 0, -4, 8, 8, color);
    ;
    orderCloseIcon.zlevel = zlevel;
    var orderCircleEl = new graphic.Circle({
      invisible: true,
      zlevel: zlevel,
      z: 10
    });
    orderDescEl.add(orderDescRect);
    orderDescEl.add(orderSizeRect);
    orderDescEl.add(orderSizText);
    orderDescEl.add(orderPlaybackIcon);
    orderDescEl.add(orderProfitText);
    var orderCloseEl = new graphic.Group();
    orderCloseEl.add(orderCloseRect);
    orderCloseEl.add(orderCloseLine);
    orderCloseEl.add(orderCloseIcon);
    orderDescEl.add(orderCloseEl);
    orderCloseEl.onmouseover = function () {
      orderCloseRect.attr({
        style: {
          fill: orderBg
        },
        invisible: false
      });
      _this.clearTimer();
      _this._timer = setTimeout(function () {
        var _a = orderCloseRect.transformCoordToGlobal(orderCloseRect.shape.x + orderCloseRect.shape.width / 2, orderCloseRect.shape.y),
          x = _a[0],
          y = _a[1];
        _this.api.dispatchAction({
          type: 'showTipText',
          escapeConnect: true,
          text: "平仓",
          x: x,
          y: y
        });
      }, 500);
    };
    orderCloseEl.onmouseout = function () {
      orderCloseRect.attr('invisible', true);
      _this.clearTimer();
      _this.api.dispatchAction({
        type: 'hideTipText',
        escapeConnect: true
      });
    };
    orderCloseEl.onclick = function () {
      _this.sendMessage('delete');
    };
    orderGroup.add(orderLineEl);
    orderGroup.add(orderClosePositionEl);
    orderGroup.add(orderTpEl);
    orderGroup.add(orderSlEl);
    orderGroup.add(orderDescEl);
    orderGroup.add(orderCircleEl);
    this.orderGroupEls = {
      orderLineEl: orderLineEl,
      orderClosePositionEl: orderClosePositionEl,
      orderTpEl: orderTpEl,
      orderSlEl: orderSlEl,
      orderDescEl: orderDescEl,
      orderCircleEl: orderCircleEl,
      orderTpBgEl: orderTpBgEl,
      orderSlBgEl: orderSlBgEl,
      orderCloseEl: orderCloseEl
    };
  };
  PlaybackOrderView.prototype.renderOrder = function () {
    var ecModel = this.ecModel;
    var playbackOrderModel = this.playbackOrderModel;
    if (!playbackOrderModel) {
      return;
    }
    var group = this.group;
    var grid = ecModel.getComponent('grid', 0);
    // const z = playbackOrderModel.get('z');
    var order = playbackOrderModel.get('order');
    var seriesName = playbackOrderModel.get('seriesName');
    var rect = grid.coordinateSystem.getRect();
    var seriesModel = ecModel.getSeriesByName(seriesName)[0];
    if (!seriesModel) {
      return;
    }
    var coordSys = seriesModel.coordinateSystem;
    if (!coordSys || !coordSys.master) {
      return;
    }
    var yAxisModel = coordSys.getAxis('y');
    // const yAxis = ecModel.getComponent('yAxis', 0) as AxisBaseModel;
    // const yAxis2D = yAxis.axis as Axis2D;
    var y = Math.floor(yAxisModel.toGlobalCoord(yAxisModel.dataToCoord(order.price))) + 0.5;
    var backgroundColor = ecModel.get('backgroundColor') || '#fff';
    if (backgroundColor && isGradientObject(backgroundColor) && !backgroundColor.global && backgroundColor.type === 'linear') {
      backgroundColor = __assign(__assign({}, backgroundColor), {
        global: true,
        y2: rect.height
      });
    }
    this.backgroundColor = backgroundColor;
    if (!this.orderGroup) {
      this.orderGroup = new graphic.Group();
      group.add(this.orderGroup);
    }
    // this.orderGroup.attr('y', y);
    this.orderGroup.y = y;
    this.y = y;
    this.rect = rect;
    this.yAxisModel = yAxisModel;
    this.renderOrderGroup();
  };
  PlaybackOrderView.prototype.renderOrderGroup = function () {
    var rect = this.rect;
    var playbackOrderModel = this.playbackOrderModel;
    var order = playbackOrderModel.get('order');
    var isLong = order.direction === 'long';
    var color = isLong ? longColor : shortColor;
    var yOffset = isLong ? 26 : -26;
    if (!this.orderGroupEls) {
      this.createOrderEl();
    }
    var _a = this.orderGroupEls,
      orderLineEl = _a.orderLineEl,
      orderClosePositionEl = _a.orderClosePositionEl,
      orderTpEl = _a.orderTpEl,
      orderSlEl = _a.orderSlEl,
      orderDescEl = _a.orderDescEl,
      orderCircleEl = _a.orderCircleEl,
      orderCloseEl = _a.orderCloseEl;
    orderLineEl.attr({
      shape: {
        x1: rect.x,
        y1: 0,
        x2: rect.x + rect.width,
        y2: 0
      },
      style: {
        lineWidth: 1,
        stroke: color
      }
    });
    // 边框
    orderTpEl.childAt(0).attr({
      shape: {
        y: -9,
        width: labelRectWidth,
        height: 18,
        r: 10
      },
      style: {
        fill: this.backgroundColor,
        stroke: stopProfit
      }
    });
    // 文字
    orderTpEl.childAt(1).attr({
      style: {
        text: 'TP',
        fill: stopProfit,
        fontSize: 14
      },
      x: 11,
      y: -6
    });
    // 边框
    orderSlEl.childAt(0).attr({
      shape: {
        y: -9,
        width: labelRectWidth,
        height: 18,
        r: 10
      },
      style: {
        fill: this.backgroundColor,
        stroke: stopLoss
      }
    });
    //文字
    orderSlEl.childAt(1).attr({
      style: {
        text: 'SL',
        fill: stopLoss,
        fontSize: 14
      },
      x: 11,
      y: -6
    });
    var sizeWidth = getTextWidth(order.size + '');
    var sizeRectWidth = sizeWidth + descRectPadding * 3 + 10;
    var profitText = order.profit.toFixed(order.precision) + " " + order.currency;
    var profitWidth = getTextWidth(profitText) + descProfitPadding * 2;
    var closeWidth = descClosePadding * 2 + 10;
    var descRectWidth = sizeRectWidth + profitWidth + closeWidth;
    var leftRectWidth = rect.width / 2;
    var circleMargin = 30;
    var isOverlap = rect.width < descRectWidth + labelRectWidth * 3 + orderTpLMargin + 1 + descLMargin + circleR + circleMargin * 2;
    if (isOverlap) {
      circleMargin = 15;
    }
    var buttonCount = isOverlap ? 1 : 1 + (order.stopProfit ? 0 : 1) + (order.stopLoss ? 0 : 1);
    var buttonWidth = labelRectWidth * buttonCount + orderTpLMargin + 1 + descLMargin;
    var isOverlay = rect.width < descRectWidth + buttonWidth + circleR;
    // let baseX = rect.width / 2;
    // let circleMargin = Math.min(maxCircleMargin, (leftRectWidth - circleR - descRectWidth /2) / 2);
    var baseX = rect.width - circleR - descRectWidth / 2 - 60;
    if (isOverlay) {
      baseX = rect.width - circleR - descRectWidth / 2;
      circleMargin = 0;
    } else if (leftRectWidth < descRectWidth / 2 + buttonWidth) {
      baseX = buttonWidth + descRectWidth / 2;
      circleMargin = Math.max(Math.min(circleMargin - 2, (rect.width - baseX - descRectWidth / 2 - circleR) / 2), 0);
    }
    var startX = rect.x + baseX - descRectWidth / 2 - buttonWidth;
    orderClosePositionEl.attr('x', isOverlap ? startX + labelRectWidth * (buttonCount - 1) + 1 + descLMargin : startX);
    var tpX = startX + labelRectWidth + orderTpLMargin;
    var circleX = Math.floor(rect.x + baseX + descRectWidth / 2 + circleMargin) + 0.5;
    this.circleX = circleX;
    this.circleMargin = circleMargin;
    var orderDescX = startX + labelRectWidth * buttonCount + orderTpLMargin + 1 + descLMargin;
    orderTpEl.attr('x', isOverlap ? orderDescX : tpX);
    orderTpEl.attr('y', isOverlap ? -yOffset : 0);
    if (this.dragType === 'TP' && this.dragPrice) {
      orderTpEl.ignore = true;
      this.dragStartX = tpX;
      this.renderTpDrag();
    } else {
      orderTpEl.ignore = false;
    }
    if (order.stopProfit !== void 0) {
      orderTpEl.ignore = true;
      this.renderStopProfit('profit');
    } else {
      this.removeStop('profit');
    }
    var slX = order.stopProfit ? startX + labelRectWidth + orderTpLMargin + 1 : startX + labelRectWidth * 2 + orderTpLMargin + 1;
    orderSlEl.attr('x', isOverlap ? orderDescX : slX);
    orderSlEl.attr('y', isOverlap ? yOffset : 0);
    if (this.dragType === 'SL' && this.dragPrice) {
      orderSlEl.ignore = true;
      this.dragStartX = slX;
      this.renderTpDrag();
    } else {
      orderSlEl.ignore = false;
    }
    if (!this.dragType) {
      this.removeTpDrag();
    }
    if (order.stopLoss !== void 0) {
      orderSlEl.ignore = true;
      this.renderStopProfit('loss');
    } else {
      this.removeStop('loss');
    }
    orderDescEl.attr('x', orderDescX);
    orderDescEl.childAt(0).attr({
      shape: {
        y: -9,
        width: descRectWidth,
        height: 18,
        r: 10
      },
      style: {
        fill: this.backgroundColor,
        stroke: color
      }
    });
    orderDescEl.childAt(1).attr({
      shape: {
        y: -9,
        width: sizeRectWidth,
        height: 18,
        r: [10, 0, 0, 10]
      },
      style: {
        fill: color
      }
    });
    orderDescEl.childAt(2).attr({
      style: {
        text: "" + (order.direction === 'long' ? '' : '-') + order.size,
        fill: '#ffffff',
        fontSize: 14
      },
      x: descRectPadding,
      y: -6
    });
    orderDescEl.childAt(3).attr('x', sizeWidth + descRectPadding * 2);
    orderDescEl.childAt(4).attr({
      style: {
        text: profitText,
        fill: getProfitColor(order.profit, this.backgroundColor),
        fontSize: 14
      },
      x: sizeRectWidth + descProfitPadding,
      y: -6
    });
    orderCloseEl.childAt(0).attr({
      shape: {
        y: -9,
        width: closeWidth,
        height: 18,
        r: [0, 10, 10, 0]
      },
      x: sizeRectWidth + profitWidth
    });
    orderCloseEl.childAt(1).attr({
      style: {
        stroke: color
      },
      shape: {
        y1: -9,
        y2: 9
      },
      x: Math.floor(sizeRectWidth + profitWidth) + 0.5
    });
    orderCloseEl.childAt(2).attr('x', sizeRectWidth + profitWidth + descClosePadding);
    orderCircleEl.attr({
      style: {
        fill: this.selected ? color : this.backgroundColor,
        stroke: color
      },
      shape: {
        cx: circleX,
        // cy: y,
        r: this.selected ? circleR - 1 : circleR
      }
    });
    this.renderLabels();
  };
  PlaybackOrderView.prototype.renderTpDrag = function () {
    var yAxisModel = this.yAxisModel;
    var tpy = yAxisModel.toGlobalCoord(yAxisModel.dataToCoord(this.dragPrice));
    var rect = this.rect;
    var playbackOrderModel = this.playbackOrderModel;
    var zlevel = playbackOrderModel.get('zlevel');
    var order = playbackOrderModel.get('order');
    var isLong = order.direction === 'long';
    var color = this.dragType === 'TP' ? stopProfit : stopLoss;
    var bgColor = this.dragType === 'TP' ? stopProfitBg : stopLossBg;
    if (!this.dragTpGroupEl) {
      this.dragTpGroupEl = new graphic.Group();
      var lineEl = new graphic.Line({
        zlevel: zlevel
      });
      var rectEl = new graphic.Rect({
        zlevel: zlevel
      });
      var titleEl = new graphic.Text({
        zlevel: zlevel
      });
      var splitEl = new graphic.Line({
        zlevel: zlevel
      });
      var profitEl = new graphic.Text({
        zlevel: zlevel
      });
      var bgEl = new graphic.Rect({
        zlevel: zlevel
      });
      var joinLineEl = new graphic.Line({
        zlevel: zlevel
      });
      var circleEl = new graphic.Circle({
        zlevel: zlevel,
        z: 10
      });
      var labelEl = new graphic.Text({
        zlevel: 2,
        z: 101
      });
      this.dragTpGroupEl.add(lineEl);
      this.dragTpGroupEl.add(rectEl);
      this.dragTpGroupEl.add(titleEl);
      this.dragTpGroupEl.add(splitEl);
      this.dragTpGroupEl.add(profitEl);
      this.dragTpGroupEl.add(bgEl);
      this.dragTpGroupEl.add(joinLineEl);
      this.dragTpGroupEl.add(circleEl);
      this.dragTpGroupEl.add(labelEl);
      this.group.add(this.dragTpGroupEl);
    }
    var dragTpGroupEl = this.dragTpGroupEl;
    var titleWidth = 32;
    var tp = ((isLong ? this.dragPrice - order.price : order.price - this.dragPrice) * order.size).toFixed(order.precision) + " " + order.currency;
    var tpWidth = getTextWidth(tp) + descProfitPadding * 2;
    dragTpGroupEl.childAt(0).attr({
      shape: {
        x1: rect.x,
        y1: tpy,
        x2: rect.x + rect.width,
        y2: tpy
      },
      style: {
        lineWidth: 1,
        stroke: color,
        lineDash: [5, 5]
      }
    });
    dragTpGroupEl.childAt(1).attr({
      shape: {
        y: tpy - 9,
        width: tpWidth + titleWidth,
        height: 18,
        r: 10,
        x: this.dragStartX
      },
      style: {
        fill: this.backgroundColor,
        stroke: color,
        lineDash: [5, 5]
      }
    });
    dragTpGroupEl.childAt(2).attr({
      style: {
        text: this.dragType,
        fill: color,
        fontSize: 14
      },
      x: this.dragStartX + 8,
      y: tpy - 6
    });
    var splitX = Math.floor(this.dragStartX + titleWidth) + 0.5;
    dragTpGroupEl.childAt(3).attr({
      shape: {
        x1: splitX,
        y1: tpy - 9,
        x2: splitX,
        y2: tpy + 9
      },
      style: {
        lineWidth: 1,
        stroke: color
      }
    });
    dragTpGroupEl.childAt(4).attr({
      style: {
        text: tp,
        fill: color,
        fontSize: 14
      },
      x: splitX + descProfitPadding,
      y: tpy - 6
    });
    var startY = Math.min(tpy, this.y);
    dragTpGroupEl.childAt(5).attr({
      style: {
        fill: bgColor
      },
      shape: {
        x: this.rect.x,
        y: startY,
        width: this.rect.width,
        height: Math.abs(tpy - this.y)
      },
      silent: true
    });
    var orderColor = order.direction === 'long' ? longColor : shortColor;
    dragTpGroupEl.childAt(6).attr({
      shape: {
        x1: this.circleX,
        y1: tpy,
        x2: this.circleX,
        y2: this.y
      },
      style: {
        lineWidth: 1,
        stroke: orderColor
      }
    });
    dragTpGroupEl.childAt(7).attr({
      style: {
        fill: orderColor
      },
      shape: {
        cx: this.circleX,
        cy: tpy,
        r: circleR
      }
    });
    var offset = this.yAxisModel.model.get('offset') || 0;
    var x = this.yAxisModel.position === 'right' ? rect.x + rect.width + offset : rect.x - offset;
    dragTpGroupEl.childAt(8).attr({
      style: {
        x: x,
        y: tpy - 9,
        text: this.dragPrice.toFixed(order.precision),
        fill: "#fff",
        backgroundColor: "rgb(54,58,69)",
        padding: [4, 6, 2, 8]
      }
    });
  };
  PlaybackOrderView.prototype.removeTpDrag = function () {
    if (!this.dragTpGroupEl) {
      return;
    }
    this.group.remove(this.dragTpGroupEl);
    this.dragTpGroupEl = null;
  };
  PlaybackOrderView.prototype.renderStopProfit = function (type) {
    var _this = this;
    var yAxisModel = this.yAxisModel;
    var playbackOrderModel = this.playbackOrderModel;
    var isStopProfit = type === 'profit';
    var order = playbackOrderModel.get('order');
    var stopPrice = isStopProfit ? order.stopProfit : order.stopLoss;
    var zlevel = playbackOrderModel.get('zlevel');
    var profitY = yAxisModel.toGlobalCoord(yAxisModel.dataToCoord(stopPrice)) + 0.5;
    var rect = this.rect;
    var circleX = this.circleX;
    var circleMargin = this.circleMargin;
    var color = isStopProfit ? stopProfit : stopLoss;
    var bgColor = isStopProfit ? stopProfitBg : stopLossBg;
    var groupKey = isStopProfit ? 'stopProfitGroup' : 'stopLossGroup';
    var elsKey = isStopProfit ? 'stopProfitEls' : 'stopLossEls';
    if (!this[groupKey]) {
      var stopGroup = new graphic.Group();
      var stopJoinLineEl_1 = new graphic.Line({
        ignore: true,
        zlevel: zlevel
      });
      var stopLineEl_1 = new graphic.Line({
        zlevel: zlevel,
        cursor: 'ns-resize'
      });
      var stopDescEl_1 = new graphic.Group();
      var stopDescRect = new graphic.Rect({
        zlevel: zlevel,
        cursor: 'ns-resize'
      });
      var stopSizeRect = new graphic.Rect({
        zlevel: zlevel,
        cursor: 'ns-resize'
      });
      var stopSizText = new graphic.Text({
        zlevel: zlevel,
        cursor: 'ns-resize'
      });
      var stopPlaybackIcon = createSymbol(backIcon, 0, -4, 8, 8, "#ffffff");
      stopPlaybackIcon.zlevel = zlevel;
      var stopProfitText = new graphic.Text({
        zlevel: zlevel,
        cursor: 'ns-resize'
      });
      var stopCloseRect_1 = new graphic.Rect({
        invisible: true,
        zlevel: zlevel
      });
      var stopCloseLine = new graphic.Line({
        zlevel: zlevel
      });
      var stopCloseIcon = createSymbol(closeIcon, 0, -4, 8, 8, color);
      ;
      stopCloseIcon.zlevel = zlevel;
      var dragBgEl_1 = new graphic.Rect({
        ignore: true,
        zlevel: zlevel
      });
      var stopCircleEl_1 = new graphic.Circle({
        invisible: true,
        zlevel: zlevel,
        z: 10
      });
      stopDescEl_1.add(stopDescRect);
      stopDescEl_1.add(stopSizeRect);
      stopDescEl_1.add(stopSizText);
      stopDescEl_1.add(stopPlaybackIcon);
      stopDescEl_1.add(stopProfitText);
      var stopCloseEl_1 = new graphic.Group();
      stopCloseEl_1.add(stopCloseRect_1);
      stopCloseEl_1.add(stopCloseLine);
      stopCloseEl_1.add(stopCloseIcon);
      stopDescEl_1.add(stopCloseEl_1);
      stopCloseEl_1.onmouseover = function () {
        stopCloseRect_1.attr({
          style: {
            fill: bgColor
          },
          invisible: false
        });
        _this.clearTimer();
        _this._timer = setTimeout(function () {
          var _a = stopCloseRect_1.transformCoordToGlobal(stopCloseRect_1.shape.x + stopCloseRect_1.shape.width / 2, stopCloseRect_1.shape.y),
            x = _a[0],
            y = _a[1];
          _this.api.dispatchAction({
            type: 'showTipText',
            escapeConnect: true,
            text: "取消订单",
            x: x,
            y: y
          });
          _this.mousemoveTPSL = true;
        }, 500);
      };
      stopCloseEl_1.onmouseout = function () {
        _this.clearTimer();
        _this.api.dispatchAction({
          type: 'hideTipText',
          escapeConnect: true
        });
        _this.mousemoveTPSL = false;
        stopCloseRect_1.attr('invisible', true);
      };
      stopCloseEl_1.onclick = function () {
        _this.sendMessage(isStopProfit ? 'deleteStopProfit' : 'deleteStopLoss');
      };
      stopGroup.add(stopJoinLineEl_1);
      stopGroup.add(stopLineEl_1);
      stopGroup.add(stopDescEl_1);
      stopGroup.add(stopCircleEl_1);
      stopGroup.add(dragBgEl_1);
      stopGroup.onmousedown = function () {
        _this.dragGroupType = type;
        var pointer = _this.ecModel.getComponent('axisPointer', 0);
        if (pointer) {
          pointer.option.updatePointDisable = true;
        }
      };
      this[groupKey] = stopGroup;
      this[elsKey] = {
        stopDescEl: stopDescEl_1,
        stopCloseEl: stopCloseEl_1,
        stopLineEl: stopLineEl_1,
        stopCircleEl: stopCircleEl_1,
        stopJoinLineEl: stopJoinLineEl_1,
        dragBgEl: dragBgEl_1
      };
      this.group.add(stopGroup);
    }
    var _a = this[elsKey],
      stopDescEl = _a.stopDescEl,
      stopCloseEl = _a.stopCloseEl,
      stopLineEl = _a.stopLineEl,
      stopCircleEl = _a.stopCircleEl,
      stopJoinLineEl = _a.stopJoinLineEl,
      dragBgEl = _a.dragBgEl;
    var sizeWidth = getTextWidth(order.size + '');
    var sizeRectWidth = sizeWidth + descRectPadding * 3 + 10;
    var isLong = order.direction === 'long';
    var profit = ((isLong ? stopPrice - order.price : order.price - stopPrice) * order.size).toFixed(order.precision) + " " + order.currency;
    var profitWidth = getTextWidth(profit) + descProfitPadding * 2;
    var closeWidth = descClosePadding * 2 + 10;
    var descRectWidth = sizeRectWidth + profitWidth + closeWidth;
    stopDescEl.attr({
      x: circleX - circleMargin - descRectWidth,
      y: profitY
    });
    stopLineEl.attr({
      shape: {
        x1: rect.x,
        y1: profitY,
        x2: rect.x + rect.width,
        y2: profitY
      },
      style: {
        lineWidth: 1,
        stroke: color
      }
    });
    stopDescEl.childAt(0).attr({
      shape: {
        y: -9,
        width: descRectWidth,
        height: 18,
        r: 10
      },
      style: {
        fill: this.backgroundColor,
        stroke: color
      }
    });
    stopDescEl.childAt(1).attr({
      shape: {
        y: -9,
        width: sizeRectWidth,
        height: 18,
        r: [10, 0, 0, 10]
      },
      style: {
        fill: color
      }
    });
    stopDescEl.childAt(2).attr({
      style: {
        text: "" + (isLong ? '' : '-') + order.size,
        fill: '#ffffff',
        fontSize: 14
      },
      x: descRectPadding,
      y: -6
    });
    stopDescEl.childAt(3).attr('x', sizeWidth + descRectPadding * 2);
    stopDescEl.childAt(4).attr({
      style: {
        text: profit,
        fill: color,
        fontSize: 14
      },
      x: sizeRectWidth + descProfitPadding,
      y: -6
    });
    stopCloseEl.childAt(0).attr({
      shape: {
        y: -9,
        width: closeWidth,
        height: 18,
        r: [0, 10, 10, 0]
      },
      x: sizeRectWidth + profitWidth
    });
    stopCloseEl.childAt(1).attr({
      style: {
        stroke: color
      },
      shape: {
        y1: -9,
        y2: 9
      },
      x: Math.floor(sizeRectWidth + profitWidth) + 0.5
    });
    stopCloseEl.childAt(2).attr('x', sizeRectWidth + profitWidth + descClosePadding);
    stopCircleEl.attr({
      style: {
        fill: this.selected ? color : this.backgroundColor,
        stroke: color
      },
      shape: {
        cx: circleX,
        cy: profitY,
        r: this.selected ? circleR - 1 : circleR
      },
      invisible: !(this.selected || this.mouseSelected)
    });
    var orderColor = order.direction === 'long' ? longColor : shortColor;
    stopJoinLineEl.attr({
      shape: {
        x1: this.circleX,
        y1: profitY,
        x2: this.circleX,
        y2: this.y
      },
      style: {
        lineWidth: 1,
        stroke: orderColor
      },
      ignore: !(this.selected || this.mouseSelected)
    });
    if (this.dragGroupType === type) {
      dragBgEl.attr({
        ignore: false,
        silent: true,
        style: {
          fill: bgColor
        },
        shape: {
          x: this.rect.x,
          y: Math.min(profitY, this.y),
          width: this.rect.width,
          height: Math.abs(profitY - this.y)
        }
      });
    } else {
      dragBgEl.ignore = true;
    }
  };
  PlaybackOrderView.prototype.removeStop = function (type) {
    if (type === 'profit') {
      if (!this.stopProfitGroup) {
        return;
      }
      this.group.remove(this.stopProfitGroup);
      this.stopProfitGroup = null;
    } else {
      if (!this.stopLossGroup) {
        return;
      }
      this.group.remove(this.stopLossGroup);
      this.stopLossGroup = null;
    }
    if (this.mousemoveTPSL) {
      this.api.dispatchAction({
        type: 'hideTipText',
        escapeConnect: true
      });
      this.mousemoveTPSL = false;
    }
  };
  PlaybackOrderView.prototype.renderLabels = function () {
    var rect = this.rect;
    var playbackOrderModel = this.playbackOrderModel;
    var order = playbackOrderModel.get('order');
    var offset = this.yAxisModel.model.get('offset') || 0;
    var x = this.yAxisModel.position === 'right' ? rect.x + rect.width + offset : rect.x - offset;
    var zlevel = playbackOrderModel.get('zlevel');
    var group = this.group;
    if (!this.orderLabelEl) {
      this.orderLabelEl = new graphic.Text({
        zlevel: zlevel,
        z: 100
      });
      group.add(this.orderLabelEl);
    }
    var precision = order.precision;
    var isLong = order.direction === 'long';
    var orderColor = isLong ? longColor : shortColor;
    var orderPriceText = order.price.toFixed(precision);
    var padding = [4, 6, 2, 8];
    var borderPadding = [3, 5, 1, 7];
    var orderY = this.y - 9;
    this.orderLabelEl.attr({
      style: {
        x: x,
        text: orderPriceText,
        fill: "#fff",
        backgroundColor: orderColor,
        padding: padding
      },
      y: orderY,
      z: 100,
      zlevel: 2
    });
    var textElList = [this.orderLabelEl];
    if (this.stopProfitGroup) {
      if (!this.stopProfitLabelEl) {
        this.stopProfitLabelEl = new graphic.Text({
          zlevel: zlevel,
          z: 100
        });
        group.add(this.stopProfitLabelEl);
      }
      var profitY = this.yAxisModel.toGlobalCoord(this.yAxisModel.dataToCoord(order.stopProfit));
      this.stopProfitLabelEl.attr({
        style: {
          x: x,
          text: order.stopProfit.toFixed(precision),
          fill: orderColor,
          padding: borderPadding,
          borderColor: orderColor,
          borderWidth: 1,
          backgroundColor: this.backgroundColor
        },
        y: profitY - 9,
        z: 100,
        zlevel: 2
      });
      textElList.push(this.stopProfitLabelEl);
    } else if (this.stopProfitLabelEl) {
      group.remove(this.stopProfitLabelEl);
      this.stopProfitLabelEl = null;
    }
    if (this.stopLossGroup) {
      if (!this.stopLossLabelEl) {
        this.stopLossLabelEl = new graphic.Text({
          zlevel: zlevel,
          z: 100
        });
        group.add(this.stopLossLabelEl);
      }
      var stopLossY = this.yAxisModel.toGlobalCoord(this.yAxisModel.dataToCoord(order.stopLoss));
      this.stopLossLabelEl.attr({
        style: {
          x: x,
          text: order.stopLoss.toFixed(precision),
          fill: orderColor,
          padding: borderPadding,
          borderColor: orderColor,
          borderWidth: 1,
          backgroundColor: this.backgroundColor
        },
        y: stopLossY - 9,
        z: 100,
        zlevel: 2
      });
      textElList.push(this.stopLossLabelEl);
    } else if (this.stopLossLabelEl) {
      group.remove(this.stopLossLabelEl);
      this.stopLossLabelEl = null;
    }
    this.labels = textElList;
    var markLabelModal = this.ecModel.getComponent('markLabel');
    if (markLabelModal) {
      var isAvoidOverlap = markLabelModal.get('isAvoidOverlap');
      if (!isAvoidOverlap) {
        return;
      }
      var view = this.api.getComponentView(markLabelModal.__viewId);
      if (!view) {
        return;
      }
      view.avoidOverlap(true, this.ecModel, this.api);
    }
    // textElList.sort((a, b) => a.style.y - b.style.y);
    // let lastY = textElList[0].style.y;
    // for (let index = 1; index < textElList.length; index++) {
    //     const element = textElList[index];
    //     if (lastY + 18 > element.style.y) {
    //         element.style.y = lastY + 18;
    //     }  
    //     lastY =  element.style.y;
    // }
  };

  PlaybackOrderView.prototype.clearTimer = function () {
    if (this._timer) {
      clearTimeout(this._timer);
    }
  };
  PlaybackOrderView.prototype.clear = function () {
    if (!this.orderGroup) {
      return;
    }
    this.clearTimer();
    if (this.mouseSelected || this.selected) {
      this.api.dispatchAction({
        type: 'hideTipText',
        escapeConnect: true
      });
    }
    this.orderLabelEl = null;
    this.stopProfitLabelEl = null;
    this.stopLossLabelEl = null;
    this.orderGroup = null;
    this.stopLossGroup = null;
    this.stopLossEls = null;
    this.stopProfitGroup = null;
    this.stopProfitEls = null;
    this.dragTpGroupEl = null;
    this.orderGroupEls = null;
    this.yAxisModel = null;
    this.playbackOrderModel = null;
    this.group.off('mouseover', this.orderMouseover);
    this.group.off('mouseout', this.orderMouseout);
    this.group.off('mousedown', this.orderMousedown);
    this.group.off('click', this.orderClick);
    var zr = this.api.getZr();
    zr.off('mousedown', this.zrMouseDown);
    zr.off('mousemove', this.zrMouseMove);
    zr.off('mouseup', this.zrMouseUp);
    this.group.removeAll();
    zr.refresh();
    this.eventMount = false;
    this.mouseSelected = false;
    this.selected = false;
    this.labels = null;
  };
  PlaybackOrderView.prototype.dispose = function (ecModel, api) {
    this.clear();
  };
  PlaybackOrderView.type = 'playbackOrder';
  return PlaybackOrderView;
}(ComponentView);
export { PlaybackOrderView };