import * as echarts from "echarts";
import { Message } from 'element-ui';
export default {
  data () {
    return {
      form: {
        wpId: "",
        recorddate: this.Moment(new Date()).subtract(1, 'days').format('yyyy-MM-DD')
      },
      pageNum: 1,
      pageSize: 10,
      orderByColumn: "",
      isAsc: "asc",
      wpList: [],
      tableData: [],
      dialogTitle: "趋势图",
      chartsLoading: true,
      chartDialogShow: false,
      noLineChartsData: false,
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [{
          text: '今天',
          onClick (picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick (picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick (picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      }
    }
  },

  mounted () {
    let that = this;
    that.$nextTick(() => {
      that.getWpList();
    });
  },

  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.getTableDate(res.data[0].id);
        }
      });
    },

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

    // 获取列表数据
    getTableDate (wpId) {
      if (this.form.recorddate) {
        let params = new URLSearchParams();
        params.append("wpId", wpId);
        params.append("recorddate", this.form.recorddate);
        params.append("pageNum", this.pageNum);
        params.append("pageSize", this.pageSize);
        params.append("orderByColumn", this.orderByColumn);
        params.append("isAsc", this.isAsc);
        this.API.post("wtcurve/windTurbineCurveList", params).then(res => {
          this.tableData = res.data || [];
        });
      }
    },

    // 渲染图表
    renderCharts (chartType, wtId) {
      this.chartDialogShow = true;

      this.$nextTick(() => {
        document.getElementById("curveDeviationChart").removeAttribute("_echarts_instance_");
        let chartDom = document.getElementById('curveDeviationChart');
        let myChart = echarts.init(chartDom);
        let option;
        if (chartType === 'zxt') {
          // 折线图
          this.dialogTitle = '曲线趋势图';
          let params = new URLSearchParams();
          params.append("wtId", wtId);
          params.append("recorddate", this.form.recorddate);
          params.append("type", 'sjbz');
          this.API.post_L('leaderboard/getCurvechatAjax', params).then(res => {
            this.chartsLoading = false;
            if (res.data.datas.length) {
              let xAxisData = []; // x轴标题
              let sjLineData = []; // 实际功率数据
              let bzLineData = []; // 保证功率数据

              res.data.datas.forEach(ele => {
                xAxisData.push('风速:' + ele.value1);
                sjLineData.push(ele.value2);
                bzLineData.push(ele.value3);
              });

              option = {
                title: {
                  show: true,
                  text: '单机区间曲线偏差率',
                  x: "center",
                  y: "top",
                  textAlign: "center",
                  padding: [5, 0, 5, 0],
                  textStyle: {
                    fontSize: 18,
                    color: '#333'
                  }
                },
                xAxis: {
                  type: 'category',
                  data: xAxisData
                },
                yAxis: {
                  type: 'value'
                },
                dataZoom: [{
                  type: 'slider',
                  show: true,
                  xAxisIndex: [0],
                  start: 0,
                  end: 100
                },
                {
                  type: 'slider',
                  show: true,
                  yAxisIndex: [0],
                  left: '92%',
                  start: 0,
                  end: 100
                },
                {
                  type: 'inside',
                  xAxisIndex: [0],
                  start: 0,
                  end: 100
                },
                {
                  type: 'inside',
                  yAxisIndex: [0],
                  start: 0,
                  end: 100
                }],
                series: [{
                  data: sjLineData,
                  type: 'line',
                  smooth: true,
                  // itemStyle: {
                  //   normal: {
                  //     color: '#275F82', //改变折线点的颜色
                  //     lineStyle: {
                  //       color: '#1890ff' //改变折线颜色
                  //     }
                  //   }
                  // }
                }, {
                  data: bzLineData,
                  type: 'line',
                  smooth: true
                }],
                tooltip: {
                  trigger: 'axis',
                  axisPointer: {
                    type: 'cross',
                    label: {
                      backgroundColor: '#6a7985'
                    }
                  }
                },
                toolbox: {
                  show: true,
                  x: '78%',
                  y: '0.5%',
                  feature: {
                    dataZoom: {
                      yAxisIndex: 'none'
                    }, //区域缩放，区域缩放还原
                    dataView: {
                      readOnly: false
                    }, //数据视图
                    magicType: {
                      type: ['bar', 'line']
                    },  //切换为柱状图，切换为折线图
                    restore: {},  //还原
                    saveAsImage: {}   //保存为图片
                  }
                }
              };

              option && myChart.setOption(option);
            } else {
              this.noLineChartsData = true;
              Message.warning('所选日期之内暂无数据，请重试')
            }
          });

        } else {
          // 散点图
          this.dialogTitle = '散点趋势图';
          let params = new URLSearchParams();
          params.append("recorddate", this.form.recorddate);
          params.append("wtId", wtId);
          this.API.post_L('wtcurve/scatterWtByDayAjax', params).then(res => {
            this.chartsLoading = false;
            let seriesDate = res.data.scatter; // 散点图数据
            let dataLine = res.data.line; // 折线图数据
            let mean = 0; // 基准线

            res.data.scatter.forEach(pEle => {
              pEle.forEach((cEle, cIndex) => {
                if (cIndex) mean += cEle;
              });
            });

            mean = (mean / res.data.scatter.length).toFixed(2);

            option = {
              title: {
                show: true,
                text: '风机功率风速排布情况',
                x: "center",
                y: "top",
                textAlign: "center",
                padding: [5, 0, 5, 0],
                textStyle: {
                  fontSize: 18,
                  color: '#333'
                }
              },
              xAxis: {},
              yAxis: {},
              dataZoom: [{
                type: 'slider',
                show: true,
                xAxisIndex: [0],
                start: 0,
                end: 100
              },
              {
                type: 'slider',
                show: true,
                yAxisIndex: [0],
                left: '92%',
                start: 0,
                end: 100
              },
              {
                type: 'inside',
                xAxisIndex: [0],
                start: 0,
                end: 100
              },
              {
                type: 'inside',
                yAxisIndex: [0],
                start: 0,
                end: 100
              }],
              series: [{
                name: ' ',
                type: 'line',
                symbol: 'none',
                smooth: 0.3,
                color: ['#87CEFA'],
                data: dataLine,
                lineStyle: {
                  normal: {
                    width: 5
                  }
                }
              }, {
                symbolSize: 5,
                data: seriesDate,
                type: 'scatter',
                color: ['#FF7F50'],
                markLine: {
                  symbol: "none",
                  /*symbol:"none",               //去掉警戒线最后面的箭头
                  label:{
                      position:"end"   ,       //将警示值放在哪个位置，三个值“start”,"middle","end"  开始  中点 结束
                  },*/
                  data: [{
                    silent: false,             //鼠标悬停事件  true没有，false有
                    lineStyle: {               //警戒线的样式  ，虚实  颜色
                      type: "solid",
                      color: "#3398DB",
                    },
                    label: {
                      position: 'start',
                      formatter: function (res) {
                        return '功率平均值:' + res.value;
                      }
                    },
                    yAxis: mean         // 警戒线的标注值，可以有多个yAxis,多条警示线   或者采用   {type : 'average', name: '平均值'}，type值有  max  min  average，分为最大，最小，平均值
                  }]
                },
                markPoint: {
                  label: {
                    show: true,
                    position: "inside",
                    distance: 7,
                    offset: [1, 1],
                    formatter: '{b}: {c}'
                  },
                  data: [{
                    name: '最大值',
                    type: 'max'
                  }, {
                    name: '最小值',
                    type: 'min'
                  }]
                }
              }],
              tooltip: {
                trigger: 'axis',
                axisPointer: {
                  type: 'cross',
                  label: {
                    backgroundColor: '#6a7985'
                  }
                }
              },
              toolbox: {
                show: true,
                x: '83.2%',
                y: '0.5%',
                feature: {
                  dataZoom: {
                    yAxisIndex: 'none'
                  }, //区域缩放，区域缩放还原
                  dataView: {
                    readOnly: false
                  }, //数据视图
                  magicType: {
                    type: []
                  },
                  restore: {},  //还原
                  saveAsImage: {}   //保存为图片
                }
              }
            };

            option && myChart.setOption(option);

          });
        }
      });
    },

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