<template>
  <div :style="styles" class="n-circle">
    <svg 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="n-circle-content inherit flex-center">
      <slot></slot>
    </div>
  </div>
</template>
<script>
import {prop} from '@uif/next/lib/utils/tools'

export default {
  name: 'n-circle',
  props: {
    // 进度 0~1
    value: prop.number(),
    // 进度 0~1 (待废弃)
    rate: prop.number(),
    // 大小
    size: prop.number(50),
    // 进度环宽度
    strokeWidth: prop.number(6),
    // 进度环颜色
    strokeColor: prop.string('#919293'),
    // 进度环圆角
    strokeLinecap: prop.inArray(['square', 'round'], 'round'),
    // 进度环背景
    trailColor: prop.string('#E2E6EC')
  },
  computed: {
    styles ({size}) {
      return {
        width: size + 'px',
        height: size + 'px'
      }
    },
    radius ({strokeWidth}) {
      return 50 - strokeWidth / 2
    },
    len ({radius}) {
      return Math.PI * 2 * radius
    },
    pathString ({radius}) {
      return 'M 50,50 m 0,-' + radius +
              'a ' + radius + ',' + radius + ' 0 1 1 0,' + 2 * radius +
              'a ' + radius + ',' + radius + ' 0 1 1 0,-' + 2 * radius
    },
    pathStyle ({len, value, rate}) {
      return {
        'stroke-dasharray': len + 'px ' + len + 'px',
        'stroke-dashoffset': (1 - (value || rate)) * len + 'px',
        transition: 'stroke-dashoffset 0.6s ease 0s, stroke 0.6s ease'
      }
    }
  }
}
</script>
