<template>
  <TechCard>
    <div class="card-title">监护对象年龄分布</div>
    <BaseChart :option="chartOption" :height="220" />
  </TechCard>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import TechCard from '../TechCard/index.vue'

defineOptions({ name: 'GuardObjectAgeCard' })

interface AgeItem {
  ageRange: string
  count: number
}

interface Props {
  ageList: AgeItem[]
}

const props = defineProps<Props>()

const chartOption = computed(() => {
  if (!props.ageList || props.ageList.length === 0) {
    return {
      series: [],
    }
  }

  const data = props.ageList.map((item) => ({
    name: item.ageRange || '未知',
    value: item.count ?? 0,
  }))

  return {
    tooltip: {
      trigger: 'item',
      appendToBody: true,
      formatter: '{b}: {c}',
    },
    legend: {
      orient: 'horizontal',
      bottom: 10,
      textStyle: {
        color: '#fff',
        fontSize: 12,
      },
    },
    series: [
      {
        name: '设备年龄层次',
        type: 'pie',
        radius: ['20%', '55%'],
        center: ['50%', '40%'],
        roseType: 'area',
        label: { show: false },
        labelLine: { show: false },
        data,
        itemStyle: {
          color: (params: { dataIndex: number }) => {
            const colors = ['#4dc9e6', '#2572ed', '#6de4ff', '#1a57c9', '#00bcd4']
            return colors[params.dataIndex % colors.length]
          },
        },
      },
    ],
  }
})
</script>

<style scoped lang="less">
.card-title {
  font-size: 16px;
  font-weight: bold;
  color: #00f0ff;
  text-align: center;
}
</style>
