<template>
  <view
    :class="[
      size,
      radius ? 'radius' : '',
      round ? 'round' : '',
      striped ? 'striped' : '',
      active && striped ? 'active' : ''
    ]"
    class="cu-progress"
  >
    <view :class="[color ? 'bg-' + color : '']" :style="{ width: displayPercent + '%' }">
      {{ noText ? '' : displayPercent + '%' }}
    </view>
  </view>
</template>

<script>
export default {
  name: 'l-progress',

  props: {
    percent: {},
    noText: {},
    color: {},
    radius: {},
    round: {},
    size: { default: 'df' },
    striped: {},
    active: {}
  },

  computed: {
    displayPercent() {
      return Number(this.percent) || 0
    }
  }
}
</script>
