<template>
  <div class="n-progress" :style="trackStyles">
    <div class="n-progress-bar" :style="thumbStyles">
      <slot></slot>
    </div>
  </div>
</template>
<script>
import {prop, isArray} from '@uif/next/lib/utils/tools'

export default {
  name: 'n-progress',
  props: {
    // 进度，取值 0 ~ 1
    value: prop.number(),
    // 进度，取值 0 ~ 100
    percent: prop.number(),
    // 高度
    height: prop.stringNumber(4),
    // 背景色
    background: prop.string(),
    // 填充颜色，可使用数组做渐变
    color: {
      type: [String, Array]
    }
  },
  data () {
    return {
    }
  },
  computed: {
    trackStyles ({height, background}) {
      return {
        height: height + 'px',
        borderRadius: height / 2 + 'px',
        backgroundColor: background
      }
    },
    thumbStyles ({value, percent, height, color}) {
      const styles = {
        width: (value ? value * 100 : percent) + '%',
        borderRadius: height / 2 + 'px'
      }
      if (isArray(color)) {
        styles['background-image'] = 'linear-gradient(to right, ' + color[0] + ' 0%, ' + color[1] + ' 100%)'
      } else if (color) {
        styles['background-color'] = color
      }
      return styles
    }
  }
}
</script>
