const echarts = require('../../../component/ec-canvas/echarts');

/**
 * 测评趋势
 */
export const useChart = Behavior({
  data: {
    ec: {
      lazyLoad: true,
    },
    //折线图时间选择
    planYear: '2000',
    maxYear: '2000',
  },
  ready() {
    this.ecComponent = this.selectComponent('#mychart-dom-line');
    this.initChart();
  },
  methods: {
    initChart: function () {
      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;

        // 注意这里一定要返回 chart 实例，否则会影响事件处理等
        return chart;
      });
    },
    /**
     * 选择计划年份
     */
    bindYearChange(e) {
      let y = e.detail.value;
      this.setData({
        planYear: `${y}年`,
      });
      setOption(this.chart, this.chartData[this.data.planYear]);
    },

    refreshChart(data) {
      setOption(this.chart, data);
    },
  },
});

function setOption(chart, data) {
  var option = {
    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);
}