<script setup>
import { ref, computed } from "vue";

const props = defineProps({
  diameter: {
    type: Number,
    default: 90,
  },
});

const side = computed(() => {
  return props.diameter / 10;
});

const rings = ["X", "10", "9", "8", "7", "6"];
</script>

<template>
  <view
    class="container circle"
    :style="{
      width: diameter + 'vw',
      height: diameter + 'vw',
      background: '#00BAE9',
    }"
  >
    <view
      class="circle"
      :style="{
        background: '#FF5665',
        width: side * 8 + 'vw',
        height: side * 8 + 'vw',
      }"
    >
      <view class="rings" :style="{ transform: `translateX(-${side}vw)` }">
        <text
          v-for="(ring, index) in rings"
          :key="ring"
          :style="{
            width: side + 'vw',
            transform: `translateX(${
              index === 0 ? side / 2 : index === 1 ? side / 4.5 : 0
            }vw)`,
          }"
          >{{ ring }}</text
        >
      </view>
      <view
        class="circle"
        :style="{
          background: '#FF5665',
          width: side * 6 + 'vw',
          height: side * 6 + 'vw',
        }"
      >
        <view
          class="circle"
          :style="{
            background: '#FDDC61',
            width: side * 4 + 'vw',
            height: side * 4 + 'vw',
          }"
        >
          <view
            class="circle"
            :style="{
              background: '#FDDC61',
              width: side * 2 + 'vw',
              height: side * 2 + 'vw',
            }"
          >
            <view
              class="circle"
              :style="{
                background: '#FDDC61',
                width: side + 'vw',
                height: side + 'vw',
              }"
            >
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped>
.container {
  position: relative;
}
.rings {
  position: absolute;
  display: flex;
  align-items: center;
  left: 50%;
}
.rings > text {
  font-size: 24rpx;
  color: #333;
  text-align: center;
}
.circle {
  border: 1rpx solid #3e3e3e66;
  box-sizing: border-box;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
