"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.default = void 0;

var _create = _interopRequireDefault(require("../utils/create"));

var _utils = require("../utils");

var _unit = require("../utils/format/unit");

var _raf = require("../utils/dom/raf");

var PERIMETER = 3140;
var uid = 0;

function format(rate) {
  return Math.min(Math.max(rate, 0), 100);
}

function getPath(clockwise, viewBoxSize) {
  var sweepFlag = clockwise ? 1 : 0;
  return "M " + viewBoxSize / 2 + " " + viewBoxSize / 2 + " m 0, -500 a 500, 500 0 1, " + sweepFlag + " 0, 1000 a 500, 500 0 1, " + sweepFlag + " 0, -1000";
}

var _default = (0, _create.default)({
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

    var _c = _vm._self._c || _h;

    return _c('div', {
      class: _vm.b(),
      style: _vm.style
    }, [_c('svg', {
      attrs: {
        "viewBox": "0 0 " + this.viewBoxSize + " " + this.viewBoxSize
      }
    }, [_vm.gradient ? _c('defs', [_c('linearGradient', {
      attrs: {
        "id": _vm.uid,
        "x1": "100%",
        "y1": "0%",
        "x2": "0%",
        "y2": "0%"
      }
    }, _vm._l(_vm.newColor, function (key, index) {
      return _c('stop', {
        key: index,
        attrs: {
          "offset": key,
          "stop-color": _vm.color[key]
        }
      });
    }), 1)], 1) : _vm._e(), _c('path', {
      class: _vm.b('layer'),
      style: _vm.layerStyle,
      attrs: {
        "d": _vm.path
      }
    }), _c('path', {
      class: _vm.b('hover'),
      style: _vm.hoverStyle,
      attrs: {
        "d": _vm.path,
        "stroke": _vm.gradient ? "url(#" + _vm.uid + ")" : _vm.color
      }
    })]), _vm._t("default", [_vm.text ? _c('div', {
      class: _vm.b('text')
    }, [_vm._v(_vm._s(_vm.text))]) : _vm._e()])], 2);
  },
  name: "circle",
  props: {
    text: String,
    size: [Number, String],
    color: [String, Object],
    layerColor: String,
    strokeLinecap: String,
    value: {
      type: Number,
      default: 0
    },
    speed: {
      type: [Number, String],
      default: 0
    },
    fill: {
      type: String,
      default: "none"
    },
    rate: {
      type: [Number, String],
      default: 100
    },
    strokeWidth: {
      type: [Number, String],
      default: 40
    },
    clockwise: {
      type: Boolean,
      default: true
    }
  },
  beforeCreate: function beforeCreate() {
    this.uid = "vm-circle-gradient-" + uid++;
  },
  computed: {
    newColor: function newColor() {
      return Object.keys(this.color).sort(function (a, b) {
        return parseFloat(a) - parseFloat(b);
      });
    },
    style: function style() {
      var size = (0, _unit.addUnit)(this.size);
      return {
        width: size,
        height: size
      };
    },
    path: function path() {
      return getPath(this.clockwise, this.viewBoxSize);
    },
    viewBoxSize: function viewBoxSize() {
      return +this.strokeWidth + 1000;
    },
    layerStyle: function layerStyle() {
      return {
        fill: "" + this.fill,
        stroke: "" + this.layerColor,
        strokeWidth: this.strokeWidth + "px"
      };
    },
    hoverStyle: function hoverStyle() {
      var offset = PERIMETER * this.value / 100;
      return {
        stroke: "" + this.color,
        strokeWidth: +this.strokeWidth + 1 + "px",
        strokeLinecap: this.strokeLinecap,
        strokeDasharray: offset + "px " + PERIMETER + "px"
      };
    },
    gradient: function gradient() {
      return (0, _utils.isObj)(this.color);
    }
  },
  watch: {
    rate: {
      handler: function handler(rate) {
        this.startTime = Date.now();
        this.startRate = this.value;
        this.endRate = format(rate);
        this.increase = this.endRate > this.startRate;
        this.duration = Math.abs((this.startRate - this.endRate) * 1000 / this.speed);

        if (this.speed) {
          (0, _raf.cancel)(this.rafId);
          this.rafId = (0, _raf.raf)(this.animate);
        } else {
          this.$emit("input", this.endRate);
        }
      },
      immediate: true
    }
  },
  methods: {
    animate: function animate() {
      var now = Date.now();
      var progress = Math.min((now - this.startTime) / this.duration, 1);
      var rate = progress * (this.endRate - this.startRate) + this.startRate;
      this.$emit("input", format(parseFloat(rate.toFixed(1))));

      if (this.increase ? rate < this.endRate : rate > this.endRate) {
        this.rafId = (0, _raf.raf)(this.animate);
      }
    }
  }
});

exports.default = _default;