<template>
  <div class="page-check-data h-full">
    <div class="data-container">
      <div class="bg-white pt-2 px-2 relative">
        <el-tabs v-model="dataAnalysisActive" type="card">
          <el-tab-pane label="综合分析结果" name="0">

            <el-skeleton v-if="!UserDataAnalysis" :rows="10" />
            <component
              v-if="compareReportData && UserDataAnalysis"
              :is="UserDataAnalysis"
              :need-horizontal="true"
            ></component>
          </el-tab-pane>
          <el-tab-pane label="特别提醒" name="1">
            <div
              v-if="compareReport?.warningMessage"
              v-html="compareReport.warningMessage"
              class="break-all whitespace-pre-wrap"
            ></div>
            <el-empty v-else></el-empty>
          </el-tab-pane>
          <el-tab-pane label="健康建议" name="4">
            <div class="p-4">
              <div v-if="compareReport?.suggestion" v-html="compareReport?.suggestion"></div>
              <el-empty v-else></el-empty>
            </div>
          </el-tab-pane>
          <el-tab-pane label="疾病趋势" name="2">

            <el-skeleton v-if="!TrendOfRiskChange" :rows="10" />
            <component
              v-if="compareReportData && TrendOfRiskChange"
              :is="TrendOfRiskChange"
            ></component>
          </el-tab-pane>
          <el-tab-pane label="异常数据对比" name="3">
            <el-skeleton v-if="!ComparisonOfAbnormalData" :rows="10" />
            <component
              v-if="compareReportData && ComparisonOfAbnormalData"
              :is="ComparisonOfAbnormalData"
            ></component>
          </el-tab-pane>
        </el-tabs>
        <div class="absolute right-0 top-0 p-2 pt-4">
          <el-button type="primary" link @click="router.back()">
            <Fold class="h-4 w-4 mr-2" />
            <span>返回</span>
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {
  computed,
  shallowRef,
  watch,
  ref,
  nextTick,
  reactive,
  onMounted,
  provide,
  defineAsyncComponent
} from "vue";
import { useRoute, useRouter } from "vue-router";
import {
  CopyDocument,
  Refresh,
  Fold,
  ArrowLeft,
  ArrowRight
} from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { request, parseJsonData, uploadToOSS } from "@/utils";

const UserDataAnalysis = defineAsyncComponent(() =>
  import("./components/UserDataAnalysis.vue")
);

const TrendOfRiskChange = defineAsyncComponent(() =>
  import("./components/TrendOfRiskChange.vue")
);
const ComparisonOfAbnormalData = defineAsyncComponent(() =>
  import("./components/ComparisonOfAbnormalData.vue")
);

const [route, router] = [useRoute(), useRouter()];
const detail = ref({
  sn: "",
  archivesId: "",
  transferRawJson: [],
  files: [],
  suggestion: ""
});
const transferRawJson = ref();
const resultRawJson = ref();
const latestResultRawJson = ref();
const transferRawJsonFormId = ref();

provide("transferRawJson", transferRawJson);
provide("formId", transferRawJsonFormId);
provide("resultRawJson", resultRawJson);
provide("latestResultRawJson", latestResultRawJson);
const formatFileUrlProtocol = url => url.replace(/^https?:/, location.protocol);
const refreshReportDetail = async () => {
  await getArchivesReportDetail();
  ElMessage.success("操作成功");
};
const getArchivesReportDetail = async () => {
  const { data } = await request.get(
    `/idcService/mechanism/archivesReport/detail`,
    {
      params: {
        archivesId: route.query.archivesId
      }
    }
  );
  resultRawJson.value = parseJsonData(data.detail.resultRawData, {});

  latestResultRawJson.value = resultRawJson.value;
  console.log("resultRawJson.value", resultRawJson.value);
};
const getDetail = async (latest = false) => {
  const { data } = await request.get(
    `/idcService/mechanism/archivesReport/detail`,
    {
      params: {
        archivesId: route.query?.archivesId
      }
    }
  );
  try {
    resultRawJson.value = parseJsonData(data.detail.resultRawData);
    latestResultRawJson.value = resultRawJson.value;
    console.log(resultRawJson);
    // const temp = parseJsonData(data.detail.transferRawJson, {});
    // transferRawJson.value = temp?.answers || temp || [];
    // transferRawJsonFormId.value = temp?.formId;
  } catch (error) {
    console.log(error);
  }
  detail.value = data.detail;
};
onMounted(() => {
  getDetail();
  getCompareReport();
  getAnalysisData();
});

const compareSuggestion = ref();
provide("compareSuggestion", compareSuggestion);
const compareReport = ref();
const getCompareReport = async () => {
  const { data } = await request.get(
    `/idcService/mechanism/medicalData/compareReport/detail`,
    {
      params: {
        archivesId: route.query.archivesId
      }
    }
  );
  compareReport.value = data.detail;
  compareSuggestion.value = data.detail.suggestion
};
const dataAnalysisActive = ref("0");
const compareReportData = ref();
provide("compareReportData", compareReportData);

const getAnalysisData = async () => {
  const { data } = await request.get(
    `/idcService/mechanism/medicalData/compareReport/data/v2`,
    {
      params: {
        archivesId: route.query.archivesId
      }
    }
  );
  compareReportData.value = data.data;
};
</script>

<style lang="scss">
.el-scrollbar__view {
  height: 100%;
  .main-content.page-check-data {
    margin: 0;
  }
}
.page-check-data {
  .data-container {
    height: calc(100% - 52px);
    width: 100%;
  }
}
</style>
