<!--
 * @Author: sjjh
 * @Date: 2025-04-09 14:50:04
 * @Description:
-->
<template>
  <div class="inpatientNurseHome-inOut-container">
    <el-tabs v-model="activeTabName" class="inOut-tabs" @tab-click="test">
      <el-tab-pane label="入科" name="first">
        <BedAllocation v-if="activeTabName === 'first'" ref="firstRef" />
      </el-tab-pane>
      <el-tab-pane label="转出" name="second">
        <TransferOut
          v-if="activeTabName === 'second'"
          ref="secondRef"
          operation-type="transfer"
          :visible="activeTabName === 'second'"
        />
      </el-tab-pane>
      <el-tab-pane label="出院" name="third">
        <TransferOut
          v-if="activeTabName === 'third'"
          ref="thirdRef"
          operation-type="discharge"
          :visible="activeTabName === 'third'"
        />
      </el-tab-pane>
      <!-- <el-tab-pane label="出院患者" name="fourth">Config</el-tab-pane> -->
    </el-tabs>
  </div>
</template>
<script setup lang="ts">
import {nextTick, onBeforeMount, onMounted, reactive, ref} from 'vue';

import BedAllocation from './components/bedAllocation.vue';
import TransferOut from './components/transferOut.vue';
// const { proxy } = getCurrentInstance()
// const emits = defineEmits([])
// const props = defineProps({})
const state = reactive({});
const firstRef = ref();
const secondRef = ref();
const thirdRef = ref();
onBeforeMount(() => {});
onMounted(() => {});
defineExpose({ state });
const test = () => {
  nextTick(() => {
    if (activeTabName.value == 'first') {
      firstRef?.value?.refreshTap();
    } else if (activeTabName.value == 'second') {
      secondRef?.value?.refreshTap();
    } else if (activeTabName.value == 'third') {
      thirdRef?.value?.refreshTap();
    }
  });
};

const activeTabName = ref('first');
</script>
<style lang="scss" scoped>
.inpatientNurseHome-inOut-container {
  width: 100%;
  height: 100%;
  display: flex;
  :deep(.inOut-tabs) {
    height: 100%;
    width: 100%;
    .el-tabs__header {
      margin: 0;
      padding: 0 0 0 8px;
    }
    .el-tab-pane {
      height: 100%;
    }
    .el-tabs__content {
      height: calc(100% - 40px);
    }
  }
}
</style>
