<!--
 * @Author: sjjh
 * @Date: 2025-09-05 22:32:17
 * @Description:  申请单 （检验、检查、输血、手术）
-->
  <template>
    <div>
      <div class="applicationForm-bottom-btn">
        <el-button-group>
          <el-button
            type="primary"
            @click="showApplicationFormDialog('LaboratoryTests')"
            :disabled="!patientInfo?.inHospitalOrgId"
            >检验</el-button
          >
          <el-button
            type="primary"
            @click="showApplicationFormDialog('MedicalExaminations')"
            :disabled="!patientInfo?.inHospitalOrgId"
            >检查</el-button
          >
          <el-button
            type="primary"
            @click="showApplicationFormDialog('BloodTransfusion')"
            :disabled="!patientInfo?.inHospitalOrgId"
            >输血</el-button
          >
          <el-button
            type="primary"
            @click="showApplicationFormDialog('Surgery')"
            :disabled="!patientInfo?.inHospitalOrgId"
            >手术</el-button
          >
        </el-button-group>
      </div>
      <el-dialog
        v-model="applicationFormDialogVisible"
        destroy-on-close
        width="1000px"
        :close-on-click-modal="false"
        :title="applicationFormTitle"
        @close="closeDialog"
      >
        <component
          :is="applicationFormName"
          @submitOk="submitOk"
          ref="applicationFormNameRef"
        ></component>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="applicationFormDialogVisible = false">取消</el-button>
            <el-button type="primary" @click="submitApplicationForm"> 确认 </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </template>
<script setup>
import { getCurrentInstance, onBeforeMount, onMounted, reactive, ref, computed } from 'vue';
import BloodTransfusion from './bloodTransfusion';
import { patientInfo } from '../../../store/patient.js';
import Surgery from './surgery.vue';
import LaboratoryTests from './laboratoryTests.vue';
import MedicalExaminations from './medicalExaminations.vue';
const { proxy } = getCurrentInstance();
const emits = defineEmits([]);
const props = defineProps({});
const state = reactive({});
const components = ref({
  BloodTransfusion,
  Surgery,
  LaboratoryTests,
  MedicalExaminations,
});
const applicationFormName = ref(null);
const applicationFormDialogVisible = ref(false);
const applicationFormTitle = computed(() => {
  const titleMap = {
    BloodTransfusion: '输血申请单',
    Surgery: '手术申请单',
    LaboratoryTests: '检验申请单',
    MedicalExaminations: '检查申请单',
  };
  return titleMap[applicationFormName.value?.name] || '申请单';
});

const closeDialog = () => {
  applicationFormName.value = null;
  applicationFormDialogVisible.value = false;
}
const showApplicationFormDialog = (name) => {
  if (!components.value[name]) {
    console.warn(`未找到组件: ${name}`);
    return;
  }
  // 如果点击的是当前已打开的组件，则关闭
  if (applicationFormName.value === components.value[name]) {
    applicationFormDialogVisible.value = false;
    applicationFormName.value = null;
    return;
  }

  // 如果当前弹窗已打开，先关闭当前弹窗，延迟后打开新的弹窗
  if (applicationFormDialogVisible.value) {
    applicationFormDialogVisible.value = false;
    setTimeout(() => {
      applicationFormName.value = components.value[name];
      applicationFormDialogVisible.value = true;
    }, 150);
  } else {
    applicationFormName.value = components.value[name];
    applicationFormDialogVisible.value = true;
  }
};
onBeforeMount(() => {});
onMounted(() => {});
const applicationFormNameRef = ref();
const submitApplicationForm = () => {
  console.log(applicationFormNameRef.value);

  if (applicationFormNameRef.value?.submit) {
    applicationFormNameRef.value.submit();
  }
};
const submitOk = () => {
  applicationFormDialogVisible.value = false;
  applicationFormName.value = null;
};
defineExpose({ state });
</script>
<style lang="scss" scoped>
.applicationForm-bottom-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px 0;

  .el-button-group {
    .el-button {
      margin: 0 2px;
    }
  }
}
</style>
