<template>
  <div class="learning-effect">
    <el-button type="default" size="small" @click="exportPDF">导出明细</el-button>
    <div class="education" ref="education"></div>
    <div class="learning" ref="learning"></div>
  </div>
</template>

<script>
import { openLoading, closeLoading } from "../../utils/utils";
import * as commonUtil from "../../utils/utils";
import echarts from "echarts";
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
let vm = null;
export default {
  data() {
    return {
      echartsData: {
        chart1: {},
        chart2: {}
      }
    };
  },
  created() {
    vm = this;
    vm.$nextTick(() => {
      vm.setEducation();
      vm.setLearning();
    });
  },
  mounted() {
    commonUtil.resizeHeight();
  },
  methods: {
    exportPDF() {
      let element = '';
      element = document.querySelector('.data-all-wrap');
      console.log(element);
      if(element == null) {
        return
      }
      setTimeout(() => {
        html2Canvas(element).then(function(canvas) {
          let contentWidth = canvas.width;
          let contentHeight = canvas.height;

          //一页pdf显示html页面生成的canvas高度;
          let pageHeight = contentWidth / 592.28 * 841.89;
          //未生成pdf的html页面高度
          let leftHeight = contentHeight;
          //页面偏移
          let position = 0;
          //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
          let imgWidth = 595.28;
          let imgHeight = 592.28 / contentWidth * contentHeight;

          let pageData = canvas.toDataURL('image/jpeg', 1.0);

          let pdf = new JsPDF('', 'pt', 'a4');

          //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
          //当内容未超过pdf一页显示的范围，无需分页
          if (leftHeight < pageHeight) {
            pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
          } else {
            while (leftHeight > 0) {
              pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
              leftHeight -= pageHeight;
              position -= 841.89;
              //避免添加空白页
              if (leftHeight > 0) {
                pdf.addPage();
              }
            }
          }
          let title = "导出学情报告";
          pdf.save(title + '.pdf');
        });
      }, 0);
    },
    updateResize() {
      this.$nextTick(function() {
        window.onresize = function() {
          vm.echartsData.chart1.resize();
          vm.echartsData.chart2.resize();
        };
      });
    },
    setEducation() {
      let myChart = echarts.init(this.$refs.education);
      let option = {
        title: {
          text: ""
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        color: ['#5D7092','#FFB01B'],
        legend: {
          data: ["项目前总正确率", "项目后总正确率"]
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: {
          type: "category",
          data: ["本科", "大专", "中专及以下", "硕士", "博士", "其他"]
        },
        yAxis: {
          min: 0,
          max: 100,
          type: "value",
          axisLabel: {
            formatter: "{value} %"
          }
        },
        series: [
          {
            name: "项目前总正确率",
            type: "bar",
            barWidth: 10,
            data: [45, 45, 34, 34, 4, 8]
          },
          {
            name: "项目后总正确率",
            type: "bar",
            barWidth: 10,
            data: [70, 66, 67, 67, 24, 24]
          }
        ]
      };
      myChart.setOption(option);
      vm.echartsData.chart1 = myChart;
      vm.updateResize();
    },
    setLearning() {
      let myChart = echarts.init(this.$refs.learning);
      let option = {
        title: {
          text: ""
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        color: ['#5D7092','#FFB01B'],
        legend: {
          data: ["培训前正确率", "培训后正确率"]
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: {
          axisLabel: {
            interval: 0,
            rotate: 45
          },
          type: "category",
          data: ["推荐联合用药方案"]
        },
        yAxis: {
          min: 0,
          max: 100,
          type: "value",
          axisLabel: {
            formatter: "{value} %"
          }
        },
        series: [
          {
            name: "培训前正确率",
            type: "bar",
            barWidth: 10,
            data: [45]
          },
          {
            name: "培训后正确率",
            type: "bar",
            barWidth: 10,
            data: [81]
          }
        ]
      };
      myChart.setOption(option);
      vm.echartsData.chart2 = myChart;
      vm.updateResize();
    },
  }
};
</script>

<style lang='scss' rel='stylesheet/scss'>
.learning-effect {
  width: 100%;
  .learning,
  .education {
    margin-top: 40px;
    min-width: 400px;
    height: 400px;
    background: #fff;
  }
}
</style>
