<template>
  <div class="circle-bar" :style="barStyle">
    <div class="circle-bar-left" :style="rectLeftStyle" />
    <div class="circle-bar-right" :style="rectRightStyle" />
  </div>
</template>
<script>
export default {
  components: {},
  props: {
    radius: {
      type: Number,
      default: 16
    },
    bgColor: {
      type: String,
      default: '#fff'
    },
    barColor: {
      type: String,
      default: '#ed6a0c'
    },
    percent: {
      type: Number,
      default: 10
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      leftRotate: 0,
      rightRotate: 0,
      rightBg: ''
    };
  },
  computed: {
    barStyle() {
      return {
        width: `${this.radius}px`,
        height: `${this.radius}px`,
        background: this.barColor,
        border: `1px solid ${this.barColor}`
      };
    },
    rectLeftStyle() {
      const { width, height } = this.barStyle;

      return {
        clip: `rect(0, ${this.radius / 2}px, auto, 0)`,
        background: this.bgColor,
        width,
        height,
        transform: `rotate(${this.leftRotate}deg)`
      };
    },
    rectRightStyle() {
      const { width, height } = this.barStyle;
      return {
        clip: `rect(0, auto, auto, ${this.radius / 2}px)`,
        background: this.rightBg,
        width,
        height,
        transform: `rotate(${this.rightRotate}deg)`
      };
    }
  },
  watch: {
    bgColor: {
      handler() {
        this.rightBg = this.bgColor;
      },
      immediate: true
    }
  },
  mounted() {
    if (this.percent <= 50) {
      this.rightRotate = this.percent * 3.6;
    } else {
      this.rightBg = this.barColor;
      this.rightRotate = 0;
      this.leftRotate = (this.percent - 50) * 3.6;
    }
  },
  methods: {}
};
</script>
<style lang="less" scoped>
.circle-bar {
  position: relative;
}
.circle-bar * {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
.circle-bar,
.circle-bar > * {
  border-radius: 50%;
}
</style>
