<template>
  <window-size class="exam-detail">
    <van-notice-bar left-icon="warning-o" text="仅供查阅参考，最终结果以医院纸质报告为准。" />
    <van-grid :column-num="3">
      <van-grid-item>
        <template #default>
          <div style="font-size: 12px; color: #333333">就诊人</div>
          <div style="margin-top: 5px; font-size: 14px">
            {{ examIndex.patientName }}
          </div>
        </template>
      </van-grid-item>
      <van-grid-item>
        <template #default>
          <div style="font-size: 12px; color: #333333">性别</div>
          <div style="margin-top: 5px; font-size: 14px">
            {{ examIndex.patientGender }}
          </div>
        </template>
      </van-grid-item>
      <van-grid-item>
        <template #default>
          <div style="font-size: 12px; color: #333333">年龄</div>
          <div style="margin-top: 5px; font-size: 14px">
            {{ examIndex.patientAge }}
          </div>
        </template>
      </van-grid-item>
    </van-grid>
    <div style="height: 5px"></div>
    <van-cell title="申请医生" :value="examIndex.doctorName"></van-cell>
    <van-cell title="开方科室" :value="examIndex.departName"></van-cell>
    <van-cell title="报告时间" :value="examIndex.trscDate"></van-cell>
    <van-cell title="报告单号" :value="examIndex.reportId"></van-cell>
    <van-cell
        v-if="exam.pics.length > 0"
        is-link
        @click="handleClickShowPics"
    >
      <template #title>
        <span style="color: dodgerblue">查看报告图片</span>
      </template>
    </van-cell>
    <div style="height: 5px"></div>
    <van-grid :column-num="4">
      <van-grid-item text="检查项目"></van-grid-item>
      <van-grid-item text="结果"></van-grid-item>
      <van-grid-item text="单位"></van-grid-item>
      <van-grid-item text="参考值"></van-grid-item>
    </van-grid>
    <div v-for="item in exam.items" :key="item.itmId">
      <van-grid :column-num="4">
        <van-grid-item>
          <template #text>
            <span class="van-grid-item__text">
              {{ item.itmName }}
            </span>
          </template>
        </van-grid-item>
        <van-grid-item>
          <template #text>
            <span class="van-grid-item__text">
              {{ itemValue(item) }}
              <van-tag type="danger" v-if="item.itmAlert">
                {{ itemAlert(item.itmAlert) }}
              </van-tag>
            </span>
          </template>
        </van-grid-item>
        <van-grid-item :text="item.itmUnit"></van-grid-item>
        <van-grid-item>
          <template #text>
            <span class="van-grid-item__text">
              {{ itemRange(item) }}
            </span>
          </template>
        </van-grid-item>
      </van-grid>
    </div>
    <div v-if="exam.bacterias.antiList && exam.bacterias.antiList.length > 0" style="margin-top: 5px">
      <van-cell :title="exam.bacterias.itmName" :value="exam.bacterias.bacNameCn"></van-cell>
      <van-grid :column-num="3">
        <van-grid-item text="抗菌药物"></van-grid-item>
        <van-grid-item text="MIC值"></van-grid-item>
        <van-grid-item text="敏感性"></van-grid-item>
      </van-grid>
      <div v-for="item in exam.bacterias.antiList" :key="item.antiId">
        <van-grid :column-num="3">
          <van-grid-item>
            <template #text>
            <span class="van-grid-item__text">
              {{ item.antiNameCn }}
            </span>
            </template>
          </van-grid-item>
          <van-grid-item>
            <template #text>
            <span class="van-grid-item__text">
              {{ item.antiMic }}
            </span>
            </template>
          </van-grid-item>
          <van-grid-item>
            <template #text>
            <span class="van-grid-item__text">
              {{ item.antiValue }}
            </span>
            </template>
          </van-grid-item>
        </van-grid>
      </div>
    </div>

    <van-popup v-model:show="showPics" postion="bottom" :style="{ height: '100%' }">
      <van-swipe
          @change="onPicIndexChange"
          height="100%"
      >
        <van-swipe-item v-for="item in exam.pics">
          <van-image
              width="100%"
              fit="cover"
              :src="'data:image/png;base64,' + item"
              disable-zoom="false"
          ></van-image>
        </van-swipe-item>
        <template #indicator>
          <div class="custom-indicator">{{ currentPicIndex + 1 }} / {{ exam.pics.length }}</div>
        </template>
      </van-swipe>
      <div class="close-pics-btn">
        <van-button @click="showPics = false">关闭</van-button>
      </div>
    </van-popup>
    
  </window-size>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { checkExamDetail } from '@/api/check-exam'
import {computed, onMounted, reactive, ref} from 'vue'
import {useStore} from "vuex";

const router = useRouter()
const store = useStore()
const examIndex = store.getters.getCurrentExamIndex

const exam = reactive({
  pics: [],
  order: {},
  items: [],
  bacterias: {
    antiList: []
  },
})

const isMicrobacteria = computed(() => {
  return examIndex.reportType === '细菌'
})

const itemValue = (item) => {
  if (isMicrobacteria.value) {
    return item.antiValue || item.rsltStrs
  }
  return item.itmStrValue || item.itmValue;
}
const itemAlert = (val) => {
  return val === 'L' ? '↓' : '↑'
}
const itemRange = (item) => {
  if (isMicrobacteria.value) {
    return item.anti_MIC
  }
  return item.ranGeStr || item.range;
}

const currentPicIndex = ref(0)
const showPics = ref(false)
function handleClickShowPics() {
  showPics.value = true
}
function onPicIndexChange(index) {
  currentPicIndex.value = index
}

onMounted(() => {
  checkExamDetail({
    reportId: examIndex.reportId,
    patientId: router.currentRoute.value.params.patientId
  }).then((res) => {
    exam.order = res.order
    exam.items = res.items
    exam.pics = res.pics
    if (res.bacterias && res.bacterias.length === 1) {
      exam.bacterias = res.bacterias[0]
    }
  })
})
</script>

<style lang="scss">
.exam-detail {
  .van-popup--center {
    width: 100vw;
    max-width: 100vw;
  }
  .van-swipe {
    width: 100vw;
    height: 100vh;
  }
  .custom-indicator {
    position: absolute;
    bottom: 8px;
    right: 12px;
    color: #6e6e6e;
  }
  .close-pics-btn {
    position: absolute;
    bottom: 4px;
    right: 0;
    left: 0;
    display: flex;
    justify-content: center;

    .van-button--normal {
      height: 30px;
      width: 120px;
      color: #6e6e6e;
    }
  }
  .van-cell__right-icon {
    color: dodgerblue;
  }
}
</style>