<template>
  <div>
    <el-container v-loading="fromLoading">
      <el-main class="transition-box">
        <el-empty v-if="!isEmpty" description="暂无数据"></el-empty>
        <template v-if="isEmpty">
          <div ref="my-form" class="my-form">
            <custom-form
              ref="customForm"
              class="mb-20"
              :options="jsonList[1]"
              :form-edit="form"
            ></custom-form>
            <custom-form
              ref="form"
              :options="jsonList[2]"
              class="mb-20"
              :form-edit="form"
            ></custom-form>
            <custom-form
              ref="form"
              :options="jsonList[3]"
              class="mb-20"
              :form-edit="form"
            ></custom-form>
            <custom-form
              ref="form"
              class="mb-20"
              :options="jsonList[4]"
              :form-edit="form"
            ></custom-form>
          </div>
        </template>
      </el-main>
      <el-aside
        :width="sideWidth"
        class="transition-box"
        :class="{ hidden: !asideShow }"
      >
        <div class="side-content"></div>
      </el-aside>
    </el-container>
  </div>
</template>
<script>
import { mapGetters } from "vuex"
import CustomForm from "@/components/FormComponents/CustomForm/index"
import { getCurrentFormByType } from "@/api/coop-group.js"
import { getFormDetail } from "@/api/field"
export default {
  components: { CustomForm },
  data() {
    return {
      fromLoading: true,
      formTabs: [],
      formTabsList: [],
      jsonList: [],
      form: {
        name: "123",
        phone: "18712412341",
        age: "18",
        is_continue_follow: "1",
      },
      asideShow: true,
    }
  },
  computed: {
    ...mapGetters({
      group: ["user/group"],
    }),
    isEmpty() {
      return this.jsonList.length
    },
    sideWidth() {
      return this.asideShow ? "200px" : "0px"
    },
  },
  watch: {},
  created() {
    this.getCurrentFormByType()
  },
  mounted() {},
  methods: {
    getCurrentFormByType(type = 1) {
      this.fromLoading = true
      getCurrentFormByType({
        type,
        groupId: this.group.groupId,
      })
        .then((res) => {
          if (res.code === 1) {
            const formTabs = []
            this.formTabsList = res.data.map((item, index) => {
              if (index === 0) {
                formTabs.push({
                  silent: false,
                  ...item,
                  label: item.tabName,
                })
              } else {
                formTabs.push({
                  id: item.id,
                  formId: item.formId,
                  silent: true,
                  label: item.tabName,
                })
              }
              return {
                ...item,
                silent: false,
                label: item.tabName,
              }
            })
            this.formTabs = formTabs
          }
        })
        .finally(() => {
          this.jsonList = []
          let i = 0
          this.initForm(i)
        })
    },
    initForm(i) {
      let formId = this.formTabs[i].formId
      this.formloading = true
      getFormDetail(formId)
        .then((res) => {
          if (res.code === 1 && res.data) {
            const formJson = res.data.formJson
            const obj = eval("(" + formJson + ")")
            obj.disabled = true
            obj.closeBtn = true
            obj.detail = true
            this.jsonList.push(obj)
            if (i == 4) {
              console.log(this.jsonList)
              this.fromLoading = false
            }
          }
        })
        .finally(() => {
          if (i < this.formTabs.length - 1) {
            i++
            this.initForm(i)
          }
        })
    },
  },
}
</script>
<style lang="scss" scoped>
.md-20 {
  margin-bottom: 20px;
}
</style>