<template>
  <div id="ar_summary_bar"/>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "ArSummaryBar",
  data() {
    return {
      arSummaryBar: null,
      barChart: {
        textStyle: {
          color: "#FFFFFF",
          fontSize: "12"
        },
        grid: {
          containLabel: true,
          top: "10%",
          bottom: '0'
        },
        xAxis: {
          data: ['未结算未开票', '已结算未开票', '已开票未收款', '应收款', '已开票已收款'],
          axisLabel: {
            color: "#FFFFFF",
            fontSize: "12",
          },
          axisTick: {
            show: false
          }
        },
        yAxis: {
          type: "value",
          splitLine: {
            lineStyle: {
              color: "#1E2C58"
            }
          },
          axisLabel: {
            show: false,
            color: "#FFFFFFAA",
            fontSize: "16"
          }
        },
        series: {
          type: 'bar',
          data: [0, 0, 0, 0, 0],
          barWidth: "40%",
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(255, 255, 255, 0.1)'
          },
          itemStyle: {
            borderRadius: 10,
          },
          color: {
            type: 'linear',
            x: 0, y: 0, x2: 0, y2: 1,
            colorStops: [
              {offset: 0, color: '#00CCD2'},
              {offset: 1, color: '#00A2FF'}
            ]
          },
          label: {
            show: true,
            position: 'top',
            color: "#FFFFFF",
          },
        }
      },
    }
  },
  methods: {
    drawArSummaryBar(seriesData) {
      if (!this.arSummaryBar) {
        this.arSummaryBar = echarts.init(document.getElementById('ar_summary_bar'))
      }
      this.barChart.series.data = seriesData
      this.arSummaryBar.setOption(this.barChart);
    },
    resizeChart() {
      if (this.arSummaryBar) {
        this.arSummaryBar.resize();
      }
    }
  },
  mounted() {
    window.addEventListener('resize', this.resizeChart);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.resizeChart);
  }

}

</script>