<template>
  <div class="chart-card">
    <div class="chart-card__header">
      <div class="chart-card__title">{{ title }}</div>
      <div class="chart-card__date-selector">
        <button
          v-for="period in periods"
          :key="period"
          class="chart-card__date-btn"
          :class="{ active: activePeriod === period }"
          @click="changePeriod(period)"
        >
          {{ period }}
        </button>
      </div>
    </div>
    <div class="chart-card__container" :id="chartId" ref="chartRef"></div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, watch, defineProps, defineEmits } from 'vue'
import * as echarts from 'echarts'

const props = defineProps({
  title: String,
  chartId: String,
  options: Object
})

const emit = defineEmits(['period-change'])

const chartRef = ref(null)
let chartInstance = null
const activePeriod = ref('日')
const periods = ['日', '月', '年']

const changePeriod = (period) => {
  activePeriod.value = period
  emit('period-change', period)
}

const initChart = () => {
  if (!chartRef.value) return

  chartInstance = echarts.init(chartRef.value)
  chartInstance.setOption(props.options)

  // 添加dataZoom配置（横向数据过多时显示滚动条）
  const option = {
    ...props.options,
    dataZoom: [
      // {
      //   type: 'slider',
      //   show: true,
      //   xAxisIndex: 0,
      //   start: 0,
      //   end: 50, // 默认显示50%的数据
      //   height: 10,
      //   bottom: 0,
      //   backgroundColor: '#f0f0f0',
      //   fillerColor: 'rgba(65, 105, 225, 0.2)',
      //   borderColor: '#ddd'
      // },
      // {
      //   type: 'inside',
      //   xAxisIndex: 0,
      //   start: 0,
      //   end: 50
      // }
      {
        type: 'inside',
        start: 0,
        end: 100
      },
      {
        start: 0,
        end: 100
      }
    ]
  }

  chartInstance.setOption(option)

  // window.addEventListener('resize', () => {
  //   chartInstance?.resize()
  // })
}

onMounted(() => {
  initChart()
})

onBeforeUnmount(() => {
  // window.removeEventListener('resize', () => {
  //   chartInstance?.resize()
  // }) // 关键：移除监听
})

watch(
  () => props.options,
  (newOptions) => {
    if (chartInstance) {
      chartInstance.setOption(newOptions)
    }
  },
  { deep: true }
)
</script>

<style lang="less" scoped>
.chart-card {
  background: white;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 20px;

  &__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
  }

  &__title {
    font-size: 16px;
    font-weight: 500;
  }

  &__date-selector {
    display: flex;
    gap: 10px;
  }

  &__date-btn {
    padding: 5px 10px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    background: white;
    cursor: pointer;
    font-size: 12px;

    &.active {
      background: #409eff;
      color: white;
      border-color: #409eff;
    }
  }

  &__container {
    height: 320px;
    width: 100%;
  }
}
</style>
