<template>
  <v-chart class="chart" :option="option" autoresize />
</template>

<script setup lang="ts">
import { computed } from 'vue'
import VChart from 'vue-echarts'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { BarChart } from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
} from 'echarts/components'
import type { EChartsOption } from 'echarts'

use([
  CanvasRenderer,
  BarChart,
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
])

const props = withDefaults(defineProps<{
  title?: string
  data: { name: string; value: number }[]
  color?: string
  height?: string
}>(), {
  title: '',
  color: '#58a6ff',
  height: '300px',
})

const option = computed<EChartsOption>(() => ({
  title: props.title ? { text: props.title, textStyle: { color: '#e6edf3', fontSize: 12 } } : undefined,
  tooltip: { trigger: 'axis' },
  grid: { left: 40, right: 20, top: props.title ? 30 : 10, bottom: 30 },
  xAxis: {
    type: 'category',
    data: props.data.map(d => d.name),
    axisLine: { lineStyle: { color: '#30363d' } },
    axisLabel: { color: '#8b949e', fontSize: 10 },
  },
  yAxis: {
    type: 'value',
    splitLine: { lineStyle: { color: '#21262d' } },
    axisLabel: { color: '#8b949e' },
  },
  series: [{
    type: 'bar',
    data: props.data.map(d => d.value),
    itemStyle: { color: props.color },
    barWidth: '60%',
  }],
}))
</script>

<style scoped>
.chart {
  width: 100%;
  height: v-bind(height);
}
</style>
