<template>
  <div ref="chartRef" class="chart-container"></div>
</template>

<script setup>
import { ref, onMounted, watch, nextTick, onUnmounted } from 'vue'
import * as echarts from 'echarts/core'
import {
  TooltipComponent,
  LegendComponent,
  GridComponent
} from 'echarts/components'
import { LineChart } from 'echarts/charts'
import { CanvasRenderer } from 'echarts/renderers'

echarts.use([
  TooltipComponent,
  LegendComponent,
  GridComponent,
  LineChart,
  CanvasRenderer
])

const props = defineProps({
  dateData: {
    type: Array,
    default: () => []
  },
  timeRange: {
    type: String,
    default: 'today'
  }
})

const chartRef = ref(null)
let chartInstance = null

const initChart = () => {
  if (!chartRef.value) return
  
  chartInstance = echarts.init(chartRef.value)
  
  const option = {
    title: {
      text: '按摩时长趋势',
      left: 'center',
      top: 10,
      textStyle: {
        fontSize: 14,
        fontWeight: 'normal'
      }
    },
    tooltip: {
      trigger: 'axis',
      formatter: (params) => {
        const param = params[0]
        const minutes = param.value
        const hours = Math.floor(minutes / 60)
        const remainingMinutes = minutes % 60
        let timeText = ''
        if (hours > 0) {
          timeText = `${hours}小时${remainingMinutes > 0 ? remainingMinutes + '分钟' : ''}`
        } else {
          timeText = `${minutes}分钟`
        }
        return `${param.name}<br/>
                总时长: ${timeText}`
      }
    },
    grid: {
      left: '5%',
      right: '5%',
      top: '15%',
      bottom: '10%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: props.dateData.map(item => item.date),
      axisLabel: {
        rotate: props.dateData.length > 10 ? 45 : 0,
        formatter: (value) => {
          // 根据时间范围格式化显示
          if (props.timeRange === 'today') {
            return value + '时'
          }
          return value
        }
      }
    },
    yAxis: {
      type: 'value',
      name: '时长',
      axisLabel: {
        formatter: (value) => {
          if (value >= 60) {
            const hours = Math.floor(value / 60)
            const minutes = value % 60
            return minutes > 0 ? `${hours}h${minutes}m` : `${hours}h`
          }
          return `${value}m`
        }
      }
    },
    series: [
      {
        name: '按摩时长',
        type: 'line',
        smooth: true,
        lineStyle: {
          width: 3,
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            { offset: 0, color: '#5470c6' },
            { offset: 1, color: '#91cc75' }
          ])
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(84, 112, 198, 0.3)' },
            { offset: 1, color: 'rgba(84, 112, 198, 0.01)' }
          ])
        },
        itemStyle: {
          color: '#5470c6'
        },
        data: props.dateData.map(item => item.totalDuration || 0)
      }
    ]
  }
  
  chartInstance.setOption(option)
}

const resizeChart = () => {
  chartInstance?.resize()
}

onMounted(() => {
  nextTick(() => {
    initChart()
    window.addEventListener('resize', resizeChart)
  })
})

watch(() => props.dateData, () => {
  nextTick(() => {
    if (chartInstance) {
      chartInstance.dispose()
    }
    initChart()
  })
}, { deep: true })

// 清理
onUnmounted(() => {
  window.removeEventListener('resize', resizeChart)
  chartInstance?.dispose()
})
</script>

<style scoped>
.chart-container {
  width: 100%;
  height: 350px;
  min-height: 300px;
}

@media (max-height: 768px) {
  .chart-container {
    height: 280px;
    min-height: 250px;
  }
}

@media (min-height: 1080px) {
  .chart-container {
    height: 400px;
  }
}
</style>
