import * as echarts from "echarts";
export default {
  data () {
    return {
      form: {
        wpId: ""
      },
      wpList: [],
      healthTableData: []
    }
  },
  mounted () {
    let that = this;
    that.$nextTick(() => {
      that.getWpList();
      that.renderCharts();
    });
  },
  methods: {
    // 获取风场列表
    getWpList () {
      this.API.get("powercompare/windfarmAllAjax").then(res => {
        if (res.data.length) {
          this.wpList = res.data;
          this.form.wpId = res.data[0].id;
          this.getHealthListData(res.data[0].id);
        }
      });
    },

    // 选择风场
    changeWpId (wpId) {
      this.getHealthListData(wpId)
    },

    getHealthListData (wpId) {
      this.$store.commit("loadingStore", true);
      let params = new URLSearchParams();
      params.append("wpId", wpId);
      this.API.post_L("wtHealthList/windTurbineHealthList", params).then(res => {
        res.data.forEach((ele, index) => {
          ele.chartIndex = index;
        });
        this.healthTableData = res.data;
        console.log('wpList', res.data);
        this.$store.commit("loadingStore", false);
        this.renderCharts(res.data);
      });
    },

    // 渲染图表
    renderCharts (sourceData) {
      this.$nextTick(() => {
        sourceData && sourceData.length && sourceData.forEach(ele => {
          ele.chartLine = echarts.init(document.getElementById('healthCharts-' + ele.chartIndex));
          let chartsOptions = {
            xAxis: {
              show: false,
              type: 'category',
              boundaryGap: false,
              data: ['1', '2', '3', '4']
            },
            yAxis: {
              show: false,
              type: 'value'
            },
            series: [{
              data: ele.futureHealth,
              type: 'line',
              areaStyle: {
                // color: '#1890ff'
              }
            }],
            // tooltip: {
            //   trigger: 'axis',
            //   axisPointer: {
            //     type: 'cross',
            //     label: {
            //       backgroundColor: '#6a7985'
            //     }
            //   }
            // }
          };
          ele.chartLine.setOption(chartsOptions);
        });
      });
    },

    // index渲染函数
    indexMethod (index) {
      return index + 1;
    },
  }
};