<template>
  <v-card class="rounded-lg h-100" elevation="2" v-bind="$attrs">
    <v-card-title class="text-subtitle-1 font-weight-bold py-4">
      {{ title }}
    </v-card-title>
    <v-divider></v-divider>
    <v-card-text class="d-flex flex-column align-center justify-center pt-8">
      <div
        class="d-flex align-center justify-center"
        style="position: relative; width: 200px; height: 200px"
      >
        <v-progress-circular
          class="position-absolute"
          color="grey-lighten-3"
          :model-value="100"
          :size="180"
          :width="25"
        ></v-progress-circular>

        <v-progress-circular
          class="position-absolute"
          :color="data.color"
          :model-value="data.value"
          rotate="270"
          :size="180"
          :width="25"
        >
          <div class="text-center">
            <div class="text-h5 font-weight-bold">{{ data.value }}%</div>
            <div class="text-caption text-grey">{{ data.label }}</div>
          </div>
        </v-progress-circular>
      </div>

      <div class="mt-8 d-flex flex-wrap justify-center gap-2">
        <v-chip class="mr-2" :color="data.color" label size="small" variant="flat">
          {{ data.label }}
        </v-chip>
        <v-chip color="grey-lighten-3" label size="small" variant="flat"> 其他 </v-chip>
      </div>
    </v-card-text>
  </v-card>
</template>

<script setup lang="ts">
interface Props {
  title: string
  data: {
    value: number
    label: string
    color: string
  }
}

defineProps<Props>()
</script>
