const { getStudentClassRoomReport } = require("../../../utils/serve/teacher");
import uCharts from '../../../utils/chart/u-charts';

var uChartsInstance = {};
// subpackage/teacher/report-detail/report-detail.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
      reportDetail:{}
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
      this.setData({
        studentNo:options.studentNo,
        classRoomId:options.id
      },()=>{
        this.getReport()
      })
    },
    
    async getReport(){
      let params = {
        classRoomId:this.data.classRoomId,
      }
      if(this.data.studentNo){
        params.studentNo = this.data.studentNo
      }
      const res = await getStudentClassRoomReport(params)
      this.setData({
        reportDetail:res.data
      },()=>{
        this.drawCharts(this)
      })
    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {
      const cWidth = 315 / 375 * wx.getWindowInfo().windowWidth;;
      //这里的 500 对应 css .charts 的 height
      const cHeight = 220 / 375 * wx.getWindowInfo().windowWidth;
      console.log(wx.getWindowInfo())
      const pixelRatio = wx.getWindowInfo().pixelRatio
      this.setData({ cWidth, cHeight ,pixelRatio});
    },

    drawCharts(that) {
      const query = wx.createSelectorQuery().in(that);
      console.log('重新绘图',that.data.reportDetail)
      query.select('#mycanvas').fields({
        node: true,
        size: true
      }).exec(res => {
        if (res[0]) {
          const canvas = res[0].node;
          const ctx = canvas.getContext('2d');
          canvas.width = res[0].width * that.data.pixelRatio;
          canvas.height = res[0].height * that.data.pixelRatio;
          uChartsInstance['mycanvas'] = new uCharts({
            type: "line",
            context: ctx,
            width: that.data.cWidth * that.data.pixelRatio,
            height: that.data.cHeight * that.data.pixelRatio,
            categories: that.data.reportDetail.heartRateTrend.axisX,
            series: [{
              data: that.data.reportDetail.heartRateTrend.axisY
            }, ],
            pixelRatio: that.data.pixelRatio,
            animation: true,
            background: "#FFFFFF",
            color: that.data.chartType == 1 ? ["#FFA30C"] : that.data.chartType == 2 ? ["#6CB7FB"] : ["#FF4949"],
            padding: [15, 15, 10, 0],
            enableScroll: true,
            // touchMoveLimit: 24,
            legend: {
              show: false,
              fontColor: "#37b7e8"
            },
            xAxis: {
              disableGrid: true,
              itemCount: 5,
              scrollShow: true,
              fontSize: 12,
              lineHeight: 30,
              axisLineColor: "#f1f1f1",
              fontColor: "#000",
              scrollColor: "#f6ecc9",
              scrollBackgroundColor: "#F4F6F8"
            },
            yAxis: {
              gridType: "dash",
              gridColor: "#F1F1F1",
              // data: [{
              //   min: 40,
              //   // axisLine: false,
              //   fontSize: 12
              // }]
            },
            extra: {
              line: {
                type: "curve",
                width: 2,
                activeType: "hollow",
                onShadow: true,
                linearType: "custom",
              },
              tooltip: {
                showBox: false
              }
            }
          });
        } else {
          console.error("[uCharts]: 未获取到 context");
        }
      });
    },
    tap(e) {
      uChartsInstance[e.target.id].touchLegend(e);
      uChartsInstance[e.target.id].showToolTip(e);
    },
  
    touchstart(e){
      uChartsInstance[e.target.id].scrollStart(e);
    },
    touchmove(e){
      uChartsInstance[e.target.id].scroll(e);
    },
    touchend(e){
      uChartsInstance[e.target.id].scrollEnd(e);
      uChartsInstance[e.target.id].touchLegend(e);
      uChartsInstance[e.target.id].showToolTip(e);
    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    async onPullDownRefresh() {
      await this.getReport()
      wx.stopPullDownRefresh()
      wx.showToast({
        title: '刷新成功',
        icon:'none'
      })
    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {

    }
})