"use strict";

function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _Canvas2 = _interopRequireDefault(require("./Canvas"));
var _getIconConfig = require("../_util/getIconConfig");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
var _default = exports["default"] = /*#__PURE__*/function (_Canvas) {
  _inherits(_default, _Canvas);
  var _super = _createSuper(_default);
  function _default(options) {
    var _this;
    _classCallCheck(this, _default);
    _this = _super.call(this);
    _this.options = options || {};
    _this.options.color = (0, _getIconConfig.getColor)(_this.options);
    _this.settings = {
      height: options.hideFooter ? 44 : 60,
      // 整体高度
      width: 44,
      // 整体高度
      iconWrapSize: 42,
      clipAngle: 15,
      footerOuterCircle: {
        width: 10,
        // 宽度
        height: 6 // 高度
      },

      footerInnerCircle: {
        width: 8,
        // 宽度
        height: 4 // 高度
      }
    };

    // 初始化框高
    _this.setWidth(_this.settings.width);
    _this.setHeight(_this.settings.height);

    // 创建图标
    _this.createIcon();
    return _this;
  }

  // 创建图标
  _createClass(_default, [{
    key: "createIcon",
    value: function createIcon() {
      var _this$options = this.options,
        canvasIcon = _this$options.canvasIcon,
        text = _this$options.text,
        hideFooter = _this$options.hideFooter,
        info = _this$options.info,
        status = _this$options.status;
      if (!hideFooter) {
        // 绘制底座外侧椭圆
        this.drawFooterOuterCircle();

        // 绘制底座内侧椭圆
        // this.drawFooterInnerCircle();

        // 绘制小三角
        this.drawPillar(this.settings.iconWrapSize + 1);
      }

      // 绘制信息框
      if (info) {
        this.drawInfo();
      }

      // 绘制图标外侧圆

      // // 绘制图标内侧侧
      this.drawIconInnerWrap();
      this.drawIconOuterWrap();
      if (canvasIcon) {
        this.drawCanvasIcon();
      }
      // this.drawIconInnerWrap2();

      // 绘制文本
      if (text) {
        this.drawCanvasText();
      }
      // 绘制图标

      if (status) {
        this.drawStatusIcon(status, {
          width: 32,
          height: 32
        });
      }
    }

    // 绘制信息框
  }, {
    key: "drawInfo",
    value: function drawInfo() {
      var _this$options2 = this.options,
        info = _this$options2.info,
        color = _this$options2.color;
      var iconWrapSize = this.settings.iconWrapSize;
      var width = this.getCanvasWidth(info) + iconWrapSize / 2 + 4;
      var blurSize = (this.settings.width - iconWrapSize) / 2;
      var x = iconWrapSize / 2 + blurSize;
      var y = iconWrapSize / 2 + blurSize;
      var radius = iconWrapSize;

      // 改变 canvas 大小
      this.resize(x + width + radius / 2);
      this.ctx.save();

      // 开始绘制路径
      this.ctx.beginPath();

      // 绘制左侧半圆
      this.ctx.arc(x, y, iconWrapSize / 2, Math.PI / 180 * 90, Math.PI / 180 * 270);
      this.ctx.moveTo(x, y - radius / 2);
      this.ctx.lineTo(x + width, y - radius / 2);

      // 绘制右侧半圆
      this.ctx.arc(x + width, y, radius / 2, Math.PI / 180 * 270, Math.PI / 180 * 90);
      this.ctx.moveTo(x + width, y + radius / 2);
      this.ctx.lineTo(x, y + radius / 2);
      this.ctx.lineTo(x, y - radius / 2);

      // 填充图形
      var grd1 = this.ctx.createLinearGradient(x - radius / 2, y - radius / 2, x + width + radius / 2, y - radius / 2);
      grd1.addColorStop(0.4, this.transformRgb(color, 1));
      grd1.addColorStop(1, this.transformRgb(color, 0.7));
      this.ctx.fillStyle = grd1;
      this.ctx.fill();

      // 绘制文本
      var textHeight = iconWrapSize + 2;
      var textX = iconWrapSize + 4;
      this.renderText(this.ctx, textHeight, info, textX, '#FFF');
    }

    // 绘制文本
  }, {
    key: "drawCanvasText",
    value: function drawCanvasText() {
      var _this$options3 = this.options,
        text = _this$options3.text,
        _this$options3$fontSi = _this$options3.fontSize,
        fontSize = _this$options3$fontSi === void 0 ? 14 : _this$options3$fontSi;
      var ctx = this.ctx;
      var _ctx$measureText = ctx.measureText(text),
        width = _ctx$measureText.width,
        actualBoundingBoxAscent = _ctx$measureText.actualBoundingBoxAscent,
        actualBoundingBoxDescent = _ctx$measureText.actualBoundingBoxDescent;
      var actualHeight = actualBoundingBoxAscent + actualBoundingBoxDescent;
      var x = (this.settings.width - width * 1.5) / 2;
      var y = (this.settings.width + actualHeight) / 2;
      ctx.font = fontSize + 'px Arial';
      ctx.fillStyle = '#FFF';
      ctx.fillText(text, x, y);
    }

    // 绘制图标外侧
  }, {
    key: "drawIconOuterWrap",
    value: function drawIconOuterWrap() {
      var color = this.options.color;
      var iconWrapSize = this.settings.iconWrapSize;
      var blurSize = (this.settings.width - iconWrapSize) / 2;
      var x = iconWrapSize / 2 + blurSize;
      var y = iconWrapSize / 2 + blurSize;
      var radius = iconWrapSize - 2;
      this.ctx.strokeStyle = color;
      this.ctx.lineWidth = 2;

      // 开始绘制路径
      this.ctx.beginPath();

      // 绘制圆
      this.ctx.arc(x, y, radius / 2, 0, 2 * Math.PI);
      this.ctx.stroke();
      this.ctx.restore();
    }

    // 绘制图标内侧侧
  }, {
    key: "drawIconInnerWrap",
    value: function drawIconInnerWrap() {
      var iconWrapSize = this.settings.iconWrapSize;
      var iconInnerWrapSize = iconWrapSize - 2;
      var blurSize = (this.settings.width - iconWrapSize) / 2;
      var x = iconWrapSize / 2 + blurSize;
      var y = iconWrapSize / 2 + blurSize;
      var radius = iconInnerWrapSize;
      var color = this.options.color;
      var lineWidth = 20; // 边框越大，阴影越清晰
      var shadowBlur = 14; // 模糊级别，越大越模糊，阴影范围也越大。

      this.ctx.save();
      this.ctx.beginPath();

      // 裁剪区(只保留内部阴影部分)
      this.ctx.arc(x, y, radius / 2, 0, 2 * Math.PI);
      this.ctx.fillStyle = '#12131C';
      this.ctx.fill();
      this.ctx.clip();

      // 边框+阴影
      this.ctx.beginPath();
      this.ctx.lineWidth = lineWidth;
      this.ctx.shadowColor = color;
      this.ctx.shadowBlur = shadowBlur;
      // 因线是由坐标位置向两则画的，所以半径加上线宽的一半。同时又因为线有毛边，所以半径再多加1px，处理毛边。
      this.ctx.arc(x, y, radius / 2 + lineWidth / 2 + 1, 0, 2 * Math.PI);
      this.ctx.stroke();

      // 取消阴影
      this.ctx.shadowBlur = 0;
      this.ctx.restore();
    }

    // 绘制图标内侧侧
  }, {
    key: "drawIconInnerWrap2",
    value: function drawIconInnerWrap2() {
      var color = this.options.color;
      var iconWrapSize = this.settings.iconWrapSize;
      var blurSize = (this.settings.width - iconWrapSize) / 2;
      var x = iconWrapSize / 2 + blurSize;
      var y = iconWrapSize / 2 + blurSize;
      var _ref = (0, _getIconConfig.getIcon)(this.options) || {},
        size = _ref.size;
      this.ctx.save();

      // 开始绘制路径
      this.ctx.beginPath();

      // 绘制圆
      this.ctx.arc(x, y, size / 2, 0, 2 * Math.PI);

      // 填充图形
      var grd1 = this.ctx.createLinearGradient(this.settings.width / 2 - size / 2, this.settings.width / 2 - size / 2, this.settings.width / 2 - size / 2, this.settings.width / 2 - size / 2 + size);
      grd1.addColorStop(0.4, this.transformRgb(color, 0));
      grd1.addColorStop(1, this.transformRgb(color, 1));
      this.ctx.fillStyle = grd1;
      this.ctx.fill();
      this.ctx.restore();
    }

    // 绘制图标外侧
  }, {
    key: "drawPillar",
    value: function drawPillar(y) {
      var color = this.options.color;
      var centerX = this.settings.width / 2;
      this.ctx.save();
      this.ctx.translate(centerX - 7, y);
      var g = this.ctx.createLinearGradient(7, 10.30546510592103, 7, 0);
      g.addColorStop(0.5, this.transformRgb(color, 1));
      g.addColorStop(1, this.transformRgb(color, 0));
      this.ctx.fillStyle = g;
      this.ctx.beginPath();
      this.ctx.moveTo(7, 10.9375);
      this.ctx.bezierCurveTo(7, 10.9375, 14, 0, 14, 0);
      this.ctx.bezierCurveTo(14, 0, 6.74822, 3.42623, 6.74822, 3.42623);
      this.ctx.bezierCurveTo(6.74822, 3.42623, 0, 0, 0, 0);
      this.ctx.bezierCurveTo(0, 0, 7, 10.9375, 7, 10.9375);
      this.ctx.bezierCurveTo(7, 10.9375, 7, 10.9375, 7, 10.9375);
      this.ctx.closePath();
      this.ctx.fill();
      this.ctx.restore();
    }

    // 绘制底座内侧椭圆
  }, {
    key: "drawFooterInnerCircle",
    value: function drawFooterInnerCircle() {
      var color = this.options.color;
      var iconWrapSize = this.settings.iconWrapSize;
      var blurSize = (this.settings.width - iconWrapSize) / 2;
      var x = this.settings.iconWrapSize / 2 + blurSize;
      var y = this.settings.height - this.settings.footerInnerCircle.height / 2 - 3.5;
      var w = this.settings.footerInnerCircle.width;
      var h = this.settings.footerInnerCircle.height;
      this.ctx.save();
      this.ctx.beginPath();
      this.ellipse(this.ctx, x, y, w, h);
      this.ctx.save();
      this.ctx.fillStyle = this.transformRgb(color, 0.8);
      this.ctx.fill();
      this.ctx.restore();
    }

    // 绘制底座外侧椭圆
  }, {
    key: "drawFooterOuterCircle",
    value: function drawFooterOuterCircle() {
      var ctx = this.ctx;
      var _this$settings = this.settings,
        height = _this$settings.height,
        width = _this$settings.width;
      var color = this.options.color;
      ctx.save();
      var g = ctx.createRadialGradient(0, 0, 0, 0, 0, 1);
      g.addColorStop(0, this.transformRgb(color, 0.2));
      g.addColorStop(1, color);
      var canvas = document.createElement('canvas');
      canvas.width = 1897;
      canvas.height = 932;
      var ctx1 = canvas.getContext('2d');
      ctx1.fillStyle = g;
      ctx1.save();
      ctx1.strokeStyle = 'rgba(0,0,0,0)';
      ctx1.miterLimit = 4;
      ctx1.font = '';
      ctx1.font = "   15px ''";
      ctx1.beginPath();
      ctx1.moveTo(0, 0);
      ctx1.lineTo(1897, 0);
      ctx1.lineTo(1897, 932);
      ctx1.lineTo(0, 932);
      ctx1.closePath();
      ctx1.clip();
      ctx1.save();
      ctx1.font = "   15px ''";
      ctx1.translate(6, 2);
      ctx1.rotate(1.5707963267948966);
      ctx1.scale(2, 6);
      ctx1.save();
      ctx1.font = "   15px ''";
      ctx1.beginPath();
      ctx1.moveTo(-10000, -10000);
      ctx1.lineTo(20000, -10000);
      ctx1.bezierCurveTo(20000, -10000, 20000, -10000, 20000, -10000);
      ctx1.lineTo(20000, 20000);
      ctx1.bezierCurveTo(20000, 20000, 20000, 20000, 20000, 20000);
      ctx1.lineTo(-10000, 20000);
      ctx1.bezierCurveTo(-10000, 20000, -10000, 20000, -10000, 20000);
      ctx1.lineTo(-10000, -10000);
      ctx1.bezierCurveTo(-10000, -10000, -10000, -10000, -10000, -10000);
      ctx1.closePath();
      ctx1.fill();
      ctx1.stroke();
      ctx1.restore();
      ctx1.restore();
      ctx1.restore();
      var p = ctx1.createPattern(ctx1.canvas, 'no-repeat');
      ctx.fillStyle = p;
      ctx.font = "   15px ''";
      ctx.translate(width / 2 - 12 / 2, height - 4);
      ctx.beginPath();
      ctx.moveTo(12, 2);
      ctx.bezierCurveTo(12, 3.1045694996615874, 9.313708498984761, 4, 6, 4);
      ctx.bezierCurveTo(2.686291501015239, 4, 0, 3.1045694996615874, 0, 2);
      ctx.bezierCurveTo(0, 0.8954305003384129, 2.686291501015239, 0, 6, 0);
      ctx.bezierCurveTo(9.313708498984761, 0, 12, 0.8954305003384129, 12, 2);
      ctx.closePath();
      ctx.fill();
      ctx.restore();
    }

    // 绘制canvas图标
  }, {
    key: "drawCanvasIcon",
    value: function drawCanvasIcon() {
      var _ref2 = (0, _getIconConfig.getIcon)(this.options) || {},
        size = _ref2.size,
        draw = _ref2.draw;
      // 起始位置
      var x = this.settings.width / 2 - size / 2;
      var y = this.settings.width / 2 - size / 2;
      // 保存状态
      this.ctx.save();

      // 偏移中心点
      this.ctx.translate(x, y);
      var g = this.ctx.createLinearGradient(x, y, x, y + size);
      g.addColorStop(0, 'rgba(255, 255, 255, 1)');
      g.addColorStop(1, this.options.color);
      this.ctx.fillStyle = g;
      // 绘制颜色

      // 绘制图标
      draw && draw(this.ctx);

      // 恢复状态
      this.ctx.restore();
    }
  }]);
  return _default;
}(_Canvas2["default"]);
//# sourceMappingURL=CommonIcon2.js.map
