import create from "../utils/create";
import { addUnit } from "../utils/format/unit";
export default create({
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

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

    return _c('div', {
      class: _vm.b(),
      style: _vm.wrapperStyle
    }, [_c('span', {
      class: _vm.b('portion'),
      style: _vm.portionStyle
    }, [_vm.showPivot && _vm.text ? _c('span', {
      ref: "pivot",
      class: _vm.b('pivot'),
      style: _vm.pivotStyle
    }, [_vm._v("\n      " + _vm._s(_vm.text) + "\n    ")]) : _vm._e()])]);
  },
  name: "progress",
  props: {
    color: String,
    inactive: Boolean,
    pivotText: String,
    textColor: String,
    pivotColor: String,
    trackColor: String,
    strokeWidth: [Number, String],
    percentage: {
      type: [Number, String],
      required: true,
      validator: function validator(value) {
        return value >= 0 && value <= 100;
      }
    },
    showPivot: {
      type: Boolean,
      default: true
    }
  },
  data: function data() {
    return {
      pivotWidth: 0,
      progressWidth: 0
    };
  },
  mounted: function mounted() {
    this.resize();
  },
  watch: {
    showPivot: "resize",
    pivotText: "resize"
  },
  methods: {
    // @exposed-api
    resize: function resize() {
      var _this = this;

      this.$nextTick(function () {
        _this.progressWidth = _this.$el.offsetWidth;
        _this.pivotWidth = _this.$refs.pivot ? _this.$refs.pivot.offsetWidth : 0;
      });
    }
  },
  computed: {
    wrapperStyle: function wrapperStyle() {
      return {
        background: this.trackColor,
        height: addUnit(this.strokeWidth)
      };
    },
    portionStyle: function portionStyle() {
      var background = this.inactive ? "#cacaca" : this.color;
      var percentage = this.percentage;
      return {
        background: background,
        width: this.progressWidth * percentage / 100 + "px"
      };
    },
    pivotStyle: function pivotStyle() {
      var background = this.inactive ? "#cacaca" : this.color;
      var percentage = this.percentage;
      return {
        color: this.textColor,
        left: (this.progressWidth - this.pivotWidth) * percentage / 100 + "px",
        background: this.pivotColor || background
      };
    },
    text: function text() {
      var pivotText = this.pivotText,
          percentage = this.percentage;
      return pivotText || percentage + "%";
    }
  }
});