<template>
  <BaseEChart :options="chartOptions" v-bind="$attrs" />
</template>

<script setup>
import { computed } from 'vue'
import BaseEChart from './BaseEChart.vue'

defineOptions({
  name: 'BarChart'
})

const props = defineProps({
  // 数据项
  data: {
    type: Array,
    required: true
  },
  // x轴数据
  xAxis: {
    type: Array,
    required: true
  },
  // 是否显示背景
  showBackground: {
    type: Boolean,
    default: true
  },
  // 系列配置
  series: {
    type: Array,
    default: () => []
  },
  // 图表标题
  title: {
    type: String,
    default: ''
  },
  // 柱子宽度
  barWidth: {
    type: Number,
    default: 30
  }
})

const chartOptions = computed(() => {
  const series = props.series.length > 0 ? props.series : [{
    name: '数值',
    data: props.data,
    type: 'bar',
    barWidth: props.barWidth,
    showBackground: props.showBackground,
    backgroundStyle: {
      color: 'rgba(180, 180, 180, 0.1)'
    },
    itemStyle: {
      borderRadius: [4, 4, 0, 0]
    }
  }]

  return {
    title: props.title ? {
      text: props.title,
      left: 'center',
      top: 10
    } : null,
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      top: props.title ? '60px' : '40px',
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: props.xAxis,
      axisLine: {
        lineStyle: {
          color: '#E5E7EB'
        }
      },
      axisTick: {
        show: false
      }
    },
    yAxis: {
      type: 'value',
      splitLine: {
        lineStyle: {
          color: '#E5E7EB'
        }
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      }
    },
    series
  }
})
</script> 