var app = getApp();
import * as echarts from '../../component/ec-canvas/echarts';

// 柱状图
let xDataList = []
let yDataList = []

function setOption(chart, xdata, ydata) {
  var option = {
    color: ['#54585f'],
    tooltip: {
      show: false
    },
    animation: false,
    grid: {
      left: 5,
      right: 5,
      bottom: 5,
      top: 20,
      // show: true,
      containLabel: true,
      // borderColor: '#c9f1ce'
    },
    xAxis: [
      {
        type: 'category',
        data: xdata,
        axisLine: {
          lineStyle: {
            color: '#c9f1ce'
          }
        },
        axisTick:{
          length:0
        },
        axisLabel: {
          color: '#4F5051',
          fontSize: 11,
          lineHeight: 15
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        interval: 10,//强制间隔
        axisTick: { show: false },
        axisLine: {
          show: false //是否显示轴线
        },
        splitLine:{
          lineStyle:{
            color: ['#c9f1ce'],
            width: 1
          }
        },
        axisLabel: {
          color: '#4F5051',
          fontSize: 11
        }
      }
    ],
    series: [
      {
        type: 'bar',
        // silent: true,//不响应和触发鼠标事件
        hoverAnimation: false,//是否开启 hover 在拐点标志上的提示动画效果。
        label: {
          normal: {
            show: true,
            position: 'top',
            // position: 'inside',
            // offset: [0,-6],
            color: '#60d4c6',
            // formatter: function (params) {
            //   if (params.value > 0) {
            //       return params.value;
            //   } else {
            //       return '';
            //   }
            // }
          }
        },
        itemStyle: {
          normal: {
            // color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
            //     offset: 0,
            //     color: "#60d4c6" // 0% 处的颜色
            // },{
            //     offset: 1,
            //     color: "#6be89b" // 100% 处的颜色
            // }], false),
            color: '#10D9B8',
            barBorderRadius: [3, 3, 0, 0] //（顺时针左上，右上，右下，左下）
          }
        },
        data: ydata
      }
    ]
  };

  chart.setOption(option)
}

Page({
  data: {
    trainList: [
      // { id: 1,ci:'5', time: "5月27日至5月20日", complete: false, xDataList: ['周日\n5.27', '周一\n5.26', '周二\n5.25', '周三\n5.24', '周四\n5.23', '周五\n5.22', '周六\n5.21'] ,yDataList: [3, 30, 3, 45, 37, 2, 20] },
      // { id: 2,ci:'4', time: "5月20日至5月13日", complete: true,xDataList: ['周日\n5.20', '周一\n5.19', '周二\n5.18', '周三\n5.17', '周四\n5.16', '周五\n5.15', '周六\n5.14'] ,yDataList: [13, 21, 15, 15, 27, 12, 10] },
      // { id: 3,ci:'3', time: "5月13日至5月6日", complete: false,xDataList: ['周日\n5.13', '周一\n5.12', '周二\n5.11', '周三\n5.10', '周四\n5.9', '周五\n5.8', '周六\n5.7'] ,yDataList: [3, 30, 3, 45, 37, 2, 20] },
      // { id: 4,ci:'2', time: "5月6日至5月1日", complete: true,xDataList: ['周日\n5.6', '周一\n5.5', '周二\n5.4', '周三\n5.3', '周四\n5.2', '周五\n5.1', '周六\n4.30'] ,yDataList: [30, 3, 35, 45, 17, 22, 0] },
      // { id: 5,ci:'1', time: "4月30日至4月23日", complete: false,xDataList: ['周日\n4.30', '周一\n4.29', '周二\n4.28', '周三\n4.27', '周四\n4.26', '周五\n4.25', '周六\n4.24'] ,yDataList: [3, 30, 3, 45, 37, 2, 20] },
    ],
    // interval: 5000,
    weekChart: {
      // onInit: weekInitChart,
      lazyLoad: true
    },
    // current: '',
    currentPage: 1,
    isLoading: false,
  },
  onLoad() {
    let me = this;
    // 请求前加Loading
    wx.showLoading({
      title: '加载中',
      mask: true
    })
    wx.request({
      url: app.globalData.apiUrl + 'Reports/history',
      method: 'POST',
      data: {
        token: wx.getStorageSync('token')
      },
      success: function (res) {
        // 请求成功后关闭Loading
        wx.hideLoading();
        if(res.data.errno==200){
          me.setData({
            trainList: res.data.data.list
          })
          for(let i=0;i<me.data.trainList.length;i++){
            console.log(me.data.trainList[i].historyId)
            me.selectComponent('#mychart-'+i).init((canvas, width, height) => {
              const chart = echarts.init(canvas, null, {
                width: width,
                height: height
              });
              setOption(chart, me.data.trainList[i].dayTrainingTitleList, me.data.trainList[i].dayTrainingDurationList)
              me.chart = chart;
              return chart;
            });
          }
        }else{
          wx.showModal({
            title: '提示',
            showCancel: false,
            content: res.data.msg
          })
        }
      }
    })
  },
  detail(e){
    // console.log(e.currentTarget.dataset.id)

    wx.navigateTo({
      url: '/pages/historyDetail/historyDetail?historyId='+e.currentTarget.dataset.id
    })
  },
  onPullDownRefresh:function(){
    wx.stopPullDownRefresh();//停止当前页面下拉刷新。
  },
  onReachBottom() {
    // 上拉触底
    let me = this
    console.log('上拉触底')

    me.setData({
      isLoading: true,
      currentPage: me.data.currentPage+1
    })
    wx.request({
      url: app.globalData.apiUrl + 'Reports/history',
      method: 'POST',
      data: {
        token: wx.getStorageSync('token'),
        page: me.data.currentPage
      },
      success: function (res) {
        if(res.data.errno==200){
          let newList = res.data.data.list
          if(!newList){
            me.setData({
              isLoading: false
            })
            return
          }
          me.setData({
            isLoading: false,
            trainList: me.data.trainList.concat(newList)
          })
        
          console.log(me.data.trainList.length-newList.length)
          for(let i=me.data.trainList.length-1;i>me.data.trainList.length-newList.length-1;i--){
            me.selectComponent('#mychart-'+i).init((canvas, width, height) => {
              const chart = echarts.init(canvas, null, {
                width: width,
                height: height
              });
              setOption(chart, me.data.trainList[i].dayTrainingTitleList, me.data.trainList[i].dayTrainingDurationList)
              me.chart = chart;
              return chart;
            });
          }
        }else{
          wx.showModal({
            title: '提示',
            showCancel: false,
            content: res.data.msg
          })
        }
      }
    })
  },
})