<template>
  <div style="position: relative">
    <Chart ref="chart" :chartOption="option"  width="100%" height="100%"
      ></Chart>
  </div>
</template>
<script>

import Chart from '../chart.vue'
const MAX_LABEL = 8
export default {
  props: {
    // 父组件传递过来的图表数据
    // chartData: {
    //   type: Array,
    //   required: true
    // },
    highIssues:{
      type:Array,
      default:null
    }
  },
  components: {
    Chart
  },
  data() {
    return {
      tipStyle: { visibility: 'hidden', position: 'absolute', top: 0, left: 0 },
      tipContent: '',
      list: [{
        name: '电缆沟挖方：',
        value: 11
      },
      {
        name: '建筑用电：',
        value: 20
      }, {
        name: '保护接地或接零：',
        value: 13
      }, {
        name: '现场作业准备及布置：',
        value:9
      }, {
        name: '焊接：',
        value: 6
      }]
    }
  },

  watch: {
    // 监听父组件中的数据变化，重新触发Echarts
    // chartData: {
    //   deep: true,
    //   handler() {
    //     this.resetOption()
    //   }
    // },
    highIssues:{
      deep: true,
      handler() {
        this.resetOption()
      }
    }
  },

  computed: {
    option() {
      let dataX= []  //名称
      let dataY = [] //数量
      this.highIssues.forEach((item,index) => {
        dataX.push(item.name)
        dataY.push(item.count)
      });
      const self = this
      return {
        tooltip: {
        trigger: "axis",
        axisPointer: {
            type: "shadow",
            label: {
                show: false
            }
        }
    },
        grid: {
          left: '45',
          right: '58',
          bottom: '0',
          top: '36',
          containLabel: true
        },
        xAxis: {
          show: false,
          type: 'value',
          boundaryGap: [0, 0.01],
          splitLine: {
            show: false
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#078DF0',
              opacity: 0.3
            }
          },
          axisTick: {
            show: true,
            inside: true,
            lineStyle: {
              color: '#078DF0',
              opacity: 0.3
            }
          },
          axisLabel: {
            interval: 0, // 横轴信息全部显示
            fontSize: 13, // 横轴字体大小
            color: '#70A4E9' // 颜色
          }
        },
        yAxis: [
          {
            name: this.yAxisName,
            type: 'category',
            nameTextStyle: this.yNameTextStyle,
            data: this.yAxisData,
            position: this.yAxisPosition || null,
            // 刻度轴
            axisTick: {
              show: false
            },
            // 刻度线
            axisLine: {
              show: true,
              lineStyle: {
                color: '#fff',
              }
            },
            axisLabel: {
            show: true,
            inside: true,
            splitNumber: 50,
            boundaryGap: [20, 20],
            textStyle: {
              color: "#ADFFFE",
              verticalAlign: "bottom",
              align: "left",
              padding: [-20, 0, 14, 0],
            },
          },
            data:dataX,
            triggerEvent: true,
          }
        ],
        series: [
          {
            data: dataY,
            type: 'bar',
            barWidth: 16,
            barGap: '-30%',
            itemStyle: {
                normal: {
                    color: {
                        type: 'bar',
                        colorStops: [{
                            offset: 0,
                            color: '#00CAD9' // 0% 处的颜色
                        }, {
                            offset: 1,
                            color: '#00DBEF' // 100% 处的颜色
                        }],
                        globalCoord: false, // 缺省为 false
                    }
                },
            },
            label: {
              normal: {
                color: '#FFFFFF',
                show: true,
                position: 'right',
                textStyle: {
                  fontSize: 14,
                  fontWeight: 'bold'
                },
                formatter: function (data) {
                  return data.value+'次'
                }
              }
            }
          }
        ]
      }
    }
  },

  methods: {
    resetOption() {
      this.$refs.chart.setOption(this.option)
    },

  }
}
</script>

<style scoped>
</style>
