<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>
<style scoped lang="scss">
.el-main {
  position: relative;
  padding: 0;
  // box-shadow: 0px 5px 4px red;

  .arrow {
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
    font-size: 22px;
    z-index: 9;
  }
  .header {
    height: 5px;
    box-shadow: 0px 3px 4px rgb(0 21 41 / 8%);
    padding-right: 20px;
    position: relative;
    font-size: 15px;
    z-index: 999;
  }
}
.el-aside {
  padding-left: 10px;
  border-left: 1px solid #ccc;
  .side-content {
    height: calc(100vh - #{"272px"});
    // overflow: auto;
  }
}
.my-form {
  // height: calc(100vh - #{"310px"});
  overflow-y: auto;
  padding-top: 20px;
  // position: relative;
  &::-webkit-scrollbar-thumb {
    background-color: #fff;
  }
  &:hover::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.4);
  }
  &.no-scroll {
    height: auto;
  }
}
.label {
  font-size: 14px;
  color: #8492a6;
  line-height: 38px;
  float: left;
  margin-right: 20px;
}
.value {
  font-size: 14px;
  line-height: 38px;
  float: left;
  font-weight: 600;
  margin-right: 50px;
}
.el-slider {
  float: left;
  width: 150px;
}
</style>