const option1 = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      crossStyle: {
        color: '#999'
      }
    }
  },
  grid: {
    left: '17%',
    width: '68%',
    // y: '-7%',
  },
  legend: {
    data: ['销售毛利', '销售毛利率'],
    left: '0%',
    // top: '1%'
  },
  xAxis: [
    {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      axisPointer: {
        type: 'shadow'
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: '销售毛利',

      // interval: 50,
      axisLabel: {
        formatter: '￥{value}'
      }
    },
    {
      type: 'value',
      name: '销售毛利率',
      // min: 0,
      // max: 100,
      // min: 0,
      // max: 25,
      // interval: 5,
      axisLabel: {
        formatter: '{value}%'
      }
    }
  ],
  series: [
    {
      name: '销售毛利',
      type: 'bar',
      color: '#41be92',
      tooltip: {
        // valueFormatter: function (value) {
        //   return value + ' ml';
        // }
      },
      data: [
        2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
      ]
    },
    {
      name: '销售毛利率',
      type: 'line',
      color: '#efc25b',
      yAxisIndex: 1,
      tooltip: {
        // valueFormatter: function (value) {
        //   return value + ' ml';
        // }
      },
      data: [
        2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
      ]
    }
  ]
};

const option2 = {
  grid: {
    left: '6%',
    top: '4%',
    height: '90%',
    width: '70%',
    y: '-7%',
  },
  xAxis: {
    axisTick: {
      show: false,
    },
    axisLine: {
      show: false,
    },
    axisLabel: {
      show: false,
    },
    splitLine: {
      show: false
    }
  },
  yAxis: [
    {
      type: 'category',
      inverse:true,
      axisLabel: {
        verticalAlign: "bottom",
        align: "left",
        padding: [0, 20, 8, 10],
        textStyle: {
          fontSize: 10,
          color: "#1B365D",
        }
      },
      data: [],
      yAxisIndex: 0,
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
      },
    },
    {
      type: 'category',
      inverse: true,
      axisTick: 'none',
      axisLine: 'none',
      show: true,
      axisLabel: {
        textStyle: {
          color: '#95A8CB',
          fontSize: '10'
        },
        formatter: (value) => {
          return '￥ '+value;
        },
      },
      data:[]
    },
  ],
  series: [
    {
      showBackground: true,
      backgroundStyle: {
        color: '#F8F9FD',
        barBorderRadius: 6,
      },
      barWidth: '6px',
      itemStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 1,
          y2: 1,
          colorStops: [{
            offset: 0, color: '#FFC259' 
          }, {
            offset: 1, color: '#FFE3AF'
          }],
          global: false 
        },
        barBorderRadius: 8,
      },
      data: [],
      type: 'bar'
    }
  ]
};

const option3 = {
  grid: {
    left: '6%',
    top: '4%',
    height: '90%',
    width: '70%',
    y: '-7%',
  },
  xAxis: {
    axisTick: {
      show: false,
    },
    axisLine: {
      show: false,
    },
    axisLabel: {
      show: false,
    },
    splitLine: {
      show: false
    }
  },
  yAxis: [
    {
      type: 'category',
      inverse:true,
      axisLabel: {
        verticalAlign: "bottom",
        align: "left",
        padding: [0, 20, 8, 10],
        textStyle: {
          fontSize: 10,
          color: "#1B365D",
        }
      },
      data: [],
      yAxisIndex: 0,
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
      },
    },
    {
      type: 'category',
      inverse: true,
      axisTick: 'none',
      axisLine: 'none',
      show: true,
      axisLabel: {
        textStyle: {
          color: '#95A8CB',
          fontSize: '10'
        },
        formatter: (value) => {
          return '￥ '+value;
        },
      },
      data:[]
    },
  ],
  series: [
    {
      showBackground: true,
      backgroundStyle: {
        color: '#f1f4f9',
        barBorderRadius: 6,
      },
      barWidth: '6px',
      itemStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 1,
          y2: 1,
          colorStops: [{
            offset: 0, color: '#85a0f8'
          }],
          global: false 
        },
        barBorderRadius: 8,
      },
      data: [],
      type: 'bar'
    }
  ]
};

const getWAmount = (number)=>{
	  number =	number.toFixed(2);
    var arr = number.split('.')
		return parseInt(arr[0]).toLocaleString()+'.'+arr[1]
}

const getOpData = (data,labelKey,valueKey,optionType)=>{
  let options;

  //简化为万元 改为10000 不简化为1
  let divisor = 1

  /* 1：正常的纵向 2：横向标题在左 3：横向标题在上*/
  if(optionType === 1){
    options = {...option1}
    options.xAxis[0].data = data.map(it=>it[labelKey])
    options.series[0].data = data.map(it=>it.profit)
    options.series[1].data = data.map(it=>it.profitRate)
    return options;
  }
  if(optionType === 2){
    options = {...option2} /** 业务员姓名太长 type2也用type3的展现形式 单独换下颜色*/
    options.yAxis[0].data = data.map(it=>it[labelKey])
    options.yAxis[1].data = data.map(it=>getWAmount(it[valueKey]/divisor))
    options.series[0].data = data.map(it=>getWAmount(it[valueKey]/divisor))
    return options
  }
  if(optionType === 3){
    options = {...option3}
    options.yAxis[0].data = data.map(it=>it[labelKey])
    options.yAxis[1].data = data.map(it=>getWAmount(it[valueKey]/divisor))
    options.series[0].data = data.map(it=>getWAmount(it[valueKey]/divisor))
    return options
  }
}

module.exports = {getOpData};


