<template>
  <window-size class="test-detail">
    <van-notice-bar left-icon="warning-o" text="仅供查阅参考，最终结果以医院纸质报告为准。" />
    <van-cell title="就诊人" :value="testResult.patientName"></van-cell>
    <van-cell title="送检医生" :value="testResult.doctorName"></van-cell>
    <van-cell title="报告时间" :value="testResult.checkTime"></van-cell>
    <van-cell title="报告单号" :value="testResult.patientUid"></van-cell>
    <van-cell
        v-if="testResult.reportUrl"
        is-link
        @click="seeTestImage"
    >
      <template #title>
        <span style="color: dodgerblue">查看报告图片</span>
      </template>
    </van-cell>
    <van-cell
        v-if="testResult.topReqNo"
        is-link
        @click="seePacs(testResult)"
    >
      <template #title>
        <span style="color: dodgerblue">查看报告影像</span>
      </template>
    </van-cell>
    <div style="height: 5px"></div>
    <van-tag type="success" plain style="margin-left: 8px">检查所见</van-tag>
    <div class="test-result-text">
      <p v-html="testResult.examinationSee"></p>
    </div>
    <div style="height: 12px"></div>
    <van-tag type="success" plain style="margin-left: 8px">检查结论</van-tag>
    <div class="test-result-text">
      <p v-html="testResult.examinationreSult"></p>
    </div>
    <van-popup
        v-model:show="showTestImage"
        closeable
        position="bottom"
        close-icon="close"
        :style="{ height: '100%' }"
        @closed="pacsSrc = null"
    >
      <iframe style="width: 100%; height: calc(100% - 6px)" frameborder="0" v-if="isTypePacs" :src="pacsSrc"/>
      <van-image v-else width="100%" :src="imageSrc" fit="cover"/>
    </van-popup>

  </window-size>
</template>

<script setup>
import {useRouter} from 'vue-router'
import {checkTestDetail} from '@/api/check-exam'
import {onMounted, ref} from 'vue'
import {fetchInspectionReportImage} from "@/utils/request";

const router = useRouter()

const testResult = ref({})

const showTestImage = ref(false)
const isTypePacs = ref(false)
const imageSrc = ref(null)
const pacsSrc = ref(null)
function seeTestImage() {
  isTypePacs.value = false
  fetchInspectionReportImage({
    patientId: router.currentRoute.value.params.patientId,
    reportId: testResult.value.patientUid,
    reportUrl: testResult.value.reportUrl,
  }).then(response => {
    showTestImage.value = true
    imageSrc.value = response
  })
}

function seePacs(item) {
  isTypePacs.value = true
  pacsSrc.value = item.studyuid ? `https://staticweb.hnthyy.cn:8081/mReport?PATIENT_UID=${item.patientUid}&studyUID=${item.studyuid}`
      : `https://staticweb.hnthyy.cn:8081/mReport?REQUISITIONID=${item.topReqNo}`
  showTestImage.value = true
}

onMounted(() => {
  const params = router.currentRoute.value.params
  checkTestDetail(params).then((res) => {
    testResult.value = res
  })
})
</script>

<style lang="scss">
.test-detail {
  .test-result-text {
    font-size: 14px;
    color: black;
    padding: 4px 20px;
  }
  .van-cell__right-icon {
    color: dodgerblue;
  }
  .test-img-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: green;
  }
}
</style>