<template>
  <div class="uif-progress">
    <div :class="outerCls" :style="outerStyle">
      <div class="uif-progress-inner" :style="innerStyle"></div>
    </div>
  </div>
</template>
<script>
import {px} from '@uif/hq/lib/utils/assist'
import {isArray} from '@uif/hq/lib/utils/array'

export default {
  name: 'u-progress',
  props: {
    percent: {
      type: Number,
      default: 0 // 0 ~ 100
    },
    height: {
      type: [Number, String],
      default: 6
    },
    color: {
      type: [String, Array]
    },
    transparent: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
    }
  },
  computed: {
    outerCls () {
      return [
        `uif-progress-outer`,
        {
          'uif-progress-outer-color': !this.transparent
        }
      ]
    },
    outerStyle () {
      return {
        height: px(this.height),
        borderRadius: px(this.height / 2)
      }
    },
    innerStyle () {
      const style = {width: this.percent + '%'}
      if (isArray(this.color)) {
        style['background-image'] = 'linear-gradient(to right, ' + this.color[0] + ' 0%, ' + this.color[1] + ' 100%)'
      } else if (this.color) {
        style['background-color'] = this.color
      }
      return [
        style,
        this.outerStyle
      ]
    }
  }
}
</script>
