<template>
  <!-- 组件 -->
  <div>
    <el-container v-loading="fromLoading">
      <el-main class="transition-box">
        <el-empty v-if="!isEmpty && noData" description="暂无数据"></el-empty>
        <template v-if="isEmpty && !noData">
          <div ref="my-form" class="my-form">
            <template v-for="(item, index) in jsonList">
              <custom-form
                :key="index"
                ref="customForm"
                class="mb-20"
                :options="item"
                :form-edit="formList"
              ></custom-form
            ></template>
          </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"
import { getPatientDetail } from "@/api/patient.js"
export default {
  nameL: "组件",
  components: { CustomForm },
  props: {
    patientId: String,
    noData: Boolean,
  },
  data() {
    return {
      fromLoading: false,
      formTabs: [],
      formTabsList: [],
      jsonList: [],
      formList: {},
      asideShow: false,
      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: {
    patientId(v) {
      this.getCurrentFormByType()
    },
    noData(v) {
      if (v) {
        this.jsonList = []
      }
    },
  },
  created() {},
  mounted() {},
  methods: {
    // 获取当前用户的表单
    getPatientDetail() {
      console.log(this.formTabs)
      for (let i = 0; i < this.formTabs.length; i++) {
        getPatientDetail({
          patientId: this.patientId,
          formId: this.formTabs[i].formId,
        }).then((res) => {
          if (res.code == 1) {
            const { data } = res.data
            this.formList = { ...this.formList, ...data }
            // console.log(this.formList)
          }
        })
      }
    },
    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 == this.formTabs.length - 1) {
              // console.log(this.jsonList)
              this.fromLoading = false
            }
          }
        })
        .finally(() => {
          // console.log(this.formTabs)
          if (i < this.formTabs.length - 1) {
            i++
            this.initForm(i)
          }
          // console.log(this.jsonList)
          if (this.jsonList.length == this.formTabs.length) {
            this.$nextTick(() => {
              this.getPatientDetail()
            })
          }
        })
    },
  },
}
</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>