<template>
  <div id="largeDataScreen" class="h-screen w-screen flex flex-col">
    <Header></Header>
    <!-- <el-row style="height: calc(100vh - 210px)" :gutter="10"> -->
    <el-row class="flex-1" >
      <el-col :span="8" class="p-2">
        <div class="flex flex-col h-full">
          <div class=" ">
            <Left1></Left1>
          </div>
          <div class="left-item flex-1 mt-2 mb-2 bg-white">
            <Left2 />
          </div>
          <div class="left-item flex-1 bg-white">
            <Left3 />
          </div>
        </div>
      </el-col>
      <el-col :span="8" class="py-2">
        <div class="flex flex-col h-full">
          <div class="flex-[2] flex flex-col">
            <Center1 class=""/>
          </div>
          <div class="bg-white rounded mt-2 flex-1">
            <Center2 />
          </div>
        </div>
      </el-col>
      <el-col :span="8" class="p-2">
        <div class="flex flex-col h-full">
          <div
            v-for="(item, index) in abnormalIndicatorGroupList"
            :key="index"
            class="flex-1 bg-white rounded"
            :class="{
              'mb-2': index == 1,
              'mt-2': index == 1
            }"
          >
            <RightChartCard :index="index" :info="item"></RightChartCard>
          </div>
        </div>
      </el-col>
    </el-row>

    <el-dialog v-model="dialogDetail.visible" title="风险评估详情" width="80%">
      <component
        v-if="compareReportData && UserDataAnalysis"
        :is="UserDataAnalysis"
        :need-horizontal="true"
      />
    </el-dialog>
  </div>
</template>
<script setup>
import { computed, onMounted, defineAsyncComponent, reactive, provide, nextTick, ref } from "vue";
// import autofit from "autofit.js";
import Header from "./components/Header.vue";
import Left1 from "./components/Left1.vue";
import Left2 from "./components/Left2.vue";
import Left3 from "./components/Left3.vue";
import Center1 from "./components/Center1.vue";
import Center2 from "./components/Center2.vue";
import RightChartCard from "./components/RightChartCard.vue";

import { ElLoading } from "element-plus";
import { formatAge, parseJsonData, request } from "@/utils";
const UserDataAnalysis = defineAsyncComponent(() =>
  import("@/views/healthRisk/components/UserDataAnalysis.vue")
);
import { useLargeScreenStoreHook } from "@/store/modules/largeScreen";
const useLargeScreenHook = useLargeScreenStoreHook();

const largeScreenGlobalData = computed(() => {
  return useLargeScreenHook?.largeScreenGlobalData;
});
const abnormalIndicatorGroupList = computed(() => {
  let list = [
    {
      groupName: "",
      list: []
    },
    {
      groupName: "",
      list: []
    },
    {
      groupName: "",
      list: []
    }
  ];
  let responseList =
    useLargeScreenHook?.largeScreenGlobalData?.abnormalIndicatorGroupList;
  console.log("responseList", responseList);
  responseList?.map((v, i) => {
    if (i < 3) {
      list[i] = v;
    }
  });
  return list;
});

onMounted(() => {
  useLargeScreenHook?.requestLargeScreenGlobalData();
});

const dialogDetail = reactive({
  visible: false
});
const resultRawJson = ref();

const latestResultRawJson = ref();
provide("resultRawJson", resultRawJson);
provide("latestResultRawJson", latestResultRawJson);
const compareReportData = ref();
provide("compareReportData", compareReportData);
const getAnalysisData = async archivesId => {
  const { data } = await request.get(
    `/idcService/agency/medicalData/compareReport/data/v2`,
    {
      params: {
        archivesId
      }
    }
  );
  compareReportData.value = data.data;
};
const getArchivesReportDetail = async archivesId => {
  const { data } = await request.get(
    `/idcService/agency/archivesReport/detail`,
    {
      params: {
        archivesId
      }
    }
  );
  resultRawJson.value = parseJsonData(data.detail.resultRawData, {});

  latestResultRawJson.value = resultRawJson.value;
};
const openDialogDetail = async archivesId => {
  const loading = ElLoading.service({
    lock: true,
    text: "加载中...",
    background: "rgba(0, 0, 0, 0.7)"
  });
  await Promise.all([
    getArchivesReportDetail(archivesId),
    getAnalysisData(archivesId)
  ]);
  dialogDetail.visible = true;
  nextTick(() => {
    loading.close();
  });
};
provide("openDialogDetail", openDialogDetail);
</script>
<style lang="scss">
#largeDataScreen {
}
body {
  background:#f1f1f1;
}
.center1 {
  flex: 2;
  // border: 1px solid var(--el-border-color-light);
  // border-radius: 4px;
}
</style>
