<template>
  <div class="h-[32.31vh] mt-[2.77vh] pt-[4vh] bgLeftBottomBox" v-loading="isLoading">
    <div class="h-[20vh]" ref="echartsContainer"></div>
    <section class="w-[37.96vh] h-[5.18vh] leading-[5.18vh] text-center border border-[#2D126F] mx-auto">
      <span class="text-[1.85vh] youshe">平均接台时间</span>
    </section>
  </div>
</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: 120,
            axisLabel: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                width: 20,
                color: [[1, 'rgba(126, 130, 137, 0.3)']],
              },
            },
            progress: {
              show: true,
              width: 20,
              itemStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    { offset: 0, color: '#03c2fd' },
                    { offset: 0.5, color: '#1ed3e5' },
                    { offset: 1, color: '#2fded6' },
                  ],
                },
              },
            },
            pointer: {
              icon: 'rect',
              width: 3,
              offsetCenter: ['0%', '-40%'],
              itemStyle: {
                color: 'rgba(139, 230, 253, 1)',
              },
            },
            data: [
              {
                name: 'itemA',
                value: 45,
                title: { show: false },
                detail: {
                  offsetCenter: [0, '4%'],
                  formatter: function (value) {
                    return '{a|' + value + '}{b|min}';
                  },
                  rich: {
                    a: {
                      fontSize: 32,
                      color: '#4AC9FF',
                      fontFamily: 'DIN-Bold,Microsoft YaHei',
                    },
                    b: {
                      fontSize: 16,
                      color: '#4AC9FF',
                      fontFamily: 'DIN-Bold,Microsoft YaHei',
                      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'] > 999 ? 999 : res['data']['averageReceptionTime'];
        chart.setOption(this.chartOptions);
        this.isLoading = false;
      });
    },
  },
  mounted() {
    chart = echarts.init(this.$refs.echartsContainer);
    this.onGetPageData();
  },
};
</script>

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