import "../../../src/scss/circle.scss";
import Vue from 'vue';
export default Vue.extend({
  name: 'w-circle',
  props: {
    diameter: {
      type: Number,
      default: 100
    },
    lineWidth: {
      type: Number,
      default: 4
    },
    strokeColor: {
      type: String,
      default: '#3FC7FA'
    },
    trailColor: {
      type: String,
      default: '#D9D9D9'
    },
    fillColor: {
      type: String,
      default: 'transparent'
    },
    speed: {
      type: Number,
      default: 500
    },
    value: {
      type: Number,
      default: 0
    }
  },
  data: function data() {
    return {
      currentValue: this.value
    };
  },
  computed: {
    style: function style() {
      return {
        width: this.diameter + 'px',
        height: this.diameter + 'px'
      };
    },
    pathRadius: function pathRadius() {
      return (this.diameter - this.lineWidth) / 2;
    },
    radius: function radius() {
      return this.diameter / 2;
    },
    pathString: function pathString() {
      return "M ".concat(this.radius, ",").concat(this.radius, " m 0,-").concat(this.pathRadius, "\n      a ").concat(this.pathRadius, ",").concat(this.pathRadius, " 0 1 1 0,").concat(2 * this.pathRadius, "\n      a ").concat(this.pathRadius, ",").concat(this.pathRadius, " 0 1 1 0,-").concat(2 * this.pathRadius);
    },
    len: function len() {
      return Math.PI * 2 * this.pathRadius;
    },
    pathStyle: function pathStyle() {
      return {
        'stroke-dasharray': "".concat(this.len, "px ").concat(this.len, "px"),
        'stroke-dashoffset': "".concat((100 - this.currentValue) / 100 * this.len, "px"),
        transition: "stroke-dashoffset ".concat(this.speed, "ms ease 0s, stroke ").concat(this.speed, "ms ease")
      };
    }
  },
  watch: {
    currentValue: function currentValue(val) {
      this.$emit('input', val);
    },
    value: function value(val) {
      this.currentValue = val;
    }
  },
  render: function render() {
    var h = arguments[0];
    return h("div", {
      "class": "wv-circle",
      "style": this.style
    }, [h("svg", {
      "attrs": {
        "width": this.diameter,
        "height": this.diameter,
        "viewBox": '0 0 ' + this.diameter + ' ' + this.diameter
      }
    }, [h("path", {
      "attrs": {
        "d": this.pathString,
        "stroke": this.trailColor,
        "stroke-width": this.lineWidth,
        "fill": "none"
      }
    }), h("path", {
      "attrs": {
        "d": this.pathString,
        "stroke-linecap": "round",
        "stroke": this.strokeColor,
        "stroke-width": this.lineWidth,
        "fill": this.fillColor
      },
      "style": this.pathStyle
    }), h("text", {
      "class": "wv-circle-content",
      "attrs": {
        "text-anchor": "middle",
        "dominant-baseline": "middle",
        "x": "50%",
        "y": "50%"
      }
    }, [this.$slots.default])])]);
  }
});
//# sourceMappingURL=WCircle.js.map