<script setup lang="ts">
import "./BusyRanking.less";
import * as echarts from "echarts";
import moment from "moment";
import { onMounted, reactive, ref, watch } from "vue";
import { handlegetServerConnec } from "../../newService";
import { nextTick } from "process";

// 繁忙度排行
let busyList = ref<any>([]);
// 省份信息
const baseInfoObj = ref<any>();

onMounted(async () => {});

// 获得繁忙度排行的数据
const handleGetBusyRank = async () => {
  let saveData = localStorage.getItem("baseInfoObj");
  if (saveData) {
    baseInfoObj.value = JSON.parse(saveData);
  }
  const req: any = {
    action_type: "getCurHalfCollect",
    province_code: baseInfoObj.value.ProvinceId || "3544",
  };
  const data = await handlegetServerConnec(req);
  console.log("BusyRankingContent", data);
  let list: any = data.CollectionObject;
  busyList.value = list;

  emit("handleServiceBusy");
  return list;
};

// 传入的数据
const props = defineProps<{
  show: any;
}>();

watch(
  () => props.show,
  (newVal, oldVal) => {
    console.log("realboxnewVal", newVal);
    if (newVal) {
      handleGetBusyRank();
    }
  },
  { deep: true }
);

defineExpose({
  handleGetBusyRank: handleGetBusyRank,
  busyList: busyList,
});
// 传入的方法
const emit = defineEmits<{
  (e: "handleServiceBusy"): void; // 高亮查到的图层
}>();
</script>
<template>
  <div
    class="BusyRankingContent"
    id="BusyRankingContent"
    style="width: 100%; height: 100%"
  >
    <div class="pageTitle">服务区繁忙排行</div>

    <div class="busyList">
      <div
        class="busyItem"
        v-for="(item, index) in busyList.slice(0, 10)"
        :key="index"
      >
        <div class="left">
          <!-- <div class="indexBox"></div> -->
          <div style="color: #fff">{{ index + 1 }}、</div>
          <div class="name">{{ item.SERVERPART_NAME || "-" }}</div>
        </div>
        <div
          class="right"
          :style="{
            color:
              item.AVR_TICKET >= 30
                ? '#E64218'
                : item.AVR_TICKET >= 15 && item.AVR_TICKET < 30
                ? '#EFE271'
                : '#1BAAE6',
          }"
        >
          <span style="display: inline-block; width: 50px; text-align: right">
            {{ item.AVR_TICKET ? item.AVR_TICKET + "%" : "-%" }}
          </span>
          {{
            item.AVR_TICKET >= 30
              ? "繁忙"
              : item.AVR_TICKET >= 15 && item.AVR_TICKET < 30
              ? "良好"
              : "空闲"
          }}
        </div>
      </div>
    </div>
  </div>
</template>