<template>
  <div v-loading="loading">
    <date-range-picker :start-date.sync="queryParams.payDateStart" :end-date.sync="queryParams.payDateEnd" @change="getList"/>
    <!-- 替换为 echarts 容器 -->
    <div ref="chartRef" style="width: 100%; height: 268px;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { BonusArrivalType } from '@/utils/constants'
import { getLastDateStr } from '@/utils'
import DateRangePicker from '@/components/DateRangePicker/index.vue'

export default {
  name: "UserDailyRechargeReport",
  components: { DateRangePicker },
  props: {
    query: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      loading: false,
      list: [],
      queryParams: {
        payDateStart: getLastDateStr(30),
        payDateEnd: getLastDateStr(0),
        arrivalId: null,
        arrivalTypes: BonusArrivalType.userList()
      },
      chart: null
    }
  },
  computed: {
    labels() {
      return this.list.map(item => item.key);
    },
    chartData() {
      return this.list.map(item => item.sum == null ? 0 : Number(item.sum.toFixed(2)));
    }
  },
  created() {
    this.queryParams = {
      ...this.queryParams,
      ...this.query
    }
    this.getList();
  },
  mounted() {
    this.initChart();
  },
  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose();
    }
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.chartRef);
      this.updateChartData();
    },
    updateChartData() {
      if (!this.chart) return;
      
      const option = {
        tooltip: {
          trigger: 'axis',
          formatter: '{b}<br/>{a}: {c}元'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.labels
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value}元'
          }
        },
        series: [{
          name: '收入',
          type: 'line',
          data: this.chartData,
          smooth: true,
          symbol: 'circle',
          symbolSize: 6,
          itemStyle: {
            color: '#409EFF'
          },
          lineStyle: {
            width: 2
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgba(64,158,255,0.3)'
            }, {
              offset: 1,
              color: 'rgba(64,158,255,0.1)'
            }])
          }
        }]
      };
      
      this.chart.setOption(option);
    },
    getList() {
      this.loading = true;
      // 模拟API调用
      setTimeout(() => {
        // 生成最近30天的模拟数据
        const mockData = Array.from({length: 30}, (_, i) => {
          const date = new Date();
          date.setDate(date.getDate() - i);
          return {
            key: `${date.getMonth() + 1}-${date.getDate()}`,
            sum: Math.random() * 1000
          }
        }).reverse();
        
        this.list = mockData;
        this.loading = false;
        // 更新图表数据
        this.$nextTick(() => {
          this.updateChartData();
        });
      }, 500)
    }
  },
  watch: {
    // 监听窗口大小变化，重绘图表
    '$store.state.app.sidebar.opened': {
      handler() {
        if (this.chart) {
          this.$nextTick(() => {
            this.chart.resize();
          });
        }
      }
    }
  }
}
</script>