<template>
  <el-progress :percentage="percentage" :status="status" />
</template>

<script>
export default {
  props: {
    autoStart: {
      type: Boolean,
      default: () => {
        return true
      }
    }
  },
  data() {
    return {
      percentage: 0,
      status: undefined,
      timer: null
    }
  },
  mounted() {
    if (this.autoStart) {
      this.start()
    }
  },
  methods: {
    success() {
      this.status = 'success'
      this.percentage = 100
      this.stop()
    },
    error() {
      this.status = 'exception'
      this.stop()
    },
    stop() {
      clearTimeout(this.timer)
    },
    start() {
      this.percentage = 0
      this.runHandle()
    },
    runHandle() {
      this.timer = setTimeout(() => {
        if (this.percentage < 99) {
          this.percentage += Math.max(parseInt((100 - this.percentage) * 0.1), 1)
          this.runHandle()
        }
      }, this.percentage * 10)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
