<template>
  <window-size>
    <van-empty description="暂无数据" v-show="!examPackageData.checkItems"></van-empty>
    <div style="height: 5px"></div>
    <van-tag type="success" size="large" v-show="examPackageData.checkItems" round plain>已发布体检</van-tag>
    <van-cell v-for="item in examPackageData.checkItems" :title="item.体检单元名称" :value="item.checkTime" is-link
              @click="handleClickExamItem(item)"></van-cell>
    <van-cell v-show="examPackageData.summary" title="体检总结" is-link @click="showSummary"></van-cell>

    <div class="exam-item-result" v-show="currentExamTitle">
      <van-nav-bar :title="currentExamTitle" left-text="返回" left-arrow @click-left="currentExamTitle = null"
                   @click-right="showSwitchItem = true">
        <template #right>
          <van-icon name="wap-nav" size="18"/>
          <span style="color: #1989fa">&nbsp;切换</span></template>
      </van-nav-bar>

      <van-action-sheet v-model:show="showSwitchItem" :actions="examPackageData.checkItems" @select="handleClickExamItem" close-on-click-action
      close-on-click-overlay/>

      <div :style="itemResultStyle">
        <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 currentExamResult">
          <van-grid :column-num="4">
            <van-grid-item :text="item.检查项目"></van-grid-item>
            <van-grid-item>
              <template #text>
                <span class="van-grid-item__text">
                  {{ item.结果 }}
                  <van-tag type="danger" v-if="item.阳性标识">
                    {{ item.阳性标识 }}
                  </van-tag>
                </span>
              </template>
            </van-grid-item>
            <van-grid-item :text="item.单位"></van-grid-item>
            <van-grid-item :text="item.参考范围显示效果"></van-grid-item>
          </van-grid>
        </div>
        <div class="department-summary">
          科室小结：{{ currentDiagnose }}
        </div>
      </div>
    </div>
  </window-size>
</template>

<script setup lang="ts">
import {onMounted, ref, Ref} from "vue";
import {getPhysicalCheckResult} from '../../../api/physical-exam'
import {Dialog} from "vant";
import {useStore} from "vuex";
import {useRouter} from "vue-router";

const router = useRouter()
const store = useStore()
const itemResultStyle = {
  height: store.state.windowSize['h'] - 48 + 'px',
  overflowY: 'auto'
}

const examPackageData: Ref<object> = ref({})

const currentExamTitle: Ref<string> = ref()
const currentDiagnose: Ref<string> = ref()
const currentExamResult: Ref<[]> = ref([])

const handleClickExamItem = (checkItem: object): void => {
  checkItem.color = '#00c278'
  currentExamTitle.value = checkItem['体检单元名称']
  currentDiagnose.value = checkItem['诊断内容']
  currentExamResult.value = examPackageData.value['examResult'][currentExamTitle.value]
}

const showSummary = (): void => {
  Dialog.alert({
    title: '体检总结',
    message: examPackageData.value.summary.汇总建议,
    messageAlign: 'left',
  })
}

const showSwitchItem:Ref<boolean> = ref(false)

onMounted(() => {
  const tjid = <string> router.currentRoute.value.params.tjid;
  getPhysicalCheckResult(tjid).then(res => {
    examPackageData.value = res
  })
})

</script>

<style scoped>
.exam-item-result {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: white;
  z-index: 99
}

.department-summary {
  padding: 8px 8px 12px 8px;
  font-size: 13px;
  color: darkred;
}
</style>