<template>
  <view class="loop-pie">
    <view class="loop-pie-desc">
      <view class="loop-pie-desc-content">
        <text class="number">{{ percent }}</text>
        <text class="unit">%</text>
      </view>
    </view>
    <view class="loop-pie-line loop-pie-r">
      <view
        :style="{ transform: rcCss, borderBottom: borderColorStyle, borderRight: borderColorStyle }"
        class="loop-pie-c loop-pie-rm"
      />
    </view>
    <view class="loop-pie-line loop-pie-l">
      <view
        :style="{ transform: lcCss, borderBottom: borderColorStyle, borderRight: borderColorStyle }"
        class="loop-pie-c loop-pie-lm"
      />
    </view>
  </view>
</template>

<script>
export default {
  props: {
    x: {
      type: Number,
      default: 0
    },
    color: {
      type: String,
      default: ""
    },
    percent: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      lcCss: "",
      rcCss: ""
    };
  },
  computed: {
    borderColorStyle() {
      return `4rpx solid ${this.color}`;
    }
  },
  mounted() {
    this.loadPercent(this.x, 100);
  },
  methods: {
    loadPercent(x, y) {
      var rotate = (x / y) * 360;
      var rotateRight = 0;
      var rotateLeft = 0;
      if (rotate < 180) {
        rotateRight = rotate + -45;
      } else {
        rotateRight = 135;
        rotateLeft = rotate - 180 - 45;
        this.lcCss = `rotate(${rotateLeft}deg)`;
      }
      this.rcCss = `rotate(${rotateRight}deg)`;
    }
  }
};
</script>

<style scoped lang="scss">
@import "@/style/var.scss";
.loop-pie {
  position: relative;
  width: 96rpx;
  height: 96rpx;
  &-desc {
    width: 100%;
    height: 100%;
    position: absolte;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: $black;
    &-content {
      display: flex;
      align-items: baseline;
      justify-content: center;
      .number {
        font-weight: $font-weight-bold;
        @include text-size(36);
      }
      .unit {
        @include text-size(18);
      }
    }
  }
  &-line {
    position: absolute;
    width: 50%;
    height: 100%;
    top: 0;
    overflow: hidden;
  }
  &-l {
    top: 0;
    left: 0;
  }
  &-r {
    top: 0;
    transform: rotate(180deg);
    right: 0;
  }
  &-c {
    width: 200%;
    height: 100%;
    border: 4rpx solid transparent;
    border-radius: 50%;
    position: absolute;
    box-sizing: border-box;
    top: 0;
    transform: rotate(-45deg);
  }
  &-rm,
  &-lm {
    border-top: 4rpx solid #ddd;
    border-left: 4rpx solid #ddd;
  }
}
</style>
