<template>
  <div>
    <el-skeleton v-if="isEmpty" animated />
    <custom-form
      v-if="!isEmpty"
      class="mb-20"
      v-loading="pageLoading"
      ref="form"
      :options="widgetFormPreview"
      :form-edit="formEdit"
    ></custom-form>
  </div>
</template>
<script>
import { getPatientDetail, getFollowDetail } from "@/api/patient.js"
import { getFormDetail } from "@/api/field"
import CustomForm from "@/components/FormComponents/CustomForm/index"

export default {
  name: "MyCustomForm",
  components: { CustomForm },
  props: {
    form: {},
    patientId: {},
    followId: {},
  },
  data() {
    return {
      widgetFormPreview: {},
      loading: false,
      formLoading: false,
      formEdit: {},
      formRecordId: null,
    }
  },
  computed: {
    isEmpty() {
      return !(Object.keys(this.widgetFormPreview) || this.widgetFormPreview)
        .length
    },
    getTabFollowId() {
      return this.tabFollowId()
    },
    pageLoading() {
      return this.loading || this.formLoading
    },
  },
  watch: {
    followId: {
      handler() {
        this.getFollowDetail()
      },
      immediate: true,
    },
  },
  created() {
    this.initData()
    this.initForm()
  },

  methods: {
    initData() {
      this.getPatientDetail()
    },
    initForm() {
      this.formLoading = true
      getFormDetail(this.form.formId)
        .then((res) => {
          if (res.code === 1 && res.data) {
            const formJson = res.data.formJson
            this.$emit("setFormJson", formJson)
            const obj = eval("(" + formJson + ")")
            obj.disabled = true
            obj.closeBtn = true
            obj.detail = true
            this.widgetFormPreview = obj
          }
        })
        .finally(() => {
          this.formLoading = false
        })
    },
    getFollowDetail() {
      // 随访数据查询
      if (!this.followId) return
      this.$nextTick(() => {
        this.$refs.form && this.$refs.form.resetForm()
      })
      this.loading = true
      getFollowDetail({
        followId: this.followId,
        formId: this.form.formId,
      })
        .then((res) => {
          this.formatData(res)
        })
        .finally(() => {
          this.loading = false
        })
    },
    getPatientDetail() {
      // 筛查数据查询
      this.$nextTick(() => {
        this.$refs.form && this.$refs.form.resetForm()
      })
      if (!this.patientId || this.followId) return
      this.loading = true
      getPatientDetail({
        patientId: this.patientId,
        formId: this.form.formId,
      })
        .then((res) => {
          this.formatData(res)
        })
        .finally(() => {
          this.loading = false
        })
    },
    formatData(res, cache) {
      const d = res.data || {}
      const form = d.data || {}
      for (const key in form) {
        Object.prototype.toString.call(form[key]) == "[object Number]"
          ? (form[key] = String(form[key]))
          : ""
      }
      this.formEdit = form
    },
  },
}
</script>
