<template>
  <div>
    <el-tabs type="border-card">
      <el-tab-pane label="最新风险分析结果" lazy>
        <div class="flex justify-between">
          <div
            v-if="detail.startTime && detail.endTime"
            class="flex items-center text-gray-700 text-sm"
          >
            <el-tooltip>
              <QuestionFilled
                class="w-4 h-4 inline align-middle cursor-pointer opacity-50 outline-none"
              />
              <template #content>
                <div class="text-sm">
                  <p>1、系统自动抓取用户上传的最新数据进行分析</p>
                  <p>
                    2、某个检查，比如血脂检查，最新的数据是2年前的，那么系统只能认为这份数据为最新数据
                  </p>
                  <p>
                    3、及时上传最新的检查数据，分析的结果更接近当前的身体状况
                  </p>
                  <p>
                    4、系统分析数据检查日期范围为系统抓取的各种检查数据的检查日期跨度，时间跨度越小，距离现实日期越近，则分析结果更接近当前身体状况
                  </p>
                </div>
              </template>
            </el-tooltip>
            <span
              >系统分析数据检查日期范围：{{ detail.startTime }} 至
              {{ detail.endTime }}</span
            >
          </div>
          <div v-else></div>
          <div>
            <el-popconfirm title="是否确认重新分析?" @confirm="reAnalysis">
              <template #reference>
                <el-button type="primary" plain>
                  <Refresh class="w-4 h-4" />
                  <span>重新分析</span>
                </el-button>
              </template>
            </el-popconfirm>
          </div>
        </div>
        <LatestUserDataAnalysis v-if="resultRawJson" />
        <el-empty v-else description="用户年龄小于18岁或暂无医疗检查数据无法分析数据"></el-empty>
      </el-tab-pane>
      <el-tab-pane label="风险变化趋势" lazy>
        <TrendOfRiskChange />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script setup>
import {
  computed,
  watch,
  markRaw,
  ref,
  reactive,
  onMounted,
  provide,
  defineAsyncComponent
} from "vue";
import { useRoute, useRouter } from "vue-router";
import {
  formatAge,
  parseJsonData,
  request,
  transformDataExpand
} from "@/utils";
import { QuestionFilled, ArrowUp, Refresh } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";

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

const route = useRoute();
const router = useRouter();

const resultRawJson = ref();
provide("resultRawJson", resultRawJson);
const detail = ref({
  startTime: "",
  resultRawJson: "",
  endTime: ""
});
const getReportDetail = async () => {
  const { data } = await request.get(
    "/idcService/mechanism/archivesReport/detail",
    {
      params: {
        archivesId: route.query.archivesId
      }
    }
  );
  detail.value = data.detail;
  resultRawJson.value = parseJsonData(data.detail.resultRawData);
};
getReportDetail();

const reAnalysis = async () => {
  const { data } = await request.post(
    `/idcService/mechanism/archivesReport/reAnalysis`,
    {
      archivesId: route.query.archivesId
    }
  );
  ElMessage.success("分析完成");
  detail.value = data.detail;
  resultRawJson.value = parseJsonData(data.detail.resultRawData);
};
</script>

<style lang="scss" scoped></style>
