<script setup lang="ts">
import { queryMedicalRecInfo } from "@/api/medicalRecord";
import BasicInfo from "./compontents/basicInfo.vue";
import AskInquiry from "./compontents/askInquiry.vue";
import DisposalPlan from "./compontents/DisposalPlan.vue";
import { ref } from "vue";
import { reactive, onMounted } from "vue";
import { useRoute } from "vue-router";

const activeName = ref(["1", "2"]);
const showFlag = ref(false);
let detailInfo = reactive({
  patient: {},
  physicalList: [],
  ancillaryList: [],
  qaList: [],
  diseaseName: "",
  treatmentPlanList: [],
  patientSelfDesc: ""
});
const route = useRoute();
const getDetail = async () => {
  const res: any = await queryMedicalRecInfo({
    id: route.query.id
  });
  detailInfo = res.data;
  detailInfo.patient.patientSelfDesc = detailInfo.patientSelfDesc;
  showFlag.value = true;
};
onMounted(() => {
  getDetail();
});
</script>

<template>
  <div class="case_detail">
    <el-collapse v-if="showFlag" class="case_detail_main" v-model="activeName">
      <el-collapse-item name="1">
        <template #title>
          <div class="title">
            <span>病历信息</span>
          </div>
        </template>
        <BasicInfo
          :dataInfo="detailInfo.patient"
          :diseaseName="detailInfo.diseaseName"
        />
      </el-collapse-item>
      <el-collapse-item name="2">
        <template #title>
          <div class="title">
            <span>问诊检查</span>
          </div>
        </template>
        <AskInquiry
          :bodyList="detailInfo?.physicalList"
          :supportList="detailInfo?.ancillaryList"
        />
      </el-collapse-item>
      <el-collapse-item name="3">
        <template #title>
          <div class="title">
            <span>问诊问题</span>
          </div>
        </template>
        <div class="question_list">
          <div v-for="(item, index) in detailInfo.qaList" :key="index">
            {{ item.questionList[0] }}
          </div>
        </div>
      </el-collapse-item>
      <el-collapse-item name="4">
        <template #title>
          <div class="title">
            <span>处置计划</span>
          </div>
        </template>
        <DisposalPlan :dataList="detailInfo.treatmentPlanList" />
      </el-collapse-item>
    </el-collapse>
  </div>
</template>
<style lang="scss" scoped>
.case_detail {
  :deep(.el-collapse-item__header) {
    width: 100%;
    height: 40px;
    background: rgb(0 127 245 / 9%);
  }

  :deep(.el-collapse-item) {
    margin-bottom: 16px;
  }

  .title {
    width: 100%;
    padding-left: 16px;
  }
}
</style>
