<!--  -->
<template>
  <el-card shadow="never">
    <template #header>
      <CardTitle :title="props.title" />
    </template>
    <div>
      <Echart :height="300" :options="chartOptions" />
    </div>
  </el-card>
</template>

<script lang="ts" setup>
import { EChartsOption } from 'echarts'
defineOptions({name: 'SexDistribution'})
const props = defineProps({
  title: {
    type: String,
    default: () => ''
  },
  data: {
    type: Object,
    default: () => {}
  },
})

const chartOptions = reactive<EChartsOption>({
  tooltip: {
    trigger: 'item',
    confine: true,
    formatter: '{a} <br/>{b} : {c} ({d}%)'
  },
  legend: {},
  series: [
    {
      name: props.title,
      type: 'pie',
      radius: '50%',
      data: [],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      },
      label: {
        formatter: '{b} : {c}人 (占比：{d}%)'
      }
    }
  ]
}) as EChartsOption

watch(() => props.data, (newVal) => {
    if (newVal?.length) {
      chartOptions.series![0].data = newVal.map((e: any) => ({ value: e.value, name: e.key }))
    } else {
      chartOptions.series = []
    }
})
</script>
