<template>
  <div class="chart-container">
    <div class="tabs">
      <button 
        :class="{ active: currentTab === 'month' }" 
        @click="switchTab('month')">月</button>
      <button 
        :class="{ active: currentTab === 'quarter' }" 
        @click="switchTab('quarter')">季</button>
      <button 
        :class="{ active: currentTab === 'year' }" 
        @click="switchTab('year')">年</button>
    </div>
    <div ref="chart" style="width: 520px; height: 300px;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { currentGET } from "api/modules";
export default {
  name: 'BarChart',
  // 修改数据结构和series配置
  data() {
    return {
      currentTab: 'month',
      chartData: {
        month: {
          xData: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
          seriesData:[],
        },
        quarter: {
          xData: ['一季度', '二季度', '三季度', '四季度'],
         seriesData: [
          ]
        },
        year: {
          xData: ['2022', '2023', '2024', '2025', '2026'],
          seriesData: [
          ]
        }
      }
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
        currentGET("big11").then((res) => {
          console.log(res);
          if (res.code === 0) {
            // this.chartData.month.seriesData = res.data.monthList
            res.data.monthList.forEach((item, index) => {
              let month = parseInt(item.months);
              this.chartData.month.seriesData[month-1] = item;
            })
            // this.chartData.quarter.seriesData = res.data.quarterList;
             res.data.quarterList.forEach((item, index) => {
              let quarter = parseInt(item.quarters);
              this.chartData.quarter.seriesData[quarter-1] = item;
            })
            // this.chartData.year.seriesData = res.data.yearList;
             res.data.yearList.forEach((item, index) => {
              let year = parseInt(item.years);
              this.chartData.year.seriesData[year-2022] = item;
            })
            console.log('==========',this.chartData.year.seriesData);
            this.$nextTick(() => {
              this.initChart();
            });
          }
        });
      },
    switchTab(tab) {
      this.currentTab = tab;
      this.$nextTick(() => {
        this.initChart();
      });
    },
    initChart() {
      const myChart = echarts.init(this.$refs.chart);
      const { xData, seriesData } = this.chartData[this.currentTab];
      
      // 在option配置中添加tooltip格式化
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: (params) => {
            const dataItem = seriesData[params.dataIndex];
            let tip = `${params.name}<br>总数: ${params.value}`;
            for (const [code, count] of Object.entries(dataItem.faultCodes)) {
              tip += `<br>${code}: ${count}次`;
            }
            return tip;
          }
        },
        grid: {
          left: '0%',
          right: '4%',
          top: '20%',
          bottom: '15%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: xData,
          axisLabel: { color: '#000000' }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            color: '#000000'
          },
          splitLine: {
            lineStyle: {
              color: '#3399FF'
            } 
          }
        },
        series: [{
          data: seriesData.map(item => item.total), // 保持数值部分
          type: 'bar',
          barWidth: this.currentTab === 'month' ? 16 : 28,  // 微调月份柱宽到16px
          barCategoryGap: '-5%',  // 间距从15%减少到10%
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0, color: '#6a99f8'
            }, {
              offset: 1, color: '#0b2149'
            }])
          }
        }]
      };
      myChart.setOption(option);
    }
  }
};
</script>

<style scoped>
.chart-container {
  position: relative;
}

.tabs {
  position: absolute;
  top: -10px;
  left: 10px;
  z-index: 10;
}

button {
  background: rgba(25, 61, 112, 0.8);
  border: 1px solid #2f6ed4;
  color: #000000;
  padding: 5px 15px;
  margin-right: 10px;
  cursor: pointer;
  border-radius: 3px;
}

button.active {
  background: #2f6ed4;
  border-color: #4a8df8;
}
</style>