import echarts from '../../../../components/ec-canvas/echarts';
import { fetchHistoryPoint } from '../../../../services/enterprise/fetchAssessment';
import { useLoading } from '../../../../behaviors/loading';
import dayjs from 'dayjs';

function setOption(chart, data) {
  var option = {
    // title: {
    //   text: data.total, //主标题文本
    //   subtext: '注册企业', //副标题文本
    // },
    color: ['#8BE7B7'],
    grid: {
      containLabel: true,
    },
    tooltip: {
      show: true,
      trigger: 'axis',
    },
    xAxis: {
      name: '月份',
      nameLocation: 'end',
      type: 'category',
      boundaryGap: false,
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
      nameTextStyle: {
        fontSize: 10,
      },
      // axisTick: {
      //   interval = '0'
      // }
    },
    yAxis: {
      name: '得分',
      x: 'center',
      type: 'value',
      splitLine: {
        lineStyle: {
          type: 'dashed',
        },
      },
      // show: false
    },
    grid: {
      x: 30,
      y: 30,
      x2: 37,
      y2: 60,
    },

    series: [
      {
        name: '评分',
        type: 'line',
        smooth: true,
        areaStyle: {
          color: {
            type: 'linear',
            x: 0.5,
            y: 0,
            x2: 0.5,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#28db74', // 0% 处的颜色
              },
              {
                offset: 1,
                color: '#dcfeea79', // 100% 处的颜色
              },
            ],
            opacity: 0.1,
            global: false, // 缺省为 false
          },
        },
        data: data,
      },
    ],
  };

  chart.setOption(option);
}

Page({
  behaviors: [useLoading],
  data: {
    ec: {
      lazyLoad: true,
    },
    //折线图时间选择
    planYear: '2000年',
    maxYear: '2000',
    //评估历史
    historys: [],
  },

  chartData: {},

  onLoad(options) {
    if (options) {
      this.userId = options.userId;
    }
    this.initPlanYear();
  },

  onReady() {
    this.ecComponent = this.selectComponent('#mychart-dom-line');
    this.initChart();
  },

  onPullDownRefresh() {
    this._startLoad();
  },

  initChart() {
    var data = {};
    this.ecComponent.init((canvas, width, height, dpr) => {
      // 获取组件的 canvas、width、height 后的回调函数
      // 在这里初始化图表
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr, // new
      });
      canvas.setChart(chart);
      setOption(chart, data);

      // 将图表实例绑定到 this 上，可以在其他成员函数（如 dispose）中访问
      this.chart = chart;

      this._startLoad();

      // 注意这里一定要返回 chart 实例，否则会影响事件处理等
      return chart;
    });
  },

  /**
   * 初始化年份
   */
  initPlanYear() {
    var now = dayjs();
    var year = now.year();
    var period = `${now.year()}/${now.month() + 1}-${now.month() + 1}`;
    var deadline = now.endOf('month').format('YYYY年MM月DD日');
    this.setData({
      planYear: `${year}年`,
      maxYear: year,
      thisPeriod: period,
      deadline: deadline,
    });
  },

  /**
   * 选择计划年份
   */
  bindYearChange(e) {
    let y = e.detail.value;
    this.setData({
      planYear: `${y}年`,
    });
    setOption(this.chart, this.chartData[this.data.planYear]);
  },

  _fetchData(page) {
    let userId = this.userId;
    return fetchHistoryPoint({ userId, page }).then(res => {
      this.setData({ historys: res.data });
      this.parseChartData(res.data);
    });
  },

  parseChartData(dataList) {
    dataList.forEach(d => {
      //折线图数据
      let date = dayjs(d.updateTime);
      let y = d.period.split('/')[0];
      let key = y + '年';
      if (!this.chartData.hasOwnProperty(key)) {
        this.chartData[key] = ['0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0'];
        if (y == date.year() + '') {
          let m = date.month();
          for (let i = m; i <= 11; i++) {
            this.chartData[key][i] = '-';
          }
        }
      }
      let monthGap = d.period.split('/')[1];
      let startMonth = parseInt(monthGap.split('-')[0]);
      let endMonth = parseInt(monthGap.split('-')[1]);
      for (let i = startMonth; i <= endMonth; i++) {
        this.chartData[key][i - 1] = d.score;
      }
    });
    setOption(this.chart, this.chartData[this.data.planYear]);
  },

  navToAssessmentDetail(e) {
    let { index } = e.currentTarget.dataset;
    let item = this.data.historys[index];
    wx.navigateTo({
      url: `/pages/enterprise/assessment/detail/index?userId=${this.userId}&period=${item.period}`,
    });
  },
});