<template>
  <div :class="className" :style="{ height: height, width: width }">
    <div class="select-container">

    <select v-model="selectedDataKey" @change="updateChart">
      <option v-for="key in dataKeys" :key="key" :value="key">
        {{ key }}
      </option>
    </select>
    <select v-model="selectedYear" @change="updateChart">
      <option v-for="year in availableYears" :key="year" :value="year">
        {{ year }}
      </option>
    </select>
    </div>
    <div ref="chart" :style="{ height: height, width: width }"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { listRun_data_month } from "@/api/run_data_month/run_data_month";
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '400px'
    }
  },
  data() {
    return {
      chart: null,
      chartData: [],
      selectedDataKey: 'powerConsume', // 默认选择的字段
      dataKeys: [
        // 'enterpriseName',
        // 'location',
        // 'code',
        'powerConsume',
        'energyConsume',
        // 'year',
        // 'month'
      ], // 可选项,
      selectedYear: null,
      queryParams: {
        pageNum: 1,
        pageSize: 2000000,
        enterpriseName: null,
        location: null,
        code: null,
        powerConsume: null,
        energyConsume: null,
        year: null,
        month: null
      },
      availableYears: []
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.fetchData();
    })
  },
  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose();
    }
  },
  methods: {
    fetchData() {
      listRun_data_month(this.queryParams).then(response => {
        this.chartData = response.rows;
        this.availableYears = [...new Set(this.chartData.map(item => item.year))];
        this.selectedYear = this.availableYears[0] || null;
        this.initChart();
      }).catch(error => {
        console.error('Error fetching data:', error);
      });
    },
    initChart() {
      if (this.chart) {
        this.chart.dispose();
      }
      this.chart = echarts.init(this.$refs.chart, 'macarons');
      this.updateChart();
    },
    updateChart() {
      if (!this.chart) {
        return;
      }
      let filteredData = this.chartData;
      if (this.selectedYear) {
        filteredData = filteredData.filter(item => item.year === this.selectedYear);
      }
      const companyNames = filteredData.map(item => item.enterpriseName);
      const values = filteredData.map(item => item[this.selectedDataKey]);

      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: [this.selectedDataKey]
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: companyNames,
          axisLabel: {
            fontSize: 8
          }
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          name: this.selectedDataKey,
          type: 'bar',
          data: values
        }]
      };

      this.chart.setOption(option);
    }
  },
  watch: {
    selectedDataKey() {
      this.updateChart();
    },
    selectedYear() {
      this.updateChart();
    }
  }
}
</script>
<style scoped>
.select-container {
  margin: 10px 0;
  font-size: 16px; /* 调整字号大小 */
}

.select-container select {
  padding: 10px 20px; /* 增加内边距 */
  margin-right: 10px; /* 增加右边距 */
  border: 1px solid #409EFF; /* 蓝色边框 */
  border-radius: 4px; /* 圆角边框 */
  background-color: white; /* 背景色 */
  color: #409EFF; /* 文字颜色 */
  font-size: 16px; /* 调整字号大小 */
  cursor: pointer; /* 鼠标悬停时的指针样式 */
  outline: none; /* 移除焦点时的轮廓 */
}

.select-container select:hover {
  border-color: #66b1ff; /* 鼠标悬停时的边框颜色 */
}

.select-container select:focus {
  border-color: #409EFF; /* 焦点时的边框颜色 */
  box-shadow: 0 0 0 2px rgba(64, 159, 255, 0.2); /* 焦点时的阴影效果 */
}
</style>
