<template>
  <div class="h-[32.4vh] mt-[2.77vh] bgLeftBottomBox pt-[3.24vh]" v-loading="isLoading">
    <div class="w-[43.79vh] h-[26.85vh] mx-auto" 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: ['3月', '4月', '5月', '6月', '7月', '8月'],
          axisLabel: {
            color: '#fff',
            fontFamily: 'DIN-Bold,Microsoft YaHei',
          },
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value}%',
            color: '#fff',
            fontFamily: 'DIN-Bold,Microsoft YaHei',
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(0,142,114,0.3)',
              width: 0.5,
            },
          },
        },
        series: [
          {
            data: [95, 97, 96, 98, 99, 96],
            type: 'line',
            itemStyle: {
              color: '#30FDFF',
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgba(0, 128, 255, 0.7)', // 开始颜色
                  },
                  {
                    offset: 1,
                    color: 'rgba(200, 254, 255, 0)', // 结束颜色
                  },
                ],
              },
            },
          },
        ],
      },
      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();
  },
};
</script>

<style>
.bgLeftBottomBox {
  background-image: url('@/assets/svg/Operation/LeftBottom/Box.svg');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
</style>
