<template>
  <div class="p-4">
    <GrowCard :loading="loading" class="enter-y" />
    <!-- <SiteAnalysis class="!my-4 enter-y" :loading="loading" /> -->
    <div class="md:flex enter-y" style="margin-top: 16px">
      <VisitRadar
        :xData="xaData"
        :yData="ybData"
        class="md:w-2/5 w-full"
        :loading="loading"
        @parentw-event="getEleRescurList"
      />
      <VisitSource
        :xData="xData"
        :yData="yData"
        class="md:w-3/5 !md:mx-4 !md:my-0 !my-4 w-full"
        :loading="loading"
        @parent-event="getElevatorList"
      />
      <!-- <SalesProductPie class="md:w-1/5 w-full" :loading="loading" /> -->
    </div>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from "vue";
import GrowCard from "./components/GrowCard.vue";
import SiteAnalysis from "./components/SiteAnalysis.vue";
import VisitSource from "./components/VisitSource.vue";
import VisitRadar from "./components/VisitRadar.vue";
import SalesProductPie from "./components/SalesProductPie.vue";
import { elevatorFaultList, elevatorRescueList } from "@/api/basicInfo/elevator";
import dayjs from "dayjs";

const loading = ref(true);
const xData = ref<any>([]);
const yData = ref<any>([]);
const xaData = ref<any>([]);
const ybData = ref<any>([]);
onMounted(() => {
  getElevatorList({
    startTime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
    endTime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
  });
  getEleRescurList({
    startTime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
    endTime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
  });
});
const getEleRescurList = async (date) => {
  console.log(date, "date");
  const res = await elevatorRescueList(date);
  xaData.value = res.rows?.map((item) => {
    return item.projectName;
  });
  ybData.value = res.rows?.map((item) => {
    return item.overTimeTotal;
  });
  // loading.value = false;
};
const getElevatorList = async (date) => {
  console.log(date, "date");
  const res = await elevatorFaultList(date);
  xData.value = res.rows.map((item) => {
    return item.deptName;
  });
  yData.value = res.rows.map((item) => {
    return item.faultTotal;
  });
  loading.value = false;
};
</script>
