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

<script>
import * as echarts from "echarts";
import {arCompanyMonthlyBar} from "../../../api/apiList";
import {convert_num_unit} from "../../../utils/numUtil";

export default {
  name: "ArCompanyMonthlyBar",
  data() {
    return {
      arCompanyMonthlyBar: null,
      barChart: {
        tooltip: {
          trigger: 'axis',
          formatter: (params) => params[0].name + "<br>" + params[0].marker + "\t" + this.convert_num_unit(params[0]) + "<br>" + params[1].marker + "\t" + params[1].data + "%",
        },
        title: {
          show: true,
          text: "XXXXXX股份有限公司 已开票未收款（开票月份）",
          left: "center",
          textStyle: {color: "white"}
        },
        textStyle: {
          color: "#FFFFFF",
          fontSize: "12"
        },
        grid: {
          containLabel: true,
          top: "10%",
          bottom: '10%'
        },
        xAxis: {
          data: ['2022-01', '2022-02', '2022-03', '2022-04', '2022-05', '2022-06', '2022-07', '2022-08',],
          axisLabel: {
            color: "#FFFFFF",
            fontSize: "12",
            interval: 0,
            rotate: 0
          },
          axisTick: {
            show: false
          }
        },
        yAxis: [{
          type: "value",
          splitLine: {
            lineStyle: {
              color: "#1E2C58"
            }
          },
          axisLabel: {
            show: false,
            color: "#FFFFFFAA",
            fontSize: "16"
          }
        }, {
          type: "value",
          position: "left",
          show: false,
          max: 100
        }],
        series: [
          {
            type: 'bar',
            data: [0, 0, 0, 0, 0, 0, 0, 0],
            barWidth: "40%",
            yAxisIndex: 0,
            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",
              formatter: this.convert_num_unit
            },
          },
          {
            type: "line",
            barWidth: "40%",
            yAxisIndex: 1,
            data: [0, 0, 0, 0, 0, 0, 0, 0],
            label: {
              show: true,
              color: "#FFFFFF",
              formatter: (params) => params.data + "%"
            }
          }
        ]
      },
    }
  },
  methods: {
    convert_num_unit,
    // 绘制图表
    drawArCompanyMonthlyBar() {
      if (!this.arCompanyMonthlyBar) {
        this.arCompanyMonthlyBar = echarts.init(document.getElementById('ar_company_monthly_bar'))

        // 监听窗口大小变化，重绘图表
        window.addEventListener('resize', this.resizeChart);
      }
      this.arCompanyMonthlyBar.setOption(this.barChart);
    },
    resizeChart() {
      if (this.arCompanyMonthlyBar) {
        this.arCompanyMonthlyBar.resize();
      }
    },
  },
  mounted() {
    // 调整图表标题
    let company = this.$route.query.company
    if (!company) {
      this.$router.push("/ar_bar/company")
    }
    this.barChart.title.text = company + " 已开票未收款（开票月份）"
    // 获取图表数据

    arCompanyMonthlyBar(company).then(res => {
      let data = res.data
      let xAxisData = []
      let seriesData0 = []
      let seriesData1 = []
      for (let item of data) {
        xAxisData.push(item.settle_month)
        seriesData0.push(item.unregister_amount)
        seriesData1.push(item.percentage)
      }
      this.barChart.xAxis.data = xAxisData
      this.barChart.series[0].data = seriesData0
      this.barChart.series[1].data = seriesData1
      this.drawArCompanyMonthlyBar()
    }).catch(err => {
      console.log(err);
    });
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.resizeChart);
  }
}
</script>
