<!--
 * @Author: 李佐宁
 * @Description: 
 * @Date: 2023-01-09 15:15:57
 * @LastEditTime: 2023-02-17 19:14:07
 * @LastEditors: 李佐宁
-->
<template>
  <div class="circle-bar" ref="circlebar">
    <div class="circle-bar-left"></div>
    <div class="circle-bar-right"></div>
    <!--遮罩层，显示百分比-->
    <div class="mask">
      <span class="percent">{{ total }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import icon_circel from "../../assets/image/screen/icon_circel.png";
import { defineProps, withDefaults, ref } from "vue";
interface propType {
  percent: number;
  total: number;
}
const propsData = withDefaults(defineProps<propType>(), {
  percent: 0,
  total: 0,
});

const circlebar = ref();
onMounted(() => {
  var percent = propsData.percent;

  var left_circle =
    circlebar.value.getElementsByClassName("circle-bar-left")[0];
  var right_circle =
    circlebar.value.getElementsByClassName("circle-bar-right")[0];
  if (percent <= 50) {
    var rotate = "rotate(" + percent * 3.6 + "deg)";
    right_circle.style.transform = rotate;
  } else {
    var rotate = "rotate(" + (percent - 50) * 3.6 + "deg)";
    right_circle.style.backgroundImage = "url(" + icon_circel + ")";
    right_circle.style.transform = "rotate(0deg)";
    left_circle.style.transform = rotate;
  }
});
</script>

<style lang="scss" scoped>
.circle-bar {
  font-size: 18px;
  width: 68px;
  height: 68px;
  position: relative;
  background-size: 100% 100%;
  background-image: url("../../assets/image/screen/icon_circel.png");
}

.circle-bar-left,
.circle-bar-right {
  width: 68px;
  height: 68px;
}

.circle-bar-right {
  clip: rect(0, auto, auto, 34px);
  background-image: url("../../assets/image/screen/icon_circel_bg.png");
  background-size: 100% 100%;
  background-color: #022249;
}

.circle-bar-left {
  clip: rect(0, 34px, auto, 0);
  background-image: url("../../assets/image/screen/icon_circel_bg.png");
  background-size: 100% 100%;
  background-color: #022249;
}

.mask {
  width: 58px;
  height: 58px;
  background-color: #022249;
  text-align: center;
  line-height: 0.2em;
  color: #00effe;
}

.mask :first-child {
  font-size: 14px;
  height: 58px;
  line-height: 58px;
  display: block;
}

/*所有的后代都水平垂直居中，这样就是同心圆了*/
.circle-bar * {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

/*自身以及子元素都是圆*/
.circle-bar,
.circle-bar>* {
  border-radius: 50%;
}
</style>
