<template>
  <div class="bgLeftBottomBox">
    <div class="h-full" ref="echartsContainer"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { GetMonitorFirstOperationMonth } from '@/api/operation';
let chart = null;
export default {
  data() {
    return {
      chartOptions: {
        grid: {
          top: '13%',
          left: '13%',
          right: '10%',
          bottom: '13%',
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: [],
          axisLabel: {
            fontSize: '16px',
            color: '#5D49AF',
            fontFamily: 'panmen',
          },
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value}%',
            fontSize: '16px',
            color: '#5D49AF',
            fontFamily: 'panmen',
            opacity: 0.6
          },
          splitLine: {
            lineStyle: {
              color: '#624D96',
              width: 0.1,
            },
          },
        },
        series: [
          {
            data: [],
            type: 'line',
            smooth: true,
            itemStyle: {
              color: '#7052E8',
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgba(156, 132, 255, 0.6)',
                  },
                  {
                    offset: 1,
                    color: 'rgba(186, 169, 255, 0.15)',
                  },
                ],
              },
            },
          },
        ],
      },
      isLoading: true,
    };
  },
  methods: {
    onGetPageData() {
      GetMonitorFirstOperationMonth().then(res => {
        this.chartOptions['xAxis']['data'] = [];
        this.chartOptions['series'][0]['data'] = [];
        res['data'].forEach(item => {
          this.chartOptions['xAxis']['data'].push(item['monthName']);
          this.chartOptions['series'][0]['data'].push(item['firstPunctualityRate'].slice(0, -1));
        });
        chart.setOption(this.chartOptions);
        this.isLoading = false;
      });
    },
  },
  mounted() {
    chart = echarts.init(this.$refs.echartsContainer);
    this.onGetPageData();
    setInterval(() => {
      this.onGetPageData();
    }, this.$store.getters.intervalTime);
    window.addEventListener("resize", () => {
      chart.resize();
    });
  },
};
</script>

<style lang="scss" scoped>
.bgLeftBottomBox {
  margin-top: vh(20);
  width: vw(560);
  height: vh(358);
  background-image: url('@/assets/svg/Operation/LeftBottom/Box.svg');
  background-size: 107%;
  background-position: center;
  background-repeat: no-repeat;
}
</style>
