<!--  -->
<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 Echart from '@/components/Echart'
import { EChartsOption } from 'echarts'
defineOptions({name: 'AgeDistribution'})
const props = defineProps({
  title: {
    type: String,
    default: () => ''
  },
  data: {
    type: Object,
    default: () => {}
  },
})

const chartOptions = reactive<EChartsOption>({
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: []
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [],
      type: 'bar'
    }
  ]
}) as EChartsOption

watch(() => props.data, (newVal: any) => {
  if (!Object.keys(newVal).length) {
    chartOptions.xAxis.data = []
    chartOptions.series![0].data = []
    return
  }
  chartOptions.xAxis.data = newVal.x || []
  chartOptions.series![0].data = newVal.y || []
})
</script>
