<template>
  <section class="bottomBoxWrap">
    <div class="echartsContainer" ref="echartsContainer"></div>
    <div class="bottomBox">
      <div class="left">
        <img src="@/assets/svg/Operation/LeftTop/PointBlue.svg" />
        <span>平均接台时间(min)</span>
      </div>
    </div>
  </section>
</template>

<script>
import * as echarts from 'echarts';
import { GetMonitorAverageReceptionTime } from '@/api/room';
import dayjs from 'dayjs';
let chart = null;
export default {
  data() {
    return {
      chartOptions: {
        series: [
          {
            type: 'gauge',
            radius: '100%',
            max: 240,
            axisLabel: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                width: 20,
                color: [[1, '#fff']],
              },
            },
            progress: {
              show: true,
              width: 20,
              itemStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    { offset: 0, color: '#5D49AF' },
                    { offset: 1, color: '#E8E3FF' },
                  ],
                },
              },
            },
            pointer: {
              icon: 'rect',
              width: 2,
              offsetCenter: ['0%', '-40%'],
              itemStyle: {
                color: '#5D49AF',
              },
            },
            data: [
              {
                name: 'itemA',
                value: 45,
                title: { show: false },
                detail: {
                  offsetCenter: [0, '4%'],
                  formatter: function (value) {
                    return '{a|' + value + '}{b|min}';
                  },
                  rich: {
                    a: {
                      fontSize: 48,
                      color: '#5D49AF',
                      fontWeight: 700
                    },
                    b: {
                      fontSize: 20,
                      color: 'rgba(93, 73, 175, 0.6)',
                      verticalAlign: 'bottom',
                    },
                  },
                },
              },
            ],
          },
        ],
      },
      isLoading: true,
    };
  },
  methods: {
    onGetPageData() {
      let nowDay = dayjs().format('YYYY-MM-DD');
      if (this.$store.getters.isMock) {
        nowDay = '2024-06-06';
      }
      GetMonitorAverageReceptionTime(nowDay).then(res => {
        this.chartOptions['series'][0]['data'][0]['value'] = res['data']['averageReceptionTime'];
        chart.setOption(this.chartOptions);
        this.isLoading = false;
      });
    },
  },
  mounted() {
    chart = echarts.init(this.$refs.echartsContainer);
    this.onGetPageData();
    setInterval(() => {
      this.onGetPageData();
    }, this.$store.getters.intervalTime);
  },
};
</script>

<style lang="scss" scoped>
@import "./index.scss"
</style>
