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:{},
      loading: true
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
      this.setData({
        studentNo:options.studentNo,
        classRoomId:options.id
      },()=>{
        this.getReport()
      })
    },
    
    async getReport(){
      let params = {
        classRoomId:this.data.classRoomId,
        type:1
      }
      if(this.data.studentNo){
        params.studentNo = this.data.studentNo
      }
      const res = await getStudentClassRoomReport(params)
      const age = res.data.age || 0
      const hrMax = 220 - age
      const moderateHR = Math.round(hrMax * 0.6)  // 中等强度下限
      const highHR = Math.round(hrMax * 0.75)      // 高强度下限
      const d = res.data || {}
      const heartRange = `${d.minHR || 0}-${d.maxHR || 0}次/分`
      const avgHeart = d.avgHR || 0
      const highDuration = `${d.highIntensity || 0}分钟`
      const highRatio = `${d.highIntensityDurationRatio || 0}%`
      const jumpTotal = d.totalCount || 0
      const jumpDuration = d.totalDuration || 0
      const jumpAvgSpeed = d.avgSpeed || 0
      this.setData({
        reportDetail: { ...d, heartRange, avgHeart, highDuration, highRatio, jumpTotal, jumpDuration, jumpAvgSpeed },
        moderateHR,
        highHR,
        loading: false
      },()=>{
        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,
            enableMarkLine: true,
            background: "#FFFFFF",
            color: that.data.chartType == 1 ? ["#FFA30C"] : that.data.chartType == 2 ? ["#6CB7FB"] : ["#FF4949"],
            padding: [15, 10, 10, 5],
            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: Math.max(0, that.data.moderateHR - 20),
                max: that.data.highHR + 20,
                fontSize: 12,
                formatter: function (val) {
                  console.log('y轴刻度', val)
                  return val.toFixed(0);
                }
              }]
            },
            extra: {
              markLine: {
                type: 'dash',
                dashLength: 6,
                data: [
                  {
                    value: that.data.moderateHR,
                    lineColor: '#FFA30C',
                    showLabel: false,
                    labelText: '中强度',
                    labelFontColor: '#FFA30C',
                    // labelBgColor: '#FFF8EC00',
                    labelBgOpacity: 0.9,
                    labelAlign: 'center',
                    labelFontSize: 11
                  },
                  {
                    value: that.data.highHR,
                    lineColor: '#FF4949',
                    showLabel: false,
                    labelText: '高强度',
                    labelFontColor: '#FF4949',
                    // labelBgColor: '#FFF0F000',
                    labelBgOpacity: 0.9,
                    labelAlign: 'left',
                    labelFontSize: 11
                  }
                ]
              },
              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() {

    }
})