<template>
  <div class="applicationShow-container">
    <div class="applicationShow-container-header">
      <el-button @click="getInfo">刷新</el-button>
    </div>
    <div class="applicationShow-container-content">
      <el-descriptions title="输血申请详情" :column="2">
        <el-descriptions-item label="Username">kooriookami</el-descriptions-item>
        <el-descriptions-item label="患者姓名">{{ patientInfoValue?.patientName || '-' }}</el-descriptions-item>
        <el-descriptions-item label="患者性别">{{ patientInfoValue?.patientSex || '-' }}</el-descriptions-item>
        <el-descriptions-item label="患者年龄">{{ patientInfoValue?.patientAge || '-' }}</el-descriptions-item>
        <el-descriptions-item label="患者手机号">{{ patientInfoValue?.patientPhone || '-' }}</el-descriptions-item>
        <el-descriptions-item label="患者身份证号">{{ patientInfoValue?.patientIdCard || '-' }}</el-descriptions-item>
        <el-descriptions-item label="患者地址">{{ patientInfoValue?.patientAddress || '-' }}</el-descriptions-item>
      </el-descriptions>
    </div>
    <div class="applicationShow-container-table">
      <el-table :data="dataList">
        <el-table-column label="医嘱名称" prop="adviceName" />
        <el-table-column label="输血数量" prop="adviceDefinitionId" />
      </el-table>
    </div>
  </div>
</template>
<script setup>
import { getCurrentInstance, onBeforeMount, onMounted, reactive, ref, computed } from 'vue'
import { getBloodTransfusion } from './api';
import { patientInfo } from '../../store/patient.js';
const { proxy } = getCurrentInstance();
const emits = defineEmits([])
const props = defineProps({

})
const state = reactive({

})

// 使用计算属性确保安全访问
const patientInfoValue = computed(() => {
  return patientInfo.value || {};
});

const dataList = ref([])
const getInfo = () => {
  if (patientInfo.value?.inHospitalOrgId) {
    getBloodTransfusion({
      encounterId: patientInfo.value.encounterId,
    }).then((res) => {
      if (res.code === 200) {
        dataList.value = res.data
      } else {
      }
    });
  }
};
onBeforeMount(() => {

})
onMounted(() => {
  getInfo()
})
defineExpose({ state })

</script>
<style lang="scss" scoped>
.applicationShow-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;

  .applicationShow-container-header{
    height: 44px;
    display: flex;
    align-items: center;
    gap:8px;
    padding: 0 16px;
  }
  .applicationShow-container-content{
    flex: 1;
  }
  .applicationShow-container-table{
    height: 400px;
    flex:auto
  }
}
</style>