<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">
          <ul class="list">
            <li v-for="(item, index) in screenList" :key="index">
              <div class="time">{{ item.time }}</div>
              <div class="time">{{ item.code }}</div>
              <div class="time">{{ item.name }}</div>
            </li>
          </ul>
        </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,
      screenList: [
        {
          time: "2020-12-12 11:11:11",
          code: "UK102",
          name: "修改第一次随访计划",
        },
      ],
    }
  },
  provide() {
    return {
      showIndex: 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;
}
.el-aside {
  padding: 20px 0 38.5px;
  .side-content {
    width: 100%;
    height: 100%;
    border: 1px solid #ccc;
    border-radius: 4px;
    .list {
      li {
        padding: 20px 30px;
        border-bottom: 1px solid #ccc;
        cursor: pointer;
        .time {
          font-size: 14px;
          margin-bottom: 8px;
          font-family: AlibabaPuHuiTiR;
          text-align: left;
          &:first-child {
            color: #4e68ff;
          }
        }
      }
    }
  }
}
</style>
