import * as EC from 'echarts';
import { Message } from 'element-ui';
import BASE from '@tools/base';
const color = ["#014EB5", "#A800FF", "#e82edb", "#B5454C", "#443bff", "#e8cb25", "#3dffb0", "#e8a425", "#ff7aab", "#e84b1e", "#552ce2", "#ffae21", "#e8861e", "#d441ff", "#35e8e4", "#9c7aff", "#e86fd8", "#ffee38"];

/*
 *  获取 多柱状图 - 横向
 *  id: 元素ID
 *  x: ['月计划完成率1302%', '年计划完成率76%']
 *  data: [
      {
        name: '月计划完成率',
        type: 'bar',
        barWidth: 12,
        itemStyle: {
          color: this.ET.color[0],
          barBorderRadius: [0, 3, 3, 0] // 柱子圆角
        },
        data: [18203, 23489]
      },
      {
        name: '年计划完成率',
        type: 'bar',
        barWidth: 12,
        itemStyle: {
          color: this.ET.color[2],
          barBorderRadius: [0, 3, 3, 0] // 柱子圆角
        },
        data: [19325, 681807]
      }
    ]
 *  name: 提示框name
 * */
export function getBarsH(id, x, data) {
  if (data === undefined) {
    Message.error("没有找到报表数据，请检查！");
    return;
  }
  var myChart = EC.init(document.getElementById(id));
  let option = {
    tooltip: {
      // formatter: '{b0}<br />{a}: {c0}'
      formatter: function (params, ticket, callback) {
        return '<font style="font-size: 12px; color: #ddd">' + params.name + '</font><br />' + (params.seriesIndex === 0 ? "实际" : "计划") + '发电量(万KW)：<b>' + BASE.getNewNum(params.value) + '</b>';
        // return params.name+': '+params.seriesIndex+'<br />'+params.seriesName+': '+params.data.value;
      }
    },
    grid: {
      top: 10,
      left: 110,
      right: 20,
      bottom: 30,
    },
    xAxis: {
      type: 'value',
      boundaryGap: [0, 0.01],
      minInterval: 1, // 刻度不出现小数
      axisLine: {
        lineStyle: {
          color: "#CCC"
        }
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        fontSize: 10,
        color: "#333",
        formatter: function (value, index) {
          if (value > 10000) {
            return value / 10000 + 'w';
          } else {
            return value;
          }
        }
      },
    },
    yAxis: {
      type: 'category',
      data: x,
      axisLine: {
        lineStyle: {
          color: "#CCC"
        }
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        fontSize: 10,
        color: "#333"
      },
      splitLine: {
        show: false
      }
    },
    series: data
  };
  myChart.setOption(option, true);
}

/*
 *  获取 多柱状图 - 纵向
 *  id: 元素ID
 *  x: ['00\n00', '00\n30','01\n00', '01\n30','02\n00', '02\n30','03\n00', '03\n30',]
 *  data: [
      {
        name: '月计划完成率',
        type: 'bar',
        barWidth: 12,
        itemStyle: {
          color: this.ET.color[0],
          barBorderRadius: [0, 3, 3, 0] // 柱子圆角
        },
        data: [18203, 23489]
      },
      {
        name: '年计划完成率',
        type: 'bar',
        barWidth: 12,
        itemStyle: {
          color: this.ET.color[2],
          barBorderRadius: [0, 3, 3, 0] // 柱子圆角
        },
        data: [19325, 681807]
      }
    ]
 *  name: 提示框name
 * */
export function getBarsV(id, legendData, x, data) {
  if (data === undefined) {
    Message.error("没有找到报表数据，请检查！");
    return;
  }
  let maxMin = getMax(data); // 计算最大值
  var myChart = EC.init(document.getElementById(id));
  let option = {
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      orient: 'vertical',
      right: 10,
      top: 10,
      data: legendData
    },
    grid: {
      top: 35,
      left: 60,
      right: 220,
      bottom: 30,
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      boundaryGap: true, // 坐标两边留白策略 - 点在两个坐标中间
      data: x,
      axisLine: {
        lineStyle: {
          color: "#C8D6E4"
        }
      },
      axisTick: {
        lineStyle: {
          color: "#C8D6E4"
        }
      },
      axisLabel: {
        color: "#333"
      },
    },
    yAxis: [{
      type: 'value',
      name: '发电量(万kW/h)',
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      min:maxMin[0][1], // 最小值
      max:maxMin[0][0], // 最大值
      splitNumber:5, // 刻度数
      interval: (maxMin[0][0]-maxMin[0][1])/5 //强制设置刻度间隔
    },
    {
      type: 'value',
      name: '风速(m/s)',
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      min:maxMin[1][1], // 最小值
      max:maxMin[1][0], // 最大值
      splitNumber:5, // 刻度数
      interval: (maxMin[1][0]-maxMin[1][1])/5 //强制设置刻度间隔
    }],
    series: data
  };
  myChart.setOption(option, true);
}

/*
 *  获取 折线图
 *  id: 元素ID
 *  x: ['00\n00', '00\n30','01\n00', '01\n30','02\n00', '02\n30','03\n00', '03\n30',]
 *  data: [
      {
        name: '月计划完成率',
        type: 'bar',
        barWidth: 12,
        itemStyle: {
          color: this.ET.color[0],
          barBorderRadius: [0, 3, 3, 0] // 柱子圆角
        },
        data: [18203, 23489]
      },
      {
        name: '年计划完成率',
        type: 'bar',
        barWidth: 12,
        itemStyle: {
          color: this.ET.color[2],
          barBorderRadius: [0, 3, 3, 0] // 柱子圆角
        },
        data: [19325, 681807]
      }
    ]
 *  name: 提示框name
 * */
export function getLine(id, legendData, x, data) {
  if (data === undefined) {
    Message.error("没有找到报表数据，请检查！");
    return;
  }
  let max = getMax(data); // 计算最大值
  var myChart = EC.init(document.getElementById(id));
  let option = {
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      orient: 'vertical',
      right: 10,
      top: 20,
      data: legendData
    },
    grid: {
      top: 35,
      left: 60,
      right: 210,
      bottom: 40,
    },
    xAxis: {
      type: 'category',
      boundaryGap: true, // 坐标两边留白策略 - 点在两个坐标中间
      data: x,
      axisLine: {
        lineStyle: {
          color: "#C8D6E4"
        }
      },
      axisTick: {
        lineStyle: {
          color: "#C8D6E4"
        }
      },
      axisLabel: {
        color: "#333"
      },
    },
    yAxis: [{
      type: 'value',
      name: '功率数值(MW)',
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      min: 0,
      max: max[0],
      splitNumber: 5,
      interval: max[0]/5
    },
    {
      type: 'value',
      name: '平均风速/日照强度',
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      min: 0,
      max: max[1],
      splitNumber: 5,
      interval: max[1]/5
    }],
    series: data
  };
  myChart.setOption(option, true);
}
// 获取最大值
export function getMax(data) {
  let d1 = [];
  let d0 = [];
  data.forEach((item)=>{
    if(item.yAxisIndex === 1){
      d1 = d1.concat(item.data)
    }else{
      d0 = d0.concat(item.data)
    }
  });
  return [BASE.numberCeil(Math.max.apply(null,d0)), BASE.numberCeil(Math.max.apply(null,d1))]
}

/*
 *  获取 仪表
 *  id: 元素ID
 *  x: ['00\n00', '00\n30','01\n00', '01\n30','02\n00', '02\n30','03\n00', '03\n30',]
 *  data: [
      {
        name: '月计划完成率',
        type: 'bar',
        barWidth: 12,
        itemStyle: {
          color: this.ET.color[0],
          barBorderRadius: [0, 3, 3, 0] // 柱子圆角
        },
        data: [18203, 23489]
      },
      {
        name: '年计划完成率',
        type: 'bar',
        barWidth: 12,
        itemStyle: {
          color: this.ET.color[2],
          barBorderRadius: [0, 3, 3, 0] // 柱子圆角
        },
        data: [19325, 681807]
      }
    ]
 *  name: 提示框name
 * */
export function getGaugesH(id, data) {
  if (data === undefined) {
    Message.error("没有找到报表数据，请检查！");
    return;
  }
  var myChart = EC.init(document.getElementById(id));
  let option = {
    tooltip: {
      formatter: "{a} <br/>{c} {b}"
    },
    series: data
  };
  myChart.setOption(option, true);
}


export default {
  getGaugesH,

  getBarsH,
  getBarsV,

  getLine,

  color,
}
