import * as echarts from './../../ec-canvas/echarts';

function initChart(canvas: any, width: any, height: any, data: any, dpr: any) {
  console.log(data, 'data-------data')
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // new
  });
  canvas.setChart(chart);
  var color = ["#165DFF", "#14C9C9"]
  var option = {

    legend: {
      // data: ['预算', '实际'],//legend
      top: 20,
      right: 20,
      icon: "rect",
      textStyle: {
        fontSize: 12,
        color: '#323241',
      },
      itemHeight: 4,
      itemWidth: 16
    },
    grid: {
      containLabel: true,
      bottom: "10",
      left:"10",
      right:"10"
    },
    color: color,
    tooltip: {
      show: true,
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      boundaryGap: true,//不从0开始
      axisLine: {//不显示
        show: false
      },
      axisLabel: {
        show: true, // x轴文字是否显示,刻度值
        textStyle: {
          color: '#999999', // 文本颜色
          fontSize: 10 // 文本字体大小
        },
      },
      axisTick: {
        show: false,
        alignWithLabel: true
      },
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      // show: false
    },
    yAxis: {
      x: 'center',
      type: 'value',
      name: "单位（kWh）",//name
      splitNumber: 3,
      nameTextStyle: {//y轴名字样式
        color: "#999999",
        fontSize: "10",
        padding: [0, 0, 0, 40]
      },
      axisLabel: {
        show: true, // y轴文字是否显示,刻度值
        textStyle: {
          color: '#999999', // 文本颜色
          fontSize: 10 // 文本字体大小
        },
      },
      splitLine: {//y轴刻度线
        lineStyle: {
          type: 'dashed'
        }
      }
      // show: false
    },
    series: getSeriesData(data, color)
  };

  chart.setOption(option);
  return chart;
}
let seriesList: any = []

const getSeriesData = (data: any, color: Array<String>) => {
  seriesList = []
  for (let i = 0; i < data.nameList.length; i++) {
    const name = data.nameList[i];
    const list = data.dataList[i]
    let baseConfig = {
      name: name,
      type: 'line',
      smooth: true,
      symbol: "none",
      lineStyle: {
        width: 1
      },
      areaStyle: {
        opacity: 0.2,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: color[i]
          },
          {
            offset: 1,
            color: color[i]
          }
        ])
      },
      data: list
    }
    seriesList.push(baseConfig)
  }
  return seriesList
}

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    echartData: {
      type: Object,
      value: () => { }
    }
  },

  /**
   * 组件的初始数据
   */

  data: {
    ec: {
      onInit: initChart
    }
  }

  /**
   * 组件的方法列表
   */

})