<template>
  <div>
    <el-row type="flex">
      <el-tabs style="width: 100%">
        <el-tab-pane label="月报表">
          <!-- 使用 el-date-picker 组件 -->
          <el-date-picker v-model="queryParams.date" type="month" format="yyyy年MM月" value-format="yyyy-MM"
            placeholder="选择年月" @change="onChangeYear" style="width: 150px" />
        </el-tab-pane>
      </el-tabs>
    </el-row>
    <!-- <single-line-chart 
      v-loading="loading" 
      :labels="labels" 
      :chart-data="chartData" 
      name="收入(元)" 
      height="268px"
    /> -->
    <div id="myChart" style="width: 100%;height: 19.17rem;"></div>
  </div>
</template>

<script>
import { getIncomeList } from '@/api/system/dept'
import SingleLineChart from "@/components/SingleLineChart/index.vue";
import { BonusArrivalType } from "@/utils/constants";
import * as echarts from 'echarts';
export default {
  name: 'userRechargeReport',
  components: { SingleLineChart },
  props: {
    deptId: {
      type: Number,
      default: null,
    }
  },
  data() {
    const date = new Date();
    const currentYear = date.getFullYear();
    const currentMonth = date.getMonth() + 1;

    return {
      labels: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
      chartData: [],
      StatisticsInfo: null,
      queryParams: {
        // 设置默认日期格式为 "YYYY-MM"
        date: `${currentYear}-${currentMonth.toString().padStart(2, '0')}`,
        deptId: this.deptId,
        // arrivalTypes: BonusArrivalType.userList()
      },
      loading: false,
    };
  },
  watch: {
    deptId(newVal) {
      this.getReportData(newVal);
    }
  },
  methods: {
    drawLine() {
      let myChart = echarts.init(document.getElementById("myChart"));
      // 设置图表的配置项和数据
      myChart.setOption({
        grid: {
          left: 60,
          right: 50,
          top: 10,
          bottom: 20,
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['营收', '订单']
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.StatisticsInfo.map(item => item.day)
        },
        yAxis: [
          {
            type: 'value',
            name: '营收',
            position: 'left',
            min: 0, // 确保“营收”y轴从0开始
            axisLine: {
              lineStyle: {
                color: '#5470C6'
              }
            },
            axisLabel: {
              formatter: '{value} 元'
            }
          },
          {
            type: 'value',
            name: '订单',
            position: 'right',
            min: 0, // 确保“订单”y轴从0开始
            axisLine: {
              lineStyle: {
                color: '#91CC75'
              }
            },
            axisLabel: {
              formatter: '{value}'
            }
          }
        ],
        series: [
          {
            name: '营收',
            type: 'line',
            data: this.StatisticsInfo.map(item => item.income),
            yAxisIndex: 0,
            itemStyle: {
              color: '#5470C6'
            },
            smooth: true
          },
          {
            name: '订单',
            type: 'line',
            data: this.StatisticsInfo.map(item => item.orderNum),
            yAxisIndex: 1,
            itemStyle: {
              color: '#91CC75'
            },
            smooth: true
          }
        ]
      });
    }
    ,
    onChangeYear(value) {
      if (value) {
        this.queryParams.payTimeYear = value;  // 更新为选择的日期 (格式化为 YYYY-MM)
        this.getReportData(this.deptId);
      }
    },
    getReportData(deptId) {
      this.loading = true;
      this.queryParams.deptId = deptId || this.deptId;

      getIncomeList(this.queryParams).then(response => {
        this.StatisticsInfo = response.data
        setTimeout(() => {
          this.drawLine()
        }, 200);
        
        const data = response.data;
        const list = [];

        if (data && data.length > 0) {
          // 遍历接口返回的数据，每天的收入数据按顺序加入列表
          data.forEach(item => {
            list.push(item.income);  // 将每天的收入数据放入 list
          });
        }

        // 更新 chartData，用于 single-line-chart 显示
        this.chartData = list;
      }).finally(() => {
        this.loading = false;
      });
    },
    getReportMonth() {
      const now = new Date();
      const nowYear = now.getFullYear();
      const paramYear = new Date(this.queryParams.payTimeYear).getFullYear();
      if (paramYear < nowYear) {
        return 12;
      }
      if (paramYear === nowYear) {
        return now.getMonth() + 1;
      }
      return 0;
    }
  }
}
</script>

<style scoped>
.title {
  line-height: 36px;
}
</style>
