<template>
  <div class="wrap1">
    <div class="chart" ref="chart"></div>
    <div class="title">{{ data.title }}</div>
    <div class="titleSub">{{ data.titleSub }}</div>
    <div class="slope">
      <div
        class="slopeLine"
        :style="{
          transform: 'rotate(' + (data.current / data.total) * -25 + 'deg)',
          top: -88 + (data.current / data.total) * 25 * 0.3 + 'px',
        }"
      ></div>
    </div>
  </div>
</template>

<script setup>
import { useTemplateRef, onMounted } from "vue";
import { setChart, getPieChart } from "../utils/charts";
const { data } = defineProps({
  data: {
    type: Object,
  },
});
// 第一个参数必须与模板中的 ref 值匹配
const chart = useTemplateRef("chart");
onMounted(() => {
  setChart(
    getPieChart((data.current / data.total) * 100, data.current, data.total),
    chart.value
  );
});
</script>

<style lang="scss" scoped>
.wrap1 {
  width: 141.6px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.chart {
  width: 94px;
  height: 94px;
}
.title {
  font-size: 20px;
  font-weight: 700;
  margin-top: 12px;
  color: rgba(59, 65, 75, 1);
}
.titleSub {
  font-size: 16px;
  font-weight: 400;
  margin-top: 2px;
  color: rgba(10, 87, 166, 1);
}
.slope {
  width: 68px;
  height: 40px;
  background-color: aqua;
  margin-top: 2px;
  background: linear-gradient(
    180deg,
    rgba(20, 67, 187, 0.3),
    rgba(20, 67, 187, 0) 100%
  );
  position: relative;
  overflow: hidden;
}
.slopeLine {
  height: 100px;
  width: 200%;
  background-color: #fff;
  border-bottom: 1.5px solid blue;
  position: absolute;
  top: -82px;
  left: -50%;
  transform: rotate(0deg);
  transform-origin: center bottom;
}
</style>
