<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: 80%; padding: 10px">
      <!-- 标签页导航 -->
      <el-tabs v-model="activeTab" class="demo-tabs" @tab-change="handleTabChange">
        <el-tab-pane label="划价确费" name="billing">
          <BillingList ref="billingRef" />
        </el-tab-pane>
        <el-tab-pane label="医嘱计费" name="orderBilling">
          <OrderBilling ref="orderBillingRef" />
        </el-tab-pane>
        <el-tab-pane label="费用明细查询" name="expenseDetail">
          <FeeDetailQuery ref="feeDetailQueryRef" />
        </el-tab-pane>
        <el-tab-pane label="预交金查询" name="depositQuery">
          <deposit-query ref="depositQueryRef" />
        </el-tab-pane>
        <!-- <el-tab-pane label="患者流转日志" name="patientFlow">
          <div style="padding: 20px; text-align: center; color: #909399">患者流转日志功能区域</div>
        </el-tab-pane> -->
      </el-tabs>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue';
import { ElMessage } from 'element-plus';
import PatientList from '../medicalOrderExecution/components/patientList.vue';
import BillingList from './components/billingList.vue';
import FeeDetailQuery from './components/feeDetailQuery.vue';
import DepositQuery from './components/depositQuery.vue';
import OrderBilling from './components/OrderBilling.vue';

// 预交金查询组件引用
const depositQueryRef = ref(null);

// 响应式数据
const active = ref('first');
const activeTab = ref('billing');
const billingRef = ref(null);
const feeDetailQueryRef = ref(null);
const orderBillingRef = ref(null);

// 刷新功能
function refresh() {
  ElMessage.success('刷新成功');
  // 刷新患者列表
}

// 左侧标签页点击
function handleClick() {
  // 可以在这里添加左侧标签切换的逻辑
}

// 右侧标签页切换
function handleTabChange() {
  // 切换到划价确费标签时，刷新数据
  if (activeTab.value === 'billing' && billingRef.value) {
    nextTick(() => {
      billingRef.value.handleQuery();
    });
  }
  // 切换到医嘱计费标签时，刷新数据
  if (activeTab.value === 'orderBilling' && orderBillingRef.value) {
    nextTick(() => {
      orderBillingRef.value.handleQuery();
    });
  }
  // 切换到费用明细查询标签时，可以刷新数据
  if (activeTab.value === 'expenseDetail' && feeDetailQueryRef.value) {
    nextTick(() => {
      // 根据feeDetailQuery组件提供的方法进行数据刷新
    });
  }
  // 切换到预交金查询标签时，刷新数据
  if (activeTab.value === 'depositQuery' && depositQueryRef.value) {
    nextTick(() => {
      depositQueryRef.value.handleQuery();
    });
  }
}
</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>
