<template>
  <div>
    <slot name="form">
      <div v-if="!transferRawJsonDiseaseId || props.formShow" class="p-4 pb-0">
        <el-form :inline="true">
          <el-form-item label="选择疾病" required>
            <el-select
              v-model="curNode"
              filterable
              clearable
              :disabled="transferRawJsonDiseaseId"
              @change="nodeChange"
            >
              <el-option
                v-for="(item, index) in nodes"
                :key="index"
                :label="item.properties?.name"
                :value="item.id"
              ></el-option
            ></el-select>
          </el-form-item>
          <el-form-item label="选择回访数据" required>
            <el-select
              v-model="formId"
              :disabled="!curNode || transferRawJsonDiseaseId"
              filterable
              clearable
              @change="formChange"
              @clear="form = undefined"
            >
              <el-option
                v-for="(item, index) in formList"
                :key="index"
                :label="item.properties?.name"
                :value="item.properties?.['表单ID']"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
    </slot>

    <div
      :class="{
        'pt-4': transferRawJsonDiseaseId
      }"
    >
      <ArchivesModule is-plat :module-id="formId" :form="form" />
    </div>
    <slot name="save">
      <div class="text-right mt-4 px-4">
        <el-button
          v-if="form"
          type="primary"
          :disabled="!form && !transferRawJson.length"
          @click="submitFormData"
          >保存</el-button
        >
      </div>
    </slot>
  </div>
</template>
<script setup>
import {
  computed,
  watch,
  ref,
  reactive,
  onMounted,
  shallowRef,
  provide,
  inject,
  defineAsyncComponent
} from "vue";

import { useRoute, useRouter } from "vue-router";
import {
  CopyDocument,
  Fold,
  ArrowLeft,
  ArrowRight
} from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { request, parseJsonData, findScope } from "@/utils";
import dayjs from "dayjs";

const props = defineProps({
  formShow: {
    type: Boolean,
    default: false
  }
});
const ArchivesModule = defineAsyncComponent(() =>
  import("@/views/dataCenter/components/ArchivesModule.vue")
);

const [route, router] = [useRoute(), useRouter()];

const sn = inject("sn");
const archivesId = inject("archivesId");
const transferRawJson = inject("transferRawJson");
const transferRawJsonFormId = inject("formId");
const transferRawJsonDiseaseId = inject("transferRawJsonDiseaseId");

const nodes = shallowRef([]);
const searchNodes = async () => {
  const { data } = await request.get(`/graphService/open/node/paginate`, {
    params: {
      page: 1,
      pageSize: 9999,
      tag: "可回访"
    }
  });
  nodes.value = data.list;
};

const searchRelateNodes = async (id, relationship) => {
  if (!id) return;
  const { data } = await request.get(`/graphService/open/node/related`, {
    params: {
      id,
      relationship
    }
  });
  return data;
};
const curNode = ref("");
const formId = ref("");
const form = ref();
const formList = shallowRef([]);
const nodeChange = async v => {
  const data = await searchRelateNodes(v, "回访表单信息");
  formList.value = data;
  formId.value = "";
  form.value = undefined;
};
const formChange = v => {
  if (!formId.value) return;
  getFormDetail();
};
const getFormDetail = async () => {
  const { data } = await request.get(`/formService/mechanism/form/detail`, {
    params: {
      id: formId.value,
      needCheckItemId: 1
    }
  });
  form.value = data.detail;
  // getFillFormData();
};
const submitSimpleFormData = async (answers, close) => {
  console.log(answers);
  const answersNo = answers.map(v => v.answer.questionNo);
  transferRawJson.value = [
    ...transferRawJson.value?.filter(
      v => !answersNo.includes(v.answer.questionNo)
    ),
    ...answers
  ];
  close && close();
};
provide("submitSimpleFormData", submitSimpleFormData);
const submitFormData = async () => {
  const req = {
    data: {
      formId: formId.value,
      diseaseId: curNode.value,
      answers: transferRawJson.value
    },
    sn: route.query.sn || (sn && sn.value)
  };
  console.log(req);
  await request.post(
    `/idcService/mechanism/medicalData/update/transferResult`,
    req
  );
  ElMessage.success("操作成功");
};

onMounted(async () => {
  if (!transferRawJsonDiseaseId.value) {
    searchNodes();
    // curNode.value = transferRawJsonDiseaseId.value;
    // formList.value = await searchRelateNodes(
    //   transferRawJsonDiseaseId.value,
    //   "回访表单信息"
    // );
  } else {
    curNode.value = transferRawJsonDiseaseId.value;
    if (props.formShow) {
      searchNodes();
      formList.value = await searchRelateNodes(
        transferRawJsonDiseaseId.value,
        "回访表单信息"
      );
    }
  }
  if (transferRawJsonFormId.value) {
    formId.value = transferRawJsonFormId.value;
    getFormDetail();
  }
});
defineExpose({
  submitFormData
});
</script>

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