<template>
  <view
    class="rounded-full w-[162rpx] h-[162rpx] bg-[#fff] dashboard-wrapper flex items-center justify-center"
    :style="{ '--current-color': color }"
  >
    <view class="w-[139rpx] h-[139rpx] custom-style flex items-center justify-center">
      <view
        v-for="i in 39"
        :key="i"
        class="tick"
        :style="{
          transform: `rotate(${i * 8 - 90}deg)`,
          opacity: `${1 - Math.abs(i * 8 - 90) / 90}`,
        }"
      ></view>
      <view class="font-500 text-color w-full h-full flex items-center justify-center">
        <view :class="`${score > 99 ? 'text-[50rpx]' : 'text-[62rpx]'}`">{{ score }}</view>
        <view class="text-[28rpx] mt-[8rpx]">分</view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
defineProps({
  color: {
    type: String,
    default: '#00b281',
  },
  score: {
    type: Number,
    default: 0,
  },
})
</script>

<style lang="scss" scoped>
.custom-style {
  border-radius: 50%;
  position: relative;
}

.text-color {
  color: var(--current-color);
  container-type: inline-size;
  white-space: nowrap;
}

.tick {
  position: absolute;
  top: 0;
  left: 50%;
  width: 4rpx;
  height: 10rpx;
  background-color: var(--current-color);
  transform-origin: 0 67rpx;
}
</style>
