
<template>
  <div style="display: flex;flex-direction: column;height: 100%;">
    课堂分布
    <div ref="chart" style="width: 100%; flex: 1;height: 100%;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  props: {
    subjects: { type: Array, default: () => [] },  // 学科数组
    grades: { type: Array, default: () => [] },    // 年级数组
    courses: { type: Array, default: () => [] }    // 课程数组
  },
  data() {
    return {
      chart: null,
      allData:[],
      subList:[],
      graList:[],
      couList:[],
      chartData:[]
    };
  },
  watch: {
    subjects: {
      handler() {
        let allData = JSON.parse(JSON.stringify(this.grades))

        allData.forEach(e=>{
          e.subCh = JSON.parse(JSON.stringify(this.subjects))
          for (let i = 0; i < e.subCh.length; i++) {
            e.subCh[i].sum = 0
          }

          for (let index = 0; index < e.subCh.length; index++) {
            for (let i = 0; i < this.courses.length; i++) {
              if (this.courses[i] && this.courses[i].typeids && this.courses[i].typeids.includes(e.id) && this.courses[i].typeids.includes(e.subCh[index].id)) {
                e.subCh[index].sum++
              }
            }
          }
        })

        allData.forEach((grade,gid) => {
          grade.subCh.forEach((sub,pid) => {
            // 只展示 sum > 0 的点（气泡图一般这样处理）
            // if (sub.sum > 0) {
             this.chartData.push([gid, pid, sub.sum,sub.name, grade.name]);
            // }
          });
        });

        // console.log('this.chartData',this.chartData);

        this.initChart();

      },
      deep: true
    }
  },

  mounted() {
    this.initChart();
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize);
    this.chart && this.chart.dispose();
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.chart);
      this.updateChart();
    },
    updateChart() {
      const option = {
        tooltip: {
          formatter: params => {
            return `${params.data[3]}<br/>年级: ${params.data[4]}<br/>课程数量: ${params.data[2]}`;
          }
        },
        grid: {
          left: 80
        },
        legend: { 
          data: [...new Set(this.chartData.map(item => item[0]))],
          right: 10,
          top: 20
        },
        xAxis: {
          type: 'category',
          name: '年级',
          data: [...new Set(this.grades.map(item => item.name))],
          axisLabel: { interval: 0, rotate: 30 }
        },
        yAxis: {
          type: 'category',
          name: '学科',
          data: [...new Set(this.subjects.map(item => item.name))]
        },
        series: [{
          type: 'scatter',
          symbolSize: function(data) {
            return Math.min(data[2] * 4, 40); // 气泡大小与课程数量成正比
          },
          data: this.chartData,

          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }]
      };
      this.chart.setOption(option);
      window.addEventListener('resize', this.chart.resize);
    },
    handleResize() {
      this.chart && this.chart.resize();
    }
  },
  
};
</script>
