<template>
  <div :style="styles" class="uif-circle">
    <svg v-if="visible" viewBox="0 0 100 100">
      <path :d="pathString" :stroke="trailColor" :stroke-width="strokeWidth" :fill-opacity="0" />
      <path :d="pathString" :stroke-linecap="strokeLinecap" :stroke="strokeColor" :stroke-width="strokeWidth" fill-opacity="0" :style="pathStyle" />
    </svg>
    <div class="uif-circle-inner">
      <slot></slot>
    </div>
  </div>
</template>
<script>
import {oneOf} from '@uif/core/lib/utils/assist'

export default {
  name: 'u-circle',
  props: {
    // 进度 0~1
    rate: {
      type: Number,
      default: 0
    },
    size: {
      type: Number,
      default: 50
    },
    strokeWidth: {
      type: Number,
      default: 6
    },
    strokeColor: {
      type: String,
      default: '#8288ab'
    },
    strokeLinecap: {
      validator (value) {
        return oneOf(value, ['square', 'round'])
      },
      default: 'round'
    },
    trailColor: {
      type: String,
      default: '#eeeeee'
    },
    visible: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
    }
  },
  computed: {
    styles () {
      return {
        width: this.size + 'px',
        height: this.size + 'px'
      }
    },
    radius () {
      return 50 - this.strokeWidth / 2
    },
    len () {
      return Math.PI * 2 * this.radius
    },
    pathString () {
      return 'M 50,50 m 0,-' + this.radius +
              'a ' + this.radius + ',' + this.radius + ' 0 1 1 0,' + 2 * this.radius +
              'a ' + this.radius + ',' + this.radius + ' 0 1 1 0,-' + 2 * this.radius
    },
    pathStyle () {
      return {
        'stroke-dasharray': this.len + 'px ' + this.len + 'px',
        'stroke-dashoffset': (1 - this.rate) * this.len + 'px',
        transition: 'stroke-dashoffset 0.6s ease 0s, stroke 0.6s ease'
      }
    }
  },
  methods: {
  }
}
</script>
