import * as echarts from 'echarts'

interface ThreeDBarOptionConfig {
  xData: string[]
  yData: number[]
  barWidth?: number
  colorConfig?: {
    left0?: string
    left08?: string
    top03?: string
    top1?: string
  }
}

export function getThreeDBarOption({ xData, yData, barWidth = 30, colorConfig = {} }: ThreeDBarOptionConfig) {
  // 注册 shape 只需一次，防止多次注册报错
  if (!(echarts.graphic as any).registered3DBar) {
    const leftShape = echarts.graphic.extendShape({
      buildPath(ctx: any, shape: any) {
        const { topBasicsYAxis, bottomYAxis, basicsXAxis } = shape
        const WIDTH = 15
        const OBLIQUE_ANGLE_HEIGHT = 8
        const p1 = [basicsXAxis - WIDTH, topBasicsYAxis - OBLIQUE_ANGLE_HEIGHT]
        const p2 = [basicsXAxis - WIDTH, bottomYAxis]
        const p3 = [basicsXAxis, bottomYAxis]
        const p4 = [basicsXAxis, topBasicsYAxis]
        ctx.moveTo(p1[0], p1[1])
        ctx.lineTo(p2[0], p2[1])
        ctx.lineTo(p3[0], p3[1])
        ctx.lineTo(p4[0], p4[1])
      }
    })
    const rightShape = echarts.graphic.extendShape({
      buildPath(ctx: any, shape: any) {
        const { topBasicsYAxis, bottomYAxis, basicsXAxis } = shape
        const WIDTH = 15
        const OBLIQUE_ANGLE_HEIGHT = 2
        const p1 = [basicsXAxis, topBasicsYAxis]
        const p2 = [basicsXAxis, bottomYAxis]
        const p3 = [basicsXAxis + WIDTH, bottomYAxis]
        const p4 = [basicsXAxis + WIDTH, topBasicsYAxis - OBLIQUE_ANGLE_HEIGHT]
        ctx.moveTo(p1[0], p1[1])
        ctx.lineTo(p2[0], p2[1])
        ctx.lineTo(p3[0], p3[1])
        ctx.lineTo(p4[0], p4[1])
      }
    })
    const topShape = echarts.graphic.extendShape({
      buildPath(ctx: any, shape: any) {
        const { topBasicsYAxis, basicsXAxis } = shape
        const WIDTH = 15
        const OBLIQUE_ANGLE_HEIGHT = 8
        const p1 = [basicsXAxis, topBasicsYAxis]
        const p2 = [basicsXAxis + WIDTH, topBasicsYAxis - OBLIQUE_ANGLE_HEIGHT]
        const p3 = [basicsXAxis, topBasicsYAxis - OBLIQUE_ANGLE_HEIGHT * 2]
        const p4 = [basicsXAxis - WIDTH, topBasicsYAxis - OBLIQUE_ANGLE_HEIGHT]
        ctx.moveTo(p1[0], p1[1])
        ctx.lineTo(p2[0], p2[1])
        ctx.lineTo(p3[0], p3[1])
        ctx.lineTo(p4[0], p4[1])
      }
    })
    echarts.graphic.registerShape('leftShape', leftShape)
    echarts.graphic.registerShape('rightShape', rightShape)
    echarts.graphic.registerShape('topShape', topShape)
    ;(echarts.graphic as any).registered3DBar = true
  }

  return {
    tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
    grid: { left: '3%', right: '4%', bottom: '3%', top: "12%", containLabel: true },
    xAxis: [{
      type: 'category',
      data: xData,
      axisTick: { alignWithLabel: true },
      axisLine: { lineStyle: { color: '#3ec6ff' } },
      axisLabel: { color: '#fff' }
    }],
    yAxis: [{
      type: 'value',
      axisLine: { show: false },
      splitLine: { lineStyle: { color: '#1b4a7a' } },
      axisLabel: { color: '#fff' }
    }],
    series: [{
      type: 'custom',
      data: yData,
      barWidth,
      renderItem(params: any, api: any) {
        const basicsCoord = api.coord([api.value(0), api.value(1)])
        const topBasicsYAxis = basicsCoord[1]
        const basicsXAxis = basicsCoord[0]
        const bottomYAxis = api.coord([api.value(0), 0])[1]
        return {
          type: 'group',
          children: [
            {
              type: 'leftShape',
              shape: { topBasicsYAxis, basicsXAxis, bottomYAxis },
              style: {
                fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: colorConfig.left0 || '#2ADBEF' },
                  { offset: 1, color: colorConfig.left08 || '#2677F9 ' },
                ])
              }
            },
            {
              type: 'rightShape',
              shape: { topBasicsYAxis, basicsXAxis, bottomYAxis },
              style: {
                fill: '#114EAD '
              }
            },
            {
              type: 'topShape',
              shape: { topBasicsYAxis, basicsXAxis, bottomYAxis },
              style: {
                fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0.3, color: colorConfig.top03 || '#6DF0FF' },
                  { offset: 1, color: colorConfig.top1 || '#6DF0FF' }
                ])
              }
            }
          ]
        }
      }
    }]
  }
}