<template>
  <div
    class="bg-white border-0 mb-4 sticky top-0 border-gray-100 border-solid border-b"
  >
    <div
      v-for="(item, index) in formList"
      class="hover:bg-gray-50 cursor-pointer p-4 w-fit border-b border-solid text-gray-500"
      :class="{
        'text-gray-800 bg-gray-50 border-b-2 border-blue-400':
          curForm == item.id
      }"
      :key="item.id"
      :index="String(item.id)"
      @click="curForm = item.id"
    >
      <div class="flex items-center">
        <span>{{ item.name }}</span>
      </div>
    </div>
  </div>
  <div class="p-4">
    <div class="px-4 pb-4">
      <ArchivesModule is-plat :module-id="curForm" :form="form" />
    </div>
  </div>
</template>

<script setup>
import {
  computed,
  ref,
  shallowRef,
  provide,
  nextTick,
  watch,
  inject,
  defineAsyncComponent
} from "vue";
import { useRoute, useRouter } from "vue-router";

import { ElMessage } from "element-plus";
import { request, parseJsonData } from "@/utils";
const ArchivesModule = defineAsyncComponent(() =>
  import("@/views/dataCenter/components/ArchivesModule.vue")
);
const refreshArchives = inject("refreshArchives");
const route = useRoute();
const router = useRouter();
const formList = ref([]);
const curForm = ref();
const getFormTemplate = async () => {
  const { data } = await request.get(
    `/archivesService/mechanism/form/template/detail`,
    {
      params: {
        archivesId: route.query.archivesId
      }
    }
  );
  formList.value = data.template.forms?.map(v => {
    return {
      icon: v.icon,
      selectIcon: v.icon,
      name: v.name,
      id: v.id,
      value: v.id
    };
  });
  if (formList.value?.length) {
    curForm.value = formList.value[0].id;
    getFormDetail();
  }
};
getFormTemplate();
const form = ref();

const transferRawJson = ref();
provide("transferRawJson", transferRawJson);

const getFormDetail = async () => {
  const { data } = await request.get(`/archivesService/mechanism/form/detail`, {
    params: {
      archivesId: route.query.archivesId,
      formId: curForm.value,
      needCheckItemId: 1
    }
  });
  form.value = data.detail;
  getFillFormData();
};
provide("refreshFormDetail", getFormDetail);
const getFillFormData = async () => {
  let ids = [];
  form.value.fields.forEach(v => {
    if (v.fields?.length) {
      v.fields.forEach(filed => {
        if (filed.extra?.subjectIds) {
          ids.push(...filed.extra.subjectIds);
        } else {
          filed.extra?.sn && ids.push(filed.extra?.sn);
        }
      });
    }

    if (v.extra?.subjectIds) {
      ids.push(...v.extra.subjectIds);
    } else {
      v.extra?.sn && ids.push(v.extra.sn);
    }
  });
  console.log("ids", ids);
  ids = [...new Set(ids)];
  if (!ids.length) return;
  const { data } = await request.post(
    `/archivesService/mechanism/form/data/query`,
    {
      archivesId: route.query.archivesId,
      ids
    }
  );
  transferRawJson.value = (data.list || []).map(v => {
    return {
      ...v,
      answer: v.returnAnswer
    };
  });
  console.log("transferRawJson", transferRawJson.value);
};

const submitSimpleFormData = async (answers, close) => {
  const req = {
    archivesId: route.query.archivesId,
    answers
  };
  console.log(req);
  await request.post("/archivesService/mechanism/form/submit", req);
  ElMessage.success("操作成功");
  close();
  getFormDetail();
  refreshArchives && refreshArchives();
};
provide("submitSimpleFormData", submitSimpleFormData);
</script>

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