<template>
  <div :id="idName" :style="{ height: height, width: width }" />
</template>
<script>
export default {
  props: {
    idName: { type: String, default: 'chart' },
    width: { type: String, default: '100%' },
    height: { type: String, default: '183px' },
    chartData: { type: Array, default: () => [] },
    desc: { type: String, default: '' }
  },
  data() {
    return {
      dataX: [],
      dataY: [],
      maxData: [],
      disabled: false
    }
  },
  watch: {
    chartData: {
      handler(val, olVal) {
        this.initFun()
      },
      deep: true
    }
  },
  mounted() {
    this.initFun()
  },
  methods: {
    initFun() {
      if (this.chartData && this.chartData.length > 0) {
        this.dataX = []
        this.dataY = []
        this.chartData.forEach(item => {
          this.dataX.unshift(item.value)
          this.dataY.unshift(item.name)
        })
      }

      this.$nextTick(() => {
        this.chartData.forEach(item => {
          this.maxData.unshift({
            value: Math.max(...this.dataX),
            name: item.name,
            values: item.value
          })
        })
        this.visionFun()
      })
    },
    visionFun() {
      // 基于准备好的dom，初始化echarts实例
      const monthTopEcharts = this.$echarts.init(document.getElementById(this.idName))
      // 定义图形
      const CubeLeft = this.$echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0
        },
        buildPath: function(ctx, shape) {
        //   console.log(ctx, shape)
          const yAxisPoint = shape.yAxisPoint
          const c0 = [shape.x, shape.y]
          const c1 = [shape.x + 4, shape.y - 4]
          const c2 = [yAxisPoint[0] + 4, yAxisPoint[1] - 4]
          const c3 = [yAxisPoint[0], yAxisPoint[1]]
          ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath()
        }
      })
      const CubeRight = this.$echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0
        },
        buildPath: function(ctx, shape) {
          const yAxisPoint = shape.yAxisPoint
          const c1 = [shape.x, shape.y]
          const c2 = [yAxisPoint[0], yAxisPoint[1]]
          const c3 = [yAxisPoint[0] + 4, yAxisPoint[1] + 8]
          const c4 = [shape.x + 4, shape.y + 8]
          ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
        }
      })
      const CubeTop = this.$echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0
        },
        buildPath: function(ctx, shape) {
          const c1 = [shape.x, shape.y]
          const c2 = [shape.x + 4, shape.y + 8]
          const c3 = [shape.x + 8, shape.y + 4]
          const c4 = [shape.x + 4, shape.y - 4]
          ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
        }
      })
      this.$echarts.graphic.registerShape('CubeLeft', CubeLeft)
      this.$echarts.graphic.registerShape('CubeRight', CubeRight)
      this.$echarts.graphic.registerShape('CubeTop', CubeTop)
      // 基于准备好的dom，初始化echarts实例
      monthTopEcharts.setOption({
        backgroundColor: 'transparent',
        yAxis: {
          type: 'category',
          data: this.dataY,
          axisLine: {
            show: false,
            lineStyle: {
              color: 'white'
            }
          },
          axisTick: {
            show: false
          },
          offset: 5,
          axisLabel: {
            show: true,
            margin: 6,
            formatter: (params) => {
              var val = ''
              if (params.length > 5) {
                val = params.substr(0, 5) + '...'
                return val
              } else {
                return params
              }
            }
          }
        },
        xAxis: {
          type: 'value',
          show: false
        },
        tooltip: {
          show: true,
          // backgroundColor: '#fff', // 通过设置rgba调节背景颜色与透明度
          formatter: '{b}',
          position: 'left'
          // color: '#000'
        },
        grid: {
          left: '20%',
          right: '25%',
          bottom: '2%',
          top: '3%'
        },
        series: [
          // 下面背景立体图
          {
            type: 'custom',
            emphasis: {
              scale: false
            },
            // 图形渲染的逻辑
            renderItem: function(params, api) {
              const location = api.coord([api.value(0), api.value(1)])
              // 一组图形元素--每个图形元素是一个 object
              return {
                type: 'group', // 一组
                children: [{
                  type: 'CubeLeft', // 上方自定义的图形
                  shape: {
                    api,
                    xValue: api.value(0),
                    yValue: api.value(1),
                    x: location[0],
                    y: location[1],
                    yAxisPoint: api.coord([0, api.value(1)])
                  },
                  style: {
                    fill: 'rgba(7,29,97,.6)'
                  }
                }, {
                  type: 'CubeRight', // 上方自定义的图形
                  shape: {
                    api,
                    xValue: api.value(0),
                    yValue: api.value(1),
                    x: location[0],
                    y: location[1],
                    yAxisPoint: api.coord([0, api.value(1)])
                  },
                  style: {
                    fill: 'rgba(10,35,108,.7)'
                  }
                }, {
                  type: 'CubeTop', // 上方自定义的图形
                  shape: {
                    api,
                    xValue: api.value(0),
                    yValue: api.value(1),
                    x: location[0],
                    y: location[1],
                    yAxisPoint: api.coord([0, api.value(1)])
                  },
                  style: {
                    fill: 'rgba(11,42,106,.8)'
                  }
                }]
              }
            },
            data: this.maxData
          },
          // 上面实际数据
          {
            type: 'custom',
            renderItem: (params, api) => {
              const location = api.coord([api.value(0), api.value(1)])
              return {
                type: 'group',
                children: [{
                  type: 'CubeLeft',
                  shape: {
                    api,
                    xValue: api.value(0),
                    yValue: api.value(1),
                    x: location[0],
                    y: location[1],
                    yAxisPoint: api.coord([0, api.value(1)])
                  },
                  style: {
                    fill: new this.$echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                      offset: 0,
                      color: '#00FFFF'
                    },
                    {
                      offset: 1,
                      color: '#49BDE5'
                    }
                    ])
                  }
                }, {
                  type: 'CubeRight',
                  shape: {
                    api,
                    xValue: api.value(0),
                    yValue: api.value(1),
                    x: location[0],
                    y: location[1],
                    yAxisPoint: api.coord([0, api.value(1)])
                  },
                  style: {
                    fill: new this.$echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                      offset: 0,
                      color: '#00FFFF'
                    },
                    {
                      offset: 1,
                      color: ' #49BDE5'
                    }
                    ])
                  }
                }, {
                  type: 'CubeTop',
                  shape: {
                    api,
                    xValue: api.value(0),
                    yValue: api.value(1),
                    x: location[0],
                    y: location[1],
                    yAxisPoint: api.coord([0, api.value(1)])
                  },
                  style: {
                    fill: new this.$echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                      offset: 0,
                      color: '#00FFFF'
                    },
                    {
                      offset: 1,
                      color: '#49BDE5'
                    }
                    ])
                  }
                }]
              }
            },
            data: this.dataX
          },
          // 数值显示
          {
            type: 'bar',
            label: {
              show: true,
              position: 'right',
              offset: [20, 3],
              fontSize: 16,
              color: '#FFC700',
              formatter: (params) => {
                return params.data.values
              }
            },
            itemStyle: {
              color: 'transparent'
            },
            data: this.maxData
          }]
      })
      window.addEventListener('resize', () => { monthTopEcharts.resize() })
    }
  }
}

</script>
<style style="scss" scoped>
</style>
