const option1BarColor = ['#95A8CB','#77C5D5','#9BCBEB','#9FAEE5','#DEC9A3','#D59696','#D7ABD5','#BCC1CA'];

const option1 = {
  tooltip: {
    trigger: 'item',
    position: 'inside',
    padding: [0, 2],
    formatter: (a) => { return a.name.replaceAll('\n', '') + ':' + a.value },
    textStyle: {
      color: '#95A8CB'
    }
  },
  grid: {
    left: '13%',
    height: '79%',
    width: '74%',
    y: '-7%',
  },
  xAxis: {
    offset: 5,
    axisTick: {
      show: false,
    },
    axisLine: {
      onZero: false,
      lineStyle: {
        color: '#E9F0FE',
        width: 2
      },
    },
    axisLabel:{textStyle: { fontSize: 8, color: '#95A8CB' }},
    type: 'category',
    data: [],
  },
  yAxis: {
    axisTick: {
      show: false,
    },
    axisLine: {
      show: false,
    },
    axisLabel: {
      show: false,
    },
    splitLine: {
      lineStyle: {
        type: 'dashed',
        color: '#95A8CB',
        opacity: 0.37
      }
    },
    min: 0,
    splitNumber: 3
  },
  series: [
    {
      barMinHeight:5,
      barWidth: '20px',
      data: [],
      type: 'bar'
    }
  ]
};

// const option2 = {
//   grid: {
//     left: '15%',
//     top: '0%',
//     height: '80%',
//     width: '60%',
//     y: '-7%',
//   },
//   xAxis: {
//     axisTick: {
//       show: false,
//     },
//     axisLine: {
//       show: false,
//     },
//     axisLabel: {
//       show: false,
//     },
//     splitLine: {
//       show: false
//     }
//   },
//   yAxis: [
//     {
//       type: 'category',
//       "inverse":true,
//       axisTick: {
//         show: false,
//       },
//       axisLine: {
//         show: false,
//       },
//       axisLabel:{
//         textStyle: { fontSize: 10, color: '#1B365D' }
//       },
//       data: [],
//       splitLine: {
//         show: false,
//       }
//     },
//     {
//       type: 'category',
//       inverse: true,
//       axisTick: 'none',
//       axisLine: 'none',
//       show: true,
//       axisLabel: {
//         textStyle: {
//           color: '#95A8CB',
//           fontSize: '10'
//         },
//         formatter: (value) => {
//           return '￥ '+value+ '.00';
//         },
//       },
//       data:[]
//     },
//   ],
//   series: [
//     {
//       showBackground: true,
//       backgroundStyle: {
//         color: '#F8F9FD',
//         barBorderRadius: 8,
//       },
//       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 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: '#F8F9FD',
        barBorderRadius: 6,
      },
      barWidth: '6px',
      itemStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 1,
          y2: 1,
          colorStops: [{
            offset: 0, color: '#11B7C6'
          }, {
            offset: 1, color: '#73D5E2'
          }],
          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;
  /* 1：正常的纵向 2：横向标题在左 3：横向标题在上*/
  if(optionType === 1){
    options = {...option1}
    options.xAxis.data = data.map(it=>it[labelKey].length>2?(it[labelKey].substring(0,2)+'\n'+it[labelKey].substring(2,4)):it[labelKey])
    options.series[0].data = data.map((it,index)=>{return {value:getWAmount(it[valueKey]/10000),itemStyle: {color: option1BarColor[index],barBorderRadius: 1}}})

    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]/10000))
    options.series[0].data = data.map(it=>getWAmount(it[valueKey]/10000))
    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]/10000))
    options.series[0].data = data.map(it=>getWAmount(it[valueKey]/10000))
    return options
  }
}

module.exports = {getOpData};


