<template>
  <div id="cycleWrap">
    <div class="leftWrap">
      <div class="left" :style="{ transform: `rotate(${num1}deg)` }"></div>
    </div>
    <div class="rightWrap">
      <div class="right" :style="{ transform: `rotate(${num2}deg)` }"></div>
    </div>
    <div class="cover"></div>
  </div>
</template>
<script>
export default {
  name: 'cycleWrap',
  data() {
    return {
      // num1: 0,
      // num2: 0,
    }
  },
  props: {
    progress: [Number, String]
  },
  computed: {
    degree() {
      return this.progress * 3.6
    },
    num2() {
      return this.degree < 180 ? this.degree : 180;
    },
    num1() {
      return this.degree < 180 ? 0 : this.degree - 180;
    },
  },
  // watch: {
  //   progress() {
  //     let degree = this.progress * 3.6;
  //     if(degree < 180) {
  //       this.num1 = degree;
  //       this.num2 = 0;
  //     } else {
  //       this.num1 = 180;
  //       this.num2 = degree - 180;
  //     }
  //   }
  // }
}
</script>
<style lang="scss" scoped>
#cycleWrap {
  display: flex;
  width: 26px;
  height: 26px;
  position: relative;
  border-radius: 51%;
  background-color: #F5222D;
  .leftWrap,
  .rightWrap {
    width: 13px;
    height: 26px;
    position: absolute;
    top: 0;
    overflow: hidden;
  }
  .leftWrap {
    left: 0;
  }
  .rightWrap {
    right: 0;
  }
  .left {
    width: 13px;
    height: 26px;
    border-radius: 12px 0 0 12px;
    background-color: #ffe1e2;
    transform-origin: right center;
  }
  .right {
    width: 13px;
    height: 26px;
    border-radius: 0 12px 12px 0;
    background-color: #fde1e2;
    transform-origin: left center;
  }
  .cover {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 18px;
    height: 18px;
    background-color: #fff;
    border-radius: 50%;
  }
}
</style>