<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%">
      <div
        style="
          height: 40px;
          display: flex;
          align-items: center;
          border-bottom: solid 2px #e4e7ed;
          padding: 0 15px;
          background: linear-gradient(90deg, #f0f8ff, #e6f7ff);
        "
      >
        <div class="nav-button-group">
          <el-button
            v-for="nav in navigationButtons"
            :key="nav.path"
            :type="currentRoute.path === nav.path ? 'primary' : 'default'"
            size="small"
            @click="navigateTo(nav.path)"
            class="nav-button"
            :class="{ 'active-nav': currentRoute.path === nav.path }"
          >
            <el-icon v-if="nav.icon"><component :is="nav.icon" /></el-icon>
            <span>{{ nav.label }}</span>
          </el-button>
        </div>
      </div>
      <div
        style="
          height: 50px;
          border-bottom: 2px solid #e4e7ed;
          display: flex;
          align-items: center;
          justify-content: space-between;
        "
      >
        <div>
          <el-radio-group class="ml10" v-model="drugType">
            <el-radio-button label="西药" value="1" />
            <el-radio-button label="中药" value="2" />
          </el-radio-group>
          <el-radio-group class="ml20" v-model="isDetails" @change="handleRadioChange">
            <el-radio-button label="明细" value="1" />
            <el-radio-button label="汇总" value="2" />
          </el-radio-group>
          <span class="descriptions-item-label">截止时间：</span>
          <el-date-picker
            v-model="deadline"
            type="datetime"
            format="YYYY/MM/DD HH:mm:ss"
            value-format="YYYY/MM/DD HH:mm:ss"
            :clearable="false"
            @change="handleGetPrescription"
          />
          <el-radio-group v-model="therapyEnum" class="ml20" @change="handleRadioChange">
            <el-radio :value="undefined">全部</el-radio>
            <el-radio :value="1">长期</el-radio>
            <el-radio :value="2">临时</el-radio>
          </el-radio-group>
          <el-button class="ml20" type="primary" plain @click="handleGetPrescription">
            查询
          </el-button>
        </div>
        <div>
          <span class="descriptions-item-label">全选：</span>
          <el-switch v-model="chooseAll" @change="handelSwicthChange" />
          <el-button class="ml20 mr20" type="primary" @click="handleExecute"> 汇总领药 </el-button>
        </div>
      </div>
      <PrescriptionList
        v-if="isDetails == 1"
        ref="prescriptionRefs"
        :exeStatus="exeStatus"
        :requestStatus="requestStatus"
        :deadline="deadline"
      />
      <SummaryMedicineList v-else />
      <!-- <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, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import PatientList from './components/patientList.vue';
import PrescriptionList from './components/prescriptionList.vue';
import SummaryMedicineList from './components/summaryMedicineList.vue';

const { proxy } = getCurrentInstance();
const router = useRouter();
const currentRoute = useRoute();

const activeName = ref('preparation');
const active = ref('first');
const exeStatus = ref(1);
const deadline = ref(proxy.formatDateStr(new Date(), 'YYYY-MM-DD') + ' 23:59:59');
const requestStatus = ref(3);
const chooseAll = ref(false);
const drugType = ref('1');
const isDetails = ref('1');

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

// 导航按钮配置
const navigationButtons = ref([
  {
    label: '入出转',
    path: '/inHospital/statistics/inOut',
    icon: 'Document',
  },
  {
    label: '护理记录',
    path: '/inHospital/statistics/nursingRecord',
    icon: 'MedicineBox',
  },
  {
    label: '三测单',
    path: '/inHospital/statistics/tprChart',
    icon: 'List',
  },
  {
    label: '医嘱执行',
    path: '/inHospital/statistics/medicalOrderExecution',
    icon: 'Back',
  },
  {
    label: '医嘱校对',
    path: '/inHospital/statistics/medicalOrderProofread',
    icon: 'Back',
  },
  {
    label: '汇总发药申请',
    path: '/inHospital/statistics/drugDistribution',
    icon: 'Back',
  },
  {
    label: '住院记账',
    path: '/inHospital/statistics/InpatientBilling',
    icon: 'Back',
  },
]);

// 页面导航方法
const navigateTo = (path) => {
  router.push(path);
};

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

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;
  }
}

function handleGetPrescription() {
  prescriptionRefs.value.handleGetPrescription();
}

function handelSwicthChange() {
  if (chooseAll.value) {
    proxy.$refs['prescriptionRefs'].selectAllRows();
  } else {
    proxy.$refs['prescriptionRefs'].clearSelection();
  }
}

function handleRadioChange(value) {
  if (value == '1') {
    handleGetPrescription();
  }
}

function handleExecute() {
  proxy.$refs['prescriptionRefs'].handleMedicineSummary();
}

provide('handleGetPrescription', (value) => {
  prescriptionRefs.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;
}

.nav-button-group {
  display: flex;
  gap: 10px;
}

.nav-button {
  transition: all 0.3s ease;
  border-radius: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.nav-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.nav-button.active-nav {
  box-shadow: 0 4px 8px rgba(64, 158, 255, 0.3);
}

.nav-button :deep(.el-icon) {
  margin-right: 5px;
}
</style>