<template>
  <div class="data_body">
    <!-- <img src="../../assets/dataimage/1.png" style="width:90%" /> -->
    <div id="charts_canvas" class="echart" style="width: 100%; height: 100%"></div>
  </div>
</template>

<script>
export default {
  props: ["Josn", 'num'],
  data() {
    return {
      mindV: true,
      chartObj: null,
      timer: null,
      range: "",
      ooption: [],
      option: {
        // title: {
        //   top: 30,
        //   left: 'center',
        //   text: '作业提交热力图'
        // },
        tooltip: {
          formatter: function (p) {
            const format = p.data[0];
            return format + ' ' + p.data[1]+'份';
          }
        },
        visualMap: {
          min: 0,
          max: 0,
          type: 'continuous',
          inRange: {
            color: ['#65b9fc', '#477cd7']
          },
          precision: 0,
          calculable: true,
        },
        calendar: {
          top: 40,
          left: 100,
          right: 30,
          cellSize: ['auto', 15],
          range: '',
          itemStyle: {
            borderWidth: 0.5
          },
          yearLabel: { show: false },
          dayLabel: {
            show: false
          }
        },
        series: {
          type: 'heatmap',
          coordinateSystem: 'calendar',
          data: ''
        }
      },
    };
  },
  methods: {
    gettime() {
      var time = new Date();
      // time=time.setDate(time.getDate()+1);
      // time = new Date(time);
      // time.setTime(time.getTime());
      var s2 = time.getFullYear() + "-" + ((time.getMonth() + 1) < 10 ? '0' + (time.getMonth() + 1) : (time.getMonth() + 1)) + "-"
        + ((time.getDate()) < 10 ? '0' + (time.getDate()) : (time.getDate()));
      var monthNum = 6; //要减的月数(6)自己定义
      var dateArr = s2.split('-'); //s2当前时间
      var year = dateArr[0]; //获取当前日期的年份
      var month = dateArr[1]; //获取当前日期的月份
      var day = dateArr[2]; //获取当前日期的日
      var days = new Date(year, month, 0);
      days = days.getDate(); //获取当前日期中月的天数
      var year2 = year;
      var month2 = parseInt(month) - monthNum;
      if (month2 <= 0) {
        // year2 = parseInt(year2) - parseInt(month2 / 12 == 0 ? 1 : parseInt(month2) / 12);
        year2 = parseInt(year2) - 1;
        month2 = 12 - (Math.abs(month2) % 12);
      }
      var day2 = day;
      var days2 = new Date(year2, month2, 0);
      days2 = days2.getDate();
      if (day2 > days2) {
        day2 = days2 < 10 ? '0' + days2 : days2;
      }
      if (month2 < 10) {
        month2 = '0' + month2;
      }
      var t2 = year2 + '-' + month2 + '-' + day2;
      return [t2, s2]
    },
    setChart(option, year) {
      // 雷达图显示的标签
      let newPromise = new Promise((resolve) => {
        resolve();
      });
      //然后异步执行echarts的初始化函数
      newPromise.then(() => {
        const chartObj = this.$echarts.init(
          //劳动课程
          this.$el.querySelector("#charts_canvas")
        );
        this.option.series.data = option;
        this.option.calendar.range = year;
        this.option.visualMap.max = Object.keys(this.Josn).length + (10 - (Object.keys(this.Josn).length % 10));
        // 初始化雷达图
        this.chartObj = chartObj;
        this.chartObj.setOption(this.option);
      });
    },
    getVirtualData(year) {
      const date = +this.$echarts.time.parse(year[0]);
      const end = +this.$echarts.time.parse(year[1]);
      const dayTime = 3600 * 24 * 1000;
      const data = [];
      for (let time = date; time <= end; time += dayTime) {
        let a = this.$echarts.time.format(time, '{yyyy}-{MM}-{dd}', false)
        if (this.Josn[a]) {
          data.push([a, this.Josn[a]]);
        } else {
          data.push([a, null]);
        }
      }
      return data;
    },
    setData() {
      let year = Object.keys(this.Josn)[0].split('-')[0];
      var t = this.gettime();
      this.ooption = this.getVirtualData(t)
      if (!this.chartObj) {
        this.setChart(this.ooption, t);
      } else {
        this.option.series.data = this.ooption;
        this.option.calendar.range = t;
        this.option.visualMap.max = Object.keys(this.Josn).length + (10 - (Object.keys(this.Josn).length % 10));
        this.chartObj.setOption(this.option, t);
      }
    },
  },
  watch: {
    num: {
      handler: function (newVal, oldVal) {
        this.setData();
      },
      deep: true,
    },
    Josn: {
      handler: function (newVal, oldVal) { },
      deep: true,
    },
  },
  beforeDestroy() {
    window.removeEventListener("resize", () => {
      if (_this.chartObj) {
        _this.chartObj.resize();
      }
    });
  },
  mounted() {
    this.setData();
    var _this = this;
    window.addEventListener("resize", () => {
      if (_this.chartObj) {
        _this.chartObj.resize();
      }
    });
  },
  beforeDestroy() {
    // clearInterval(this.timer);
    // this.timer = null
  },
};
</script>

<style scoped>
.data_body {
  /* display: flex; */
  /* flex-direction: column; */
  width: 100%;
  height: 170px;
  /* height: 500px; */
  /* margin: 15px 5px 0 0; */
  background: #fff;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
}

.noMind {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  z-index: 999;
  background: #fff;
}
</style>
