<!--
  柱状图组件
  支持横向/纵向、堆叠、分组柱状图
-->

<template>
  <BaseChart
    :option="chartOption"
    :height="height"
    :loading="loading"
    @ready="handleReady"
    @click="handleClick"
  />
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import BaseChart from './BaseChart.vue'
import { barChartOption, echartsTheme, formatNumber } from '@/utils/echarts'
import type { BarChartConfig } from '@/types/charts'

/** Props */
interface Props {
  data: Array<{ name: string; value: number; [key: string]: any }>
  title?: string
  type?: 'vertical' | 'horizontal'
  stacked?: boolean
  grouped?: boolean
  xAxisLabel?: string
  yAxisLabel?: string
  height?: string
  showDataZoom?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  data: () => [],
  title: '',
  type: 'vertical',
  stacked: false,
  grouped: false,
  xAxisLabel: '',
  yAxisLabel: '',
  height: '400px',
  showDataZoom: false,
})

/** Emits */
interface Emits {
  (e: 'ready', chart: any): void
  (e: 'click', item: any): void
}

const emit = defineEmits<Emits>()

/** 加载状态 */
const loading = ref(false)

/** 图表配置 */
const chartOption = computed(() => {
  const categories = props.data.map((item) => item.name)
  const values = props.data.map((item) => item.value)
  const isHorizontal = props.type === 'horizontal'

  return {
    ...barChartOption,
    title: {
      ...barChartOption.title,
      text: props.title,
    },
    tooltip: {
      ...barChartOption.tooltip,
      formatter: (params: any) => {
        const value = params.value
        return `${params.name}<br/>${params.seriesName}: ${formatNumber(value)}`
      },
    },
    xAxis: isHorizontal
      ? {
          ...barChartOption.yAxis,
          name: props.xAxisLabel,
          nameTextStyle: {
            padding: [0, 0, 0, 10],
          },
        }
      : {
          ...barChartOption.xAxis,
          data: categories,
          name: props.xAxisLabel,
          nameTextStyle: {
            padding: [0, 0, 0, 10],
          },
        },
    yAxis: isHorizontal
      ? {
          ...barChartOption.xAxis,
          data: categories,
          name: props.yAxisLabel,
          nameTextStyle: {
            padding: [0, 0, 0, 10],
          },
        }
      : {
          ...barChartOption.yAxis,
          name: props.yAxisLabel,
          nameTextStyle: {
            padding: [0, 10, 0, 0],
          },
        },
    dataZoom: props.showDataZoom
      ? [
          {
            type: 'slider',
            show: true,
            start: 0,
            end: 100,
            [isHorizontal ? 'yAxisIndex' : 'xAxisIndex']: 0,
          },
        ]
      : undefined,
    series: [
      {
        type: 'bar',
        name: props.yAxisLabel || '数值',
        data: isHorizontal ? values : values,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: echartsTheme.color[0] },
            { offset: 1, color: echartsTheme.color[1] },
          ]),
          borderRadius: isHorizontal ? [0, 4, 4, 0] : [4, 4, 0, 0],
        },
        emphasis: {
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: echartsTheme.color[4] },
              { offset: 1, color: echartsTheme.color[5] },
            ]),
          },
        },
        label: {
          show: true,
          position: isHorizontal ? 'right' : 'top',
          formatter: (params: any) => formatNumber(params.value),
          color: echartsTheme.textColor2,
          fontSize: 11,
        },
        barMaxWidth: 60,
      },
    ],
  }
})

/** 处理图表就绪 */
const handleReady = (chart: any) => {
  emit('ready', chart)
}

/** 处理点击事件 */
const handleClick = (params: any) => {
  const item = props.data.find((d) => d.name === params.name)
  if (item) {
    emit('click', { ...item, ...params })
  }
}

/** 暴露方法 */
defineExpose({
  loading,
})
</script>
