vue
<template>
  <!-- <div class="bg-[#f0f2f5] sticky z-10 top-0 h-4"></div> -->
  <div
    class="bg-white p-4 pb-0 sticky z-10 top-0 flex space-x-2 shadow-sm mr-4"
  >
    <!-- <DiseaseVisitData /> -->
    <el-form :inline="true" class="flex-1">
      <el-form-item label="" required>
        <el-select
          v-model="curDiseaseId"
          filterable
          clearable
          @change="
            diseaseVisitDateList = diseaseVisitList.find(
              v => v.diseaseId == curDiseaseId
            )?.list;
            sn = '';
            transferRawJson = undefined;
          "
        >
          <el-option
            v-for="(item, index) in diseaseVisitList"
            :key="index"
            :label="item.diseaseName"
            :value="item.diseaseId"
          ></el-option
        ></el-select>
      </el-form-item>
      <el-form-item label="选择回访数据" required>
        <el-select
          v-model="sn"
          :disabled="!curDiseaseId"
          filterable
          clearable
          @change="getDetailBySn"
          @clear="transferRawJson = undefined"
        >
          <el-option
            v-for="(item, index) in diseaseVisitDateList"
            :key="index"
            :label="item.date"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <el-form-item v-if="transferRawJson && DiseaseVisitData">
      <el-button type="primary" @click="save">保存修改</el-button>
    </el-form-item>
  </div>
  <div>
    <component
      v-if="transferRawJson && DiseaseVisitData"
      :is="DiseaseVisitData"
      ref="diseaseVisitDataRef"
    >
      <template v-if="curDiseaseId == 'visitRecord'" #form>
        <div></div>
      </template>
      <template #save>
        <div></div>
      </template>
    </component>
  </div>
</template>

<script setup>
import {
  ref,
  reactive,
  onMounted,
  watch,
  provide,
  defineAsyncComponent,
  nextTick
} from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRoute, useRouter } from "vue-router";

import { request, parseJsonData } from "@/utils";
import dayjs from "dayjs";
import { QuestionFilled, ArrowUp, ArrowDown } from "@element-plus/icons-vue";

const DiseaseVisitData = defineAsyncComponent(() =>
  import("@/views/dataCenter/components/DiseaseVisitData.vue")
);
const [route, router] = [useRoute(), useRouter()];
const diseaseVisitDataRef = ref();
const archivesId = ref(route.query.archivesId);
provide("archivesId", archivesId);
const transferRawJson = ref();
provide("transferRawJson", transferRawJson);
const formId = ref();
provide("formId", formId);
const transferRawJsonDiseaseId = ref();
provide("transferRawJsonDiseaseId", transferRawJsonDiseaseId);

const curDiseaseId = ref();
const sn = ref();
provide("sn", sn);
const diseaseVisitList = ref([]);
const diseaseVisitDateList = ref([]);

const getDiseaseVisitData = async () => {
  const { data } = await request.post(
    "/idcService/mechanism/medicalData/transferItem/diseaseVisit/field/query",
    {
      archivesId: route.query.archivesId || route.query.id
    }
  );
  diseaseVisitList.value = data.list;
  let max = {
    diseaseId: "",
    id: "",
    date: ""
  };
  (data.list || []).forEach(v => {
    (v.list || []).forEach(v2 => {
      const d = +new Date(v2.date);
      if (!max.date) {
        max.date = d;
        max.diseaseId = v.diseaseId;
        max.id = v2.id;
      } else {
        if (d > max.date) {
          max.date = d;
          max.diseaseId = v.diseaseId;
          max.id = v2.id;
        }
      }
    });
  });
  console.log(max);
  if (max.date) {
    curDiseaseId.value = max.diseaseId;
    diseaseVisitDateList.value = diseaseVisitList.value.find(
      v => v.diseaseId == curDiseaseId.value
    )?.list;
    sn.value = max.id;
    getDetailBySn(max.id);
  }
};
getDiseaseVisitData();

const getDetailBySn = async v => {
  if (!v) return;

  const { data } = await request.get(`/medicalData/detail`, {
    params: {
      sn: sn.value
    }
  });
  transferRawJson.value = undefined;
  nextTick(() => {
    const temp = parseJsonData(data.detail.transferRawJson);

    transferRawJson.value = temp?.answers || temp || [];
    transferRawJsonDiseaseId.value = temp?.diseaseId;
    formId.value = temp?.formId;
  });
};
const save = async () => {
  await diseaseVisitDataRef.value?.submitFormData();
  getDetailBySn(sn.value);
};
</script>

<style lang="scss" scoped></style>
