<template>
  <div class="m-4">
    <div class="mb-4">
      <XTTitle :title="title" :go-back="true" />
    </div>
    <div class="py-2 bg-white">
      <a-tabs v-model:activeKey="activeKey" :destroyInactiveTabPane="true">
        <a-tab-pane
          v-for="item in tabData"
          :key="item.key"
          :tab="item.title"
          :class="'tab-' + item.key"
        >
          <!-- 基础病历 0 -->
          <div v-if="item.value == 0 && info.id">
            <PatientBasic :info="info" />
          </div>
          <!-- 血管通路 1 -->
          <div v-if="item.value == 1 && info.id">
            <VascularAccess :info="info" />
          </div>
          <!-- 透析处方 2 -->
          <div v-if="item.value == 2 && info.id">
            <Formula :info="info" />
          </div>
          <!-- 查房记录 5 -->
          <div v-if="item.value == 5 && info.id">
            <Patrolward :info="info" />
          </div>
          <!-- 诊断记录 6 -->
          <div v-if="item.value == 6 && info.id">
            <DiagnosisHistory :info="info" />
          </div>
          <!-- 医疗文书 8 -->
          <div v-if="item.value == 8 && info.id">
            <MedicalDocuments :info="info" />
          </div>
          <!-- 转归 9 -->
          <div v-if="item.value == 9 && info.id">
            <PatientReturn :info="info" />
          </div>
        </a-tab-pane>
      </a-tabs>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { BasicTab, BasicTabActive } from './data';
  import PatientBasic from '../patientBasic/index.vue';
  import VascularAccess from '../vascularAccess/index.vue';
  import Formula from '../formula/index.vue';
  import Patrolward from '../patrolward/index.vue';
  import DiagnosisHistory from '../diagnosisHistory/index.vue';
  import PatientReturn from '../patientReturn/index.vue';
  import MedicalDocuments from '../medicalDocuments/index.vue';
  import { useRoute } from 'vue-router';
  import { XTTitle } from '/@/components/XTTitle/index';

  const route = useRoute();
  console.log('🚀 ~ file: index.vue:25 ~ route:', route);
  const info = ref({
    id: String(route.query?.id),
    accessId: String(route.query?.accessId),
    name: route.query?.name,
    gender: route.query?.gender,
    age: route.query?.age,
  });
  const activeKey = ref(BasicTabActive);
  const tabData = ref(BasicTab);
  const title = `病历详情 — ${info.value.name}（${info.value.gender}${info.value.age}）`;
  if (route.query?.activeKeys) {
    BasicTab.forEach(item => {
      if (parseInt(route.query?.activeKeys.toString()) == item.value) {
        activeKey.value = item.key;
      }
    });
  }
</script>

<style lang="less" scoped>
  ::v-deep(.ant-tabs-tab) {
    padding: 12px;
  }

  ::v-deep(.ant-tabs-tabpane) {
    padding: 12px;
  }

  .tab-medicalDocuments {
    padding: 0;
  }
</style>
