<template>
  <div style="display: flex; justify-content: space-between">
    <div style="width: 20%; height: 90vh; border-right: solid 2px #e4e7ed">
      <div
        style="
          height: 40px;
          display: flex;
          align-items: center;
          justify-content: flex-end;
          border-bottom: solid 2px #e4e7ed;
        "
      >
        <el-icon
          @click="refresh"
          class="refresh-icon"
          style="cursor: pointer; font-size: 20px; margin-right: 10px"
        >
          <Refresh />
        </el-icon>
      </div>
      <el-tabs v-model="active" class="demo-tabs centered-tabs tab-header" @tab-click="handleClick">
        <el-tab-pane label="在科" name="first" style="padding: 15px 10px">
          <PatientList />
        </el-tab-pane>
        <el-tab-pane label="转科" name="second" style="padding: 0 10px">
          <PatientList />
        </el-tab-pane>
      </el-tabs>
    </div>
    <div style="width: 100%">
      <el-tabs v-model="activeName" class="demo-tabs centered-tabs" @tab-change="handleClick">
        <el-tab-pane
          v-for="tab in prescriptionTabs"
          :key="tab.name"
          :lazy="true"
          :label="tab.label"
          :name="tab.name"
        >
          <!-- 使用模板引用 -->
          <PrescriptionList
            :exeStatus="exeStatus"
            :requestStatus="requestStatus"
            :ref="(el) => setPrescriptionRef(el, tab.name)"
          />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script setup>
import { getCurrentInstance } from 'vue';
import PatientList from './components/patientList.vue';
import PrescriptionList from './components/prescriptionList.vue';

const activeName = ref('preparation');
const active = ref('first');
const exeStatus = ref(1);
const requestStatus = ref(3);
const { proxy } = getCurrentInstance();

// 存储子组件引用的对象
const prescriptionRefs = ref({});

// 定义处方列表tabs配置
const prescriptionTabs = [
  { label: '待执行', name: 'preparation' },
  { label: '已执行', name: 'completed' },
  { label: '不执行', name: 'stopped' },
  { label: '取消执行', name: 'cancel' },
];

// 设置处方组件引用
function setPrescriptionRef(el, name) {
  if (el) {
    prescriptionRefs.value[name] = el;
  }
}

function handleClick(tabName) {
  // tabName是tab的name属性值
  const activeTabName = tabName || activeName.value;

  switch (activeTabName) {
    case 'preparation':
      // 执行状态待执行
      exeStatus.value = 1;
      // 请求状态已校对
      requestStatus.value = 3;
      break;
    case 'completed':
      exeStatus.value = 6;
      break;
    case 'stopped':
      exeStatus.value = 5;
      break;
    case 'cancel':
      exeStatus.value = 9;
      break;
  }

  // 调用子组件方法
  nextTick(() => {
    if (
      prescriptionRefs.value[activeTabName] &&
      typeof prescriptionRefs.value[activeTabName].handleGetPrescription === 'function'
    ) {
      prescriptionRefs.value[activeTabName].handleGetPrescription();
    }
  });
}

provide('handleGetPrescription', (value) => {
  prescriptionRefs.value[activeName.value].handleGetPrescription();
});
</script>

<style scoped>
.centered-tabs :deep(.el-tabs__nav-wrap) {
  display: flex;
  justify-content: center;
}

.centered-tabs :deep(.el-tabs__nav-scroll) {
  display: flex;
  justify-content: center;
}

.tab-header :deep(.el-tabs__item) {
  height: 50px !important;
}

.centered-tabs :deep(.el-tabs__nav) {
  display: flex;
  justify-content: center;
}
:deep(.el-tabs__header) {
  margin: 0;
}
</style>