<template>
  <div class="bottom-right-table-1" style=" margin-left: 10px">
    <dv-border-box-13 style="width: 770px;height: 600px;">
      <div class="table-name">
        <div id="echart1" style="margin: auto; width: 770px; height: 600px"></div>
      </div>
    </dv-border-box-13>
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  name: 'BottomRightechart1',
  props: {
    tableData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      borderBoxKey: 1, // 初始化一个key值
      tablelist: [],
    }
  },
  watch: {
    // 监听 tableData 的变化，更新 config 中的 data
    tableData(newVal) {
      console.log("newVal-11111",newVal)
      this.tablelist = newVal;
      this.initChart1()
    }
  },
  methods: {
    initChart1() {
      const _this = this;
      var existingChart = echarts.getInstanceByDom(document.getElementById('echart1'));
      if (existingChart) {
        // 如果已经有实例，先销毁它
        existingChart.dispose();
      }
      var myChart1 = echarts.init(document.getElementById('echart1'));
      const CubeLeft = echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0
        },
        buildPath: function (ctx, shape) {
          const xAxisPoint = shape.xAxisPoint
          const c0 = [shape.x, shape.y]
          const c1 = [shape.x - 9, shape.y - 9]
          const c2 = [xAxisPoint[0] - 9, xAxisPoint[1] - 9]
          const c3 = [xAxisPoint[0], xAxisPoint[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 = echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0
        },
        buildPath: function (ctx, shape) {
          const xAxisPoint = shape.xAxisPoint
          const c1 = [shape.x, shape.y]
          const c2 = [xAxisPoint[0], xAxisPoint[1]]
          const c3 = [xAxisPoint[0] + 18, xAxisPoint[1] - 9]
          const c4 = [shape.x + 18, shape.y - 9]
          ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
        }
      })
      const CubeTop = echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0
        },
        buildPath: function (ctx, shape) {
          const c1 = [shape.x, shape.y]
          const c2 = [shape.x + 18, shape.y - 9]
          const c3 = [shape.x + 9, shape.y - 18]
          const c4 = [shape.x - 9, shape.y - 9]
          ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
        }
      })
      echarts.graphic.registerShape('CubeLeft', CubeLeft)
      echarts.graphic.registerShape('CubeRight', CubeRight)
      echarts.graphic.registerShape('CubeTop', CubeTop)
      let xAxisname = []
      let MAX = []
      let VALUE = []

      _this.tablelist.forEach((item) => {
        xAxisname.push(item.equipment_name)
      });
      for (let i = 0; i < _this.tablelist.length; i++) {
        MAX.push(100)
        VALUE.push(96+Math.floor(Math.random() * 5))
      }
      // VALUE = this.generateRandomNumbers(_this.tablelist.length);
      var option1 = {
        // backgroundColor: "#010d3a",
        title: {
          text: '',
          top: 32,
          left: 18,
          textStyle: {
            color: '#00F6FF',
            fontSize: 24
          }
        },
        grid: {
          left: 20,
          right: 40,
          bottom: '19%',
          top: 107,
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: xAxisname,
          axisLine: {
            show: true,
            lineStyle: {
              color: 'white'
            }
          },
          offset: 20,
          axisTick: {
            show: false,
            length: 9,
            alignWithLabel: true,
            lineStyle: {
              color: '#7DFFFD'
            }
          },
          axisLabel: {
            fontSize: 10
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: true,
            lineStyle: {
              color: 'white'
            }
          },
          max: '100',
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            fontSize: 16,
            formatter: "{value}%",
          },
          boundaryGap: ['20%', '20%']
        },
        series: [{
          type: 'custom',
          renderItem: function (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],
                  xAxisPoint: api.coord([api.value(0), 0])
                },
                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],
                  xAxisPoint: api.coord([api.value(0), 0])
                },
                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],
                  xAxisPoint: api.coord([api.value(0), 0])
                },
                style: {
                  fill: 'rgba(11,42,106,.8)'
                }
              }]
            }
          },
          data: MAX
        }, {
          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],
                  xAxisPoint: api.coord([api.value(0), 0])
                },
                style: {
                  fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#3B80E2'
                  },
                  {
                    offset: 1,
                    color: '#49BEE5'
                  }
                  ])
                }
              }, {
                type: 'CubeRight',
                shape: {
                  api,
                  xValue: api.value(0),
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0])
                },
                style: {
                  fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#3B80E2'
                  },
                  {
                    offset: 1,
                    color: '#49BEE5'
                  }
                  ])
                }
              }, {
                type: 'CubeTop',
                shape: {
                  api,
                  xValue: api.value(0),
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0])
                },
                style: {
                  fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#3B80E2'
                  },
                  {
                    offset: 1,
                    color: '#49BEE5'
                  }
                  ])
                }
              }]
            }
          },
          data: VALUE
        }, {
          type: 'bar',
          label: {
            normal: {
              show: true,
              position: 'top',
              formatter: (e) => {
                switch (e.name) {
                  case '10kV线路':
                    return VALUE[0]
                  case '公用配变':
                    return VALUE[1]
                  case '35kV主变':
                    return VALUE[2]
                  case '水':

                }
              },
              fontSize: 16,
              color: '#fff',
              offset: [4, -25]
            }
          },
          itemStyle: {
            color: 'transparent'
          },
          data: VALUE
        }]
      }
      myChart1.setOption(option1);
    },


    // 格式化 tableData 数据
  },
  mounted() {
    this.initChart1();
  }
};
</script>

<style lang="less" scoped>
.bottom-right-table-1 {
  width: calc(~"100% + 10px");
  height: 100%;
  margin: 0 -5px;


  .border-box-content {
    padding: 20px;
    box-sizing: border-box;
  }

  .table-name {
    height: 330px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;

    img {
      width: 79px;
      height: 30px;
      margin-right: 5px;
    }
  }

  .grid-container {
    display: grid;
    grid-template-rows: repeat(2, auto);
    /* 每行的高度为内容的高度 */
    gap: 10px;
    /* 调整行之间的垂直间距 */
  }

  .dv-scroll-board {
    height: calc(~"100% - 0px");
  }

}

::v-deep .dv-scroll-board .rows .ceil {
  border-bottom: 1px solid #ebeef4 !important;
}

/deep/ .dv-scroll-board {
  margin-top: 30px;
  padding: 0 10px;
}

/deep/ .dv-scroll-board .rows .row-item .ceil {
  font-size: 18px !important;
  height: 49px !important;
  line-height: 45px !important;
}

/deep/ .dv-scroll-board .header .header-item {
  font-size: 18px !important;
  height: 49px !important;
  line-height: 45px !important;
}
</style>
