<template>
  <div v-loading="loading"> 
    <el-date-picker
      v-model="queryParams.year"
      type="year"
      value-format="yyyy"
      format="yyyy年项目概览"
      :clearable="false"
      @change="getList"
      size="mini"
      placeholder="选择年">
    </el-date-picker>

    <!--图表-->
    <div ref="chart" :style="{ width: width, height: height }"/>
  </div>
</template>

<script>
import { getMonthProject } from '@/api/dashboard/project';
import * as echarts from 'echarts';

export default {
  name: 'MonthProjectChart',
  props: {
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    },
    barWidth: {
      type: String,
      default: '30%'
    }
  },
  data() {
    return {
      list: [],
      queryParams: {
        year: new Date().getFullYear().toString(),
      },
      loading: false,
      chart: null
    }
  },
  created() {
    this.getList();
  },
  mounted() {
    this.initChart();
    window.addEventListener('resize', this.resizeChart);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resizeChart);
    if (this.chart) {
      this.chart.dispose();
      this.chart = null;
    }
  },
  methods: {
    getList() {
      this.loading = true;
      getMonthProject(this.queryParams).then(res => {
        this.list = res.data;
        this.updateChart();
      }).finally(() => {
        this.loading = false;
      })
    },
    initChart() {
      this.chart = echarts.init(this.$refs.chart);
      this.updateChart();
    },
    updateChart() {
      if (!this.chart) return;
      
      const months = this.list.map(item => `${item.month}月`);
      const startCounts = this.list.map(item => item.startCount);
      const finishCounts = this.list.map(item => item.finishCount);

      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          top: '15%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: months
        },
        yAxis: {
          type: 'value',
          minInterval: 1
        },
        series: [
          {
            name: '已完成项目',
            type: 'bar',
            stack: 'total',
            barWidth: this.barWidth,
            data: finishCounts,
            itemStyle: {
              color: '#9da6ff'
            }
          },
          {
            name: '开始项目',
            type: 'bar',
            stack: 'total',
            barWidth: this.barWidth,
            data: startCounts,
            itemStyle: {
              color: '#e1e4ff'
            }
          },
        ]
      };

      this.chart.setOption(option);
    },
    resizeChart() {
      if (this.chart) {
        this.chart.resize();
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.el-date-picker {
  margin-bottom: 20px;
}
</style>