<!--月開課熱度-->
<template>
  <div id="month-course-heatMap"></div>
</template>

<script>
export default {
  name: "MonthCourseHeatMap",
  props: ["monthSelect"],
  data() {
    return {
      mockData: [],
      total: 0,
    };
  },
  mounted() {
    this.drawLine(this.mockData);
  },
  created() {
    this.caltotal();
  },
  watch: {
    monthSelect: function (value) {
      this.drawLine(this.mockData);
      this.caltotal();
    },
  },
  methods: {
    caltotal() {
      this.mockdata = this.getVirtulData(2020, this.monthSelect);
      console.log(this.mockdata);
       this.total=0;
      this.mockdata.forEach((item) => {
        this.total += item[1];
      });
      this.$emit("monthClassNum", this.total);
    },
    getVirtulData(year, month) {
      year = year;
      var date = +this.$echarts.number.parseDate(year + `-${month}-01`);
      var end = +this.$echarts.number.parseDate(
        +year + `-${month}-${(31 + 1).toString()}`
      );
      var dayTime = 3600 * 24 * 1000;
      var data = [];
      for (var time = date; time < end; time += dayTime) {
        data.push([
          this.$echarts.format.formatTime("yyyy-MM-dd", time),
          Math.floor(Math.random() * 16),
        ]);
      }
      return data;
    },
    drawLine(mockData) {
      let myChart = this.$echarts.init(
        document.getElementById("month-course-heatMap")
      ); //绘制图表
      myChart.setOption({
        
        tooltip: {
          position: "top",
          formatter: function (p) {
            return (
              "<div>" +
              p.data[0].slice(5, 7) +
              "月" +
              p.data[0].slice(8, 10) +
              "日" +
              ':<span class="heatMap-tooltip-num">&nbsp;' +
              p.data[1] +
              "</span>&nbsp;堂</div>"
            );
          },
        },
        visualMap: {
          min: 0,
          max: 16,

          type: "piecewise",
          splitNumber: 4,
          itemGap: 10,
          itemWidth: 8,
          itemHeight: 8,
          textGap: 2,
          inRange: {
            symbol: "circle",
            color: ["#E9C090", "#FF9058", "#FB6E00", "#FF4600"],
          },
          itemSymbol: "circle",
          textStyle: {
            color: "white",
          },
          calculable: true,
          orient: "horizontal",
          bottom: 0,
        },

        calendar: [
          {
            left: "20",
            cellSize: [25, 30],
            orient: "vertical",
            range: `2020-${this.monthSelect}`,
            splitLine: {
              show: false,
            },
            itemStyle: {
              borderWidth: 2,
              borderColor: "#454545",
            },
            dayLabel: {
              color: "white",
              nameMap: "cn",
              fontWeight: "bolder",
            },

            yearLabel: {
              show: false,
            },
            monthLabel: {
              show: false,
            },
          },
        ],

        series: [
          {
            type: "heatmap",
            coordinateSystem: "calendar",
            calendarIndex: 0,
            data: this.getVirtulData(2020, this.monthSelect),
          },
        ],
      });
    },
  },
};
</script>

<style>
.heatMap-tooltip-num {
  color: #fb6e00;
  font-size: 20px;
  font-weight: bolder;
  
}
</style>