<script setup>
import { useTheme } from 'vuetify'
import { computed, ref, onMounted, onBeforeUnmount, watch } from 'vue'
import * as echarts from 'echarts'

const vuetifyTheme = useTheme()
const currentTheme = computed(() => vuetifyTheme.current.value.colors)

// 图表实例引用
const chartRef = ref(null)
let chartInstance = null

// 数据
const seriesData = [
  35,
  85,
  55,
  50,
  70,
]

const chartOptions = computed(() => {
  const backgroundColor = currentTheme.value['track-bg']
  
  // 定义每个柱子的颜色
  const barColors = [
    currentTheme.value.error,
    currentTheme.value.primary,
    currentTheme.value.error,
    currentTheme.value.primary,
    currentTheme.value.primary,
  ]

  return {
    grid: {
      show: false,
      top: -20,
      left: -7,
      right: 0,
      bottom: -5,
      containLabel: false
    },
    xAxis: {
      type: 'category',
      show: false,
      data: seriesData.map((_, index) => index),
      axisLine: { show: false },
      axisTick: { show: false },
      axisLabel: { show: false }
    },
    yAxis: {
      type: 'value',
      show: false,
      axisLine: { show: false },
      axisTick: { show: false },
      axisLabel: { show: false }
    },
    series: [{
      type: 'bar',
      data: seriesData,
      barWidth: '20%',
      itemStyle: {
        borderRadius: [4, 4, 0, 0],
        color: (params) => barColors[params.dataIndex]
      },
      // 添加背景柱子效果
      backgroundStyle: {
        color: backgroundColor,
        borderRadius: [5, 5, 0, 0]
      },
      showBackground: true
    }],
    tooltip: {
      show: false
    }
  }
})

// 初始化图表
const initChart = () => {
  if (chartRef.value) {
    chartInstance = echarts.init(chartRef.value)
    chartInstance.setOption(chartOptions.value)
  }
}

// 更新图表
const updateChart = () => {
  if (chartInstance) {
    chartInstance.setOption(chartOptions.value, true)
  }
}

// 监听主题变化
watch(() => vuetifyTheme.current.value, () => {
  updateChart()
})

// 监听窗口大小变化
const handleResize = () => {
  if (chartInstance) {
    chartInstance.resize()
    // 处理响应式调整
    handleResponsiveResize()
  }
}

// 响应式调整
const handleResponsiveResize = () => {
  if (!chartInstance || !chartRef.value) return
  
  const width = chartRef.value.offsetWidth || 0
  let barWidth = '20%'
  let borderRadius = 4
  
  if (width <= 725) {
    barWidth = '15%'
    borderRadius = 4
  } else if (width <= 960) {
    barWidth = '15%'
    borderRadius = 6
  } else if (width <= 1628) {
    barWidth = '20%'
    borderRadius = 2
  }
  
  chartInstance.setOption({
    series: [{
      barWidth: barWidth,
      itemStyle: {
        borderRadius: [borderRadius, borderRadius, 0, 0]
      }
    }]
  })
}

// 生命周期钩子
onMounted(() => {
  initChart()
  window.addEventListener('resize', handleResize)
})

onBeforeUnmount(() => {
  if (chartInstance) {
    chartInstance.dispose()
  }
  window.removeEventListener('resize', handleResize)
})
</script>

<template>
  <v-card>
    <v-card-text>
      <h4 class="text-h4">
        2,856
      </h4>

      <!-- ECharts 容器 -->
      <div 
        ref="chartRef" 
        style="width: 100%; height: 208px;"
        class="my-1"
      ></div>

      <h6 class="text-h6 text-center">
        Sessions
      </h6>
    </v-card-text>
  </v-card>
</template>