<template>
  <div class="w-1/5 min-w-[320px] p-4 space-y-2 text-sm">
    <div class="bg-white p-4 flex items-start">
      <div class="w-12 h-12">
        <img
          :src="archivesInfo?.gender == 1 ? man : woman"
          round
          class="w-12 h-12 rounded-full mr-4"
        />
      </div>
      <div class="flex-1 pl-4 space-y-2">
        <p>{{ archivesInfo.name }}</p>
        <div class="flex items-center my-1">
          <div class="flex items-center mr-4">
            <img src="@/assets/icon-gender.png" alt="" class="w-5 h-5" />
            <span class="text-sm text-gray-700">{{
              archivesInfo.gender == 1 ? "男" : "女"
            }}</span>
          </div>
          <div class="flex items-center my-1">
            <img src="@/assets/icon-birthday.png" alt="" class="w-5 h-5" />
            <span class="text-sm text-gray-700"
              >{{ formatAge(archivesInfo.birthday) }}岁</span
            >
          </div>
        </div>
        <div class="flex items-center">
          <span>档案号：</span>
          <span>{{ archivesInfo.id }}</span>
          <CopyDocument
            v-if="archivesInfo.id"
            class="w-4 text-blue-500 cursor-copy ml-1"
            v-copy="archivesInfo.id"
          ></CopyDocument>
        </div>
        <div class="flex items-center">
          <span
            >联系方式：{{
              archivesInfo.accounts.find(v => v.type === 1)?.account
            }}</span
          >
          <CopyDocument
            v-if="archivesInfo?.accounts?.find(v => v.type === 1)?.account"
            class="w-4 text-blue-500 cursor-copy ml-1"
            v-copy="archivesInfo.accounts.find(v => v.type === 1)?.account"
          ></CopyDocument>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
// import ManagementPlan from "./components/ManagementPlan.vue";
import {
  CopyDocument,
  Fold,
  ArrowLeft,
  ArrowRight
} from "@element-plus/icons-vue";
import man from "@/assets/icon-man.png";
import woman from "@/assets/icon-woman.png";
import {
  formatAge,
  parseJsonData,
  request,
  transformDataExpand
} from "@/utils";

const props = defineProps({
  id: {
    type: String
  }
});
const archivesInfo = ref({
  id: "",
  name: "",
  avatar: "",
  gender: 0,
  birthday: "",
  mainArchivesId: "",
  accounts: []
});

const highRiskDiseaseList = ref([]);
const recommendValues = ref({
  medicalHistory: [],
  medicationStatus: [],
  susceptibilityGene: []
});
const getArchivesDetail = async () => {
  if (!props.id) return;

  const { data } = await request.get(
    "/archivesService/mechanism/archives/detail",
    {
      params: {
        archivesId: props.id
      }
    }
  );
  archivesInfo.value = data.detail;
  highRiskDiseaseList.value = data.highRiskDiseaseList;
  recommendValues.value = data.recommendValues;
};
watch(
  () => props.id,
  () => {
    console.log("监听成功");
    getArchivesDetail();
  },
  { deep: true, immediate: true }
);
</script>
