<template>
	<div>
    <div
      v-if="(curIdx >= 0)"

    >
			<div
				v-for="(item, index) in list"
				:key="index"
				class="py-2 px-4 mb-2 rounded-lg"
      >
        <div v-if="!props.isPlat && item.isModule" class="border-0">

          <div class="text-base leading-8 ">{{ item.name }}</div>
          <div
            v-for="(child, childIdx) in item.children"
            :key="childIdx"
            class="py-2 px-4 border-0 border-b last:border-b-0 active:bg-gray-100 border-gray-100 border-solid"
          >
            <div class="flex flex-row justify-between items-center">
              <div>
                <div class="text-base leading-8">{{ child.name }}</div>
                <div class="text-gray-500 text-sm">
                  <div v-for="(moduleVal, moduleValIndex) in formateArchivesModuleValue(child, false)" :key="moduleValIndex" >

                    <template v-if="moduleVal.isPlaceholder">
                      <div v-html="moduleVal.value" :style="moduleVal.style"></div
                    ></template>
                    <template v-else>
                      <span>{{ moduleVal.label }}</span>
                      <template v-if="moduleVal.opt?.isFile">
                        <span class="align-middle">：</span>
                        <div v-for="(val, valIdx) in moduleVal.value" :key="valIdx" class="inline-block mr-2 drop-shadow">
                          <el-image v-if="moduleVal.opt?.isImage(val.url)" :src="val.url" :alt="val.name" :preview-src-list="moduleVal.value.map(v => v.url)" preview-teleported :initial-index="valIdx" fit="cover" class="h-12 w-12 rounded align-middle"></el-image>
                          <el-button v-else class="align-middle" type="primary" link tag="a" :download="val.name" :href="val.url + '?response-content-type=application/octet-stream'" target="_blank">下载附件</el-button>
                        </div>
                      </template>
                      <span v-else class="text-gray-400">：{{ moduleVal.value }}{{ moduleVal.unit }}</span>
                      <div v-if="moduleVal.date"><span>检查时间：</span><span class="text-gray-400">{{ moduleVal.date }}</span></div>
                    </template>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div v-else class="flex flex-row justify-between items-center">
          <div>
            <div class="text-base leading-8">{{ item.name }}</div>
            <div v-if="item.isModule" class="pl-4">

              <div
                v-for="(child, childIdx) in item.children"
                :key="childIdx"

              >
                <div>
                  <div
                    v-for="(moduleVal, moduleValIndex) in formateArchivesModuleValue(child, false)" :key="moduleValIndex"
                    class="py-2" :class="{
                      'pl-2': moduleVal.isChild
                    }">
                    <template v-if="moduleVal.isPlaceholder">
                      <div v-html="moduleVal.value" :style="moduleVal.style"></div
                    ></template>
                    <template v-else>
                      <span>{{ moduleVal.label }}</span>
                      <template v-if="!moduleVal.isLabel">
                        <template v-if="moduleVal.opt?.isFile">
                          <span class="align-middle">：</span>
                          <div v-for="(val, valIdx) in moduleVal.value" :key="valIdx" class="inline-block mr-2 drop-shadow">
                            <el-image v-if="moduleVal.opt?.isImage(val.url)" :src="val.url" :alt="val.name" :preview-src-list="moduleVal.value.map(v => v.url)" preview-teleported :initial-index="valIdx" fit="cover" class="h-12 w-12 rounded align-middle"></el-image>
                            <el-button v-else class="align-middle" type="primary" link tag="a" :download="val.name" :href="val.url + '?response-content-type=application/octet-stream'" target="_blank">下载附件</el-button>
                          </div>
                        </template>
                        <span v-else class="text-gray-400">：{{ moduleVal.value }}{{ moduleVal.unit }}</span>
                      </template>
                      <div v-if="moduleVal.date"><span>检查时间：</span><span class="text-gray-400">{{ moduleVal.date }}</span></div>
                    </template>
                  </div>
                </div>
              </div>
              <div v-if="!item.children.find(v => v.hasValue)" class="text-gray-400">暂未填写</div>
            </div>
            <div v-else class="text-gray-500 text-sm">
              <div v-for="(moduleVal, moduleValIndex) in formateArchivesModuleValue(item, false)" :key="moduleValIndex">
                <template v-if="moduleVal.isPlaceholder">
                  <div v-html="moduleVal.value" :style="moduleVal.style"></div
                ></template>
                <template v-else>
                  <span>{{ moduleVal.label }}</span>
                  <template v-if="!moduleVal.isLabel">
                    <template v-if="moduleVal.opt?.isFile">
                      <span class="align-middle">：</span>
                      <div v-for="(val, valIdx) in moduleVal.value" :key="valIdx" class="inline-block mr-2 drop-shadow">
                        <el-image v-if="moduleVal.opt?.isImage(val.url)" :src="val.url" :alt="val.name" :preview-src-list="moduleVal.value.map(v => v.url)" preview-teleported :initial-index="valIdx" fit="cover" class="h-12 w-12 rounded align-middle"></el-image>
                        <el-button v-else class="align-middle" type="primary" link tag="a" :download="val.name" :href="val.url + '?response-content-type=application/octet-stream'" target="_blank">下载附件</el-button>
                      </div>
                    </template>
                    <span v-else class="text-gray-400">：{{ moduleVal.value }}{{ moduleVal.unit }}</span>
                  </template>
                  <div v-if="moduleVal.date"><span>检查时间：</span><span class="text-gray-400">{{ moduleVal.date }}</span></div>
                </template>
              </div>

              <div v-if="!item.hasValue" class="text-gray-400">暂未填写</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { computed, watch, ref, reactive, inject, onActivated,onMounted, defineAsyncComponent } from "vue";
import { useRoute, useRouter } from "vue-router";
import { request, formateArchivesModuleValue } from '@/utils';

const props = defineProps({
  transferRawJson: {
    type: Object,
    default: undefined
  },
  isPlat: {
    type: Boolean,
    default: false
  },
  form: {
    type: Object,
    default: undefined
  },
  moduleId: {
    type: String,
    default: undefined
  }
})
const list = ref([])
const test = ref()


const route = useRoute()
const router = useRouter()
const curIdx = ref(0)
const moduleList = ref([])

const fetchModuleIndicators = async () => {
  list.value = props?.form || []
  console.log(list.value, props?.form);
  getFillFormData()
}
const transferRawJson = ref(props.transferRawJson)
const getFillFormData = async () => {
  console.log(transferRawJson)
  const returnAnswer = {}
  ;(transferRawJson.value || []).forEach((v, k) => {
    returnAnswer[v.answer.questionNo] = v.answer
  })
  console.log('return answer', returnAnswer);

  fillFormData(list.value, returnAnswer)
  console.log('test', list.value);
}
const fillFormData = (arr, data) => {

  arr.forEach(v => {
    if (v.fields?.length) {
      v.fields.forEach(filed => {
        if (filed.extra?.subjects) {
          filed.extra?.subjects.forEach(subject => {
            subject.returnAnswer = data[subject.sn]
          })
        } else {
          if (filed.extra?.sn) {
            filed.extra.returnAnswer = data[filed.extra.sn]
          }
        }
      })
    }
    if (v.extra?.subjects) {
      v.extra?.subjects.forEach(subject => {
        subject.returnAnswer = data[subject.sn]
      })
    } else {
      if (v.extra?.sn) {
        v.extra.returnAnswer = data[v.extra.sn]
      }
    }
  })
  return arr
}
watch(() => [props.form, props.transferRawJson], () => {
  fetchModuleIndicators()
}, {
  immediate: true,
})

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