<template>
  <el-progress
    v-bind="trimAttrs($attrs)"
    :type="progressShape"
    :color="backgroundColorByType"
    :text-inside="isValueInside"
    :show-text="hasValue ? true : false"
    :width="progressDiameter"
    :stroke-width="progressStrokeWidth"
    :class="[
      progressType,
      {
        'is-narrow': progressStrokeWidth < 14
      }
    ]"
  >
    <slot />
  </el-progress>
</template>

<script>
import { Progress } from 'element-ui';
export default {
  name: 'JskProgress',
  components: {
    ElProgress: Progress
  },
  inheritAttrs: false,
  props: {
    progressShape: {
      type: String,
      default: 'line'
    },
    progressType: {
      type: String,
      default: ''
    },
    progressBarColor: {
      type: [String, Array],
      default: ''
    },
    progressDiameter: {
      type: Number,
      default: 126
    },
    progressStrokeWidth: {
      type: Number,
      default: 6
    },
    hasValue: {
      type: Boolean,
      default: false
    },
    isValueInside: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    backgroundColorByType: function() {
      if (this.progressBarColor !== '') {
        return this.progressBarColor;
      }
      switch (this.progressType) {
        case 'danger':
          return '#f33b29';
        case 'warning':
          return '#ffc300';
        case 'info':
          return '#a6b4c8';
        case 'success':
          return '#4ec53d';
        default:
          return '#4ec53d';
      }
    }
  },
  methods: {
    trimAttrs: function(attrs) {
      Object.keys(attrs).forEach((key) => {
        let prefixes = ['is-', 'has-', 'progress-'];
        prefixes.forEach((prefix) => {
          if (key.substr(0, prefix.length) === prefix) {
            attrs[key.substr(prefix.length)] = attrs[key];
          }
        })
      })
      return attrs;
    }
  }
}
</script>

<style lang="scss" src="../../theme/progress.scss"></style>
