<template>
  <div class="j-progress-chart" ref="JProgressChart"></div>
</template>

<script>
import echarts from 'echarts4'
export default {
  props: {
    grid: {
      type: Array,
      default: () => ['10', '8%', '10', '10']
    },
    seriesData: {
      required: true,
      type: Array,
      default: () => []
    },
    yData: {
      required: true,
      type: Array,
      default: () => []
    }
  },
  mounted() {
    this.JProgressChart = echarts.init(this.$refs.JProgressChart)
    this.createChart()
  },
  data() {
    return { JProgressChart: null }
  },
  methods: {
    createChart() {
      const { grid, seriesData, yData } = this
      const max = Math.max(...seriesData)
      const maxData = seriesData.map(item => max)
      const option = {
        grid: {
          top: grid[0],
          right: grid[1],
          bottom: grid[2],
          left: grid[3],
          containLabel: true
        },
        xAxis: {
          type: 'value',
          axisLabel: {
            formatter: () => ''
          },
          splitLine: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        yAxis: {
          type: 'category',
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          data: yData,
          axisLabel: {
            textStyle: {
              fontSize: 12,
              color: '#fff'
            }
          }
        },
        series: [
          {
            type: 'bar',
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                { offset: 0, color: '#4A90E2' },
                { offset: 1, color: '#4ADEE2' }
              ]),
              barBorderRadius: 3
            },
            label: {
              show: true,
              position: 'right',
              color: 'white',
              textStyle: {
                fontSize: 15
              }
            },
            data: seriesData,
            barWidth: 13
          },
          {
            type: 'bar',
            itemStyle: {
              color: 'rgba(255, 255, 255, 0.1)',
              barBorderRadius: 3
            },
            // label: {
            //   show: true,
            //   position: 'right',
            //   color: 'white',
            //   textStyle: {
            //     fontSize: 15
            //   }
            // },
            barGap: '-100%',
            barCategoryGap: '40%',
            data: maxData,
            barWidth: 13,
            animation: false
          }
        ]
      }
      this.JProgressChart.setOption(option)
    }
  }
}
</script>

<style>
.j-progress-chart {
  width: 100%;
  height: 100%;
}
</style>
