<template>
  <div class="div" style="position: relative">
    <div class="percentloop" :class="[{'active-0':index === 0},{'active-1':index === 1},{'active-2':index === 2},{'active-3':index === 3}]" ref="percentloop">
      <div class="circle-left">
        <div ref="leftcontent"></div>
      </div>
      <div class="circle-right">
        <div ref="rightcontent"></div>
      </div>
      <div class="number">
        {{ percent }} %
      </div>
    </div>
    <div class="percentloop1"></div>
    <div class="name">
      {{data.name}}
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      percentNum: {
        type: [String, Number],
        default: 0
      },
      data: {
        type: Object,
        default: () => ({
          index: 0,
          name: '测试',
          value: 0
        })
      },
      speed: { // 建议取值为0-3
        type: [String, Number],
        default: 1
      },
      index: { // 查看是哪个图标
        type: Number,
        default: 0
      }
    },
    data () {
      return {
        percent: 0,
        initDeg: 0,
        timeId: null,
        animationing: false
      }
    },
    methods: {
      transformToDeg (percent) {
        let deg = 0
        if (percent >= 100) {
          deg = 360
        } else {
          deg = parseInt(360 * percent / 100)
        }
        return deg
      },
      transformToPercent (deg) {
        let percent = 0
        if (deg >= 360) {
          percent = 100
        } else {
          percent = parseInt(100 * deg / 360)
        }
        return percent
      },
      rotateLeft (deg) { // 大于180时，执行的动画
        this.$refs.leftcontent.style.transform = 'rotate(' + (deg - 180) + 'deg)'
      },
      rotateRight (deg) { // 小于180时，执行的动画
        this.$refs.rightcontent.style.transform = 'rotate(' + deg + 'deg)'
      },
      goRotate (deg) {
        this.animationing = true
        this.timeId = setInterval(() => {
          if (deg > this.initDeg) { // 递增动画
            this.initDeg += Number(this.speed)
            if (this.initDeg >= 180) {
              this.rotateLeft(this.initDeg)
              this.rotateRight(180) // 为避免先后两次传入的百分比转换为度数后的值不为步距的整数，可能出现的左右转动不到位的状况。
            } else {
              this.rotateRight(this.initDeg)
            }
          } else { // 递减动画
            this.initDeg -= Number(this.speed)
            if (this.initDeg >= 180) {
              this.rotateLeft(this.initDeg)
            } else {
              this.rotateLeft(180) // 为避免先后两次传入的百分比转换为度数后的值不为步距的整数，可能出现的左右转动不到位的状况。
              this.rotateRight(this.initDeg)
            }
          }
          this.percent = this.transformToPercent(this.initDeg) // 百分比数据滚动动画
          const remainer = Number(deg) - this.initDeg
          if (Math.abs(remainer) < this.speed) {
            this.initDeg += remainer
            if (this.initDeg > 180) {
              this.rotateLeft(deg)
            } else {
              this.rotateRight(deg)
            }
            this.animationFinished()
          }
        }, 10)
      },
      animationFinished () {
        this.percent = this.percentNum // 百分比数据滚动动画
        this.animationing = false
        clearInterval(this.timeId)
        this.$emit('animationFinished') // 动画完成的回调
      }
    },
    created () {
      this.goRotate(this.transformToDeg(this.percentNum))
    },
    mounted () {
    },
    watch: {
      'percentNum': function (val) {
        if (this.animationing) return
        this.goRotate(this.transformToDeg(val))
      }
    }
  }
</script>

<style scoped lang="scss">
  .div{
    display: flex;
    justify-content: center;
    justify-items: center;
    width: 80%;
    margin: auto 0;
    flex-direction: column;
  }
  .percentloop1 {
    position: absolute;
    width: 110%;
    height: 110%;
    border-radius: 50%;
    border: solid .1rem #053956;
    padding: 2rem;
    box-sizing: border-box;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .percentloop {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    padding:2rem;
    /*border: solid .2rem #053956;*/
    /*box-sizing: border-box;*/
    .circle-left, .circle-right {
      position: absolute;
      top: 0;
      left: 0;
      width: 50%;
      height: 100%;
      background-color: red;
      overflow: hidden;
      &>div {
        width: 100%;
        height: 100%;
        background-color: #8a8a8a;
        transform-origin: right center;
        /*transition: all .5s linear;*/
      }
    }
    .circle-right {
      left: 50%;
      &>div {
        transform-origin: left center;
      }
    }
    .number {
      position: absolute;
      top: 9%;
      bottom: 9%;
      left: 9%;
      right: 9%;
      background-color: #000B2A;
      border-radius: 50%;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
    }
  }

  .percentloop.active-0{
    .circle-left, .circle-right {
      background-color: #42f8ff;
    }
  }
  .percentloop.active-1{
    .circle-left, .circle-right {
      background-color: #fff000;
    }
  }
  .percentloop.active-2{
    .circle-left, .circle-right {
      background-color: #ff3300;
    }
  }
  .percentloop.active-3{
    .circle-left, .circle-right {
      background-color: #002363;
    }
  }
  .name{
    position: absolute;
    bottom: -2rem;
    left: 50%;
    transform: translateX(-50%);
    color: white;
  }
</style>
