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

const vuetifyTheme = useTheme()

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

// 数据
const seriesData = [
  0,
  20,
  5,
  30,
  15,
  45,
]

const chartOptions = computed(() => {
  const currentTheme = vuetifyTheme.current.value.colors
  
  return {
    grid: {
      top: 10,
      left: -7,
      right: 5,
      bottom: 5,
      containLabel: false
    },
    xAxis: {
      type: 'category',
      show: false,
      boundaryGap: false,
      data: seriesData.map((_, index) => index)
    },
    yAxis: {
      type: 'value',
      show: false
    },
    series: [{
      data: seriesData,
      type: 'line',
      smooth: false,
      symbol: 'circle',
      symbolSize: (value, params) => {
        // 最后一个点显示较大
        return params.dataIndex === seriesData.length - 1 ? 8 : 0
      },
      lineStyle: {
        width: 3,
        color: currentTheme.primary
      },
      areaStyle: {
        color: {
          type: 'linear',
          x: 0, y: 0, x2: 0, y2: 1,
          colorStops: [{
            offset: 0,
            color: currentTheme.primary
          }, {
            offset: 1,
            color: currentTheme.primary + '20' // 添加透明度
          }]
        }
      },
      emphasis: {
        focus: 'self',
        symbolSize: (value, params) => {
          return params.dataIndex === seriesData.length - 1 ? 10 : 6
        }
      },
      markPoint: {
        symbol: 'circle',
        symbolSize: 8,
        itemStyle: {
          color: currentTheme.surface,
          borderColor: currentTheme.primary,
          borderWidth: 3
        },
        data: [{
          coord: [seriesData.length - 1, seriesData[seriesData.length - 1]],
          value: seriesData[seriesData.length - 1]
        }]
      }
    }],
    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()
  }
}

// 生命周期钩子
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">
        $86.4k
      </h4>
      <!-- ECharts 容器 -->
      <div 
        ref="chartRef" 
        style="width: 100%; height: 208px;"
        class="my-1"
      ></div>

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