<template>
  <div class="h-[48.79vh] bgLeftTopBox p-[1.85vh]" v-loading="isLoading">
    <div
      class="w-[22vh] h-[22vh] mx-auto mt-[4.6vh]"
      ref="echartsContainer"
    ></div>
    <div
      class="w-[37.96vh] h-[6.29vh] mx-auto mt-[8.6vh] px-[4.96vh] flex justify-between items-center bgTopLeftItemBox"
    >
      <div class="flex">
        <img src="@/assets/svg/Room/LeftTop/TrianglePurple.svg" />
        <span class="text-[1.85vh] youshe ml-[1.4vh]">手术间数</span>
      </div>
      <p class="text-[2.96vh] text-[#733FF3] youshe">{{ opTotal }}</p>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { GetMonitorOperationCount } from "@/api/monitor";
import dayjs from "dayjs";
let chart = null;
export default {
  data() {
    return {
      chartOptions: {
        series: [
          {
            type: "gauge",
            startAngle: 90,
            endAngle: -270,
            pointer: {
              show: false,
            },
            max: 100,
            radius: "100%",
            center: ["50%", "50%"],
            progress: {
              show: true,
              overlap: false,
              roundCap: true,
              clip: false,
              itemStyle: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#9C85FA",
                    },
                    {
                      offset: 1,
                      color: "#5531E7",
                    },
                  ],
                  global: false,
                },
              },
            },
            axisLine: {
              lineStyle: {
                color: [[1, "#4F518C"]],
                opacity: 0.7,
                width: 30,
              },
            },
            splitLine: {
              show: false,
              distance: 0,
              length: 10,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
              distance: 50,
            },
            data: [
              {
                value: 86,
                name: "首台准点率",
                title: {
                  offsetCenter: ["0%", "20%"],
                  fontSize: 22,
                  fontFamily: "Microsoft YaHei",
                  color: "#fff",
                  overflow: "break",
                  lineHeight: 20,
                },
                detail: {
                  valueAnimation: true,
                  offsetCenter: ["0%", "-15%"],
                  fontSize: 40,
                  fontFamily: "DIN-Bold,Microsoft YaHei",
                  color: "#03FFFF",
                  formatter: `{value}%`,
                },
              },
            ],
          },
        ],
      },
      opTotal: 100,
      isLoading: true,
    };
  },
  methods: {
    onGetPageData() {
      let nowDay = dayjs().format("YYYY-MM-DD");
      if (this.$store.getters.isMock) {
        nowDay = "2024-06-06";
      }
      GetMonitorOperationCount(nowDay).then((res) => {
        if (!res.data) {
          return;
        }
        let fisrtRate = res["data"]["firstPunctualityRate"];
        if (fisrtRate.includes("%")) {
          this.chartOptions["series"][0]["data"][0]["value"] = fisrtRate.slice(
            0,
            -1
          );
        } else {
          this.chartOptions["series"][0]["data"][0]["value"] =
            Number(fisrtRate);
        }
        this.opTotal = res["data"]["roomCount"];
        chart.setOption(this.chartOptions);
        this.isLoading = false;
      });
    },
  },
  mounted() {
    chart = echarts.init(this.$refs.echartsContainer);
    this.onGetPageData();
  },
};
</script>

<style>
.bgLeftTopBox {
  background-image: url("@/assets/svg/Room/LeftTop/Box.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.bgTopLeftItemBox {
  background-image: url("@/assets/svg/Room/LeftTop/ItemBox.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
</style>
