import { Line, Circle } from '../index'
import '../assets/index.less'

export default {
  data () {
    return {
      percent: 0,
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.increase()
    })
  },
  methods: {
    increase () {
      const percent = this.percent + 1
      if (percent >= 100) {
        clearTimeout(this.tm)
        return
      }
      this.percent = percent
      this.tm = setTimeout(this.increase, 10)
    },
    restart () {
      clearTimeout(this.tm)
      this.percent = 0
      this.$nextTick(() => {
        this.increase()
      })
    },
  },
  render () {
    return (
      <div style='margin: 10px;width: 200px'>
        <Circle strokeWidth='6' percent={this.percent} />
        <Line strokeWidth='4' percent={this.percent} />
        <button onClick={this.restart}>Restart</button>
      </div>
    )
  },
}