<template>
  <container>
    <!-- 如果不想使用锚点,删除a-row->a-col,只留内部的template层即可 -->
    <a-row :gutter="16" type="flex">
      <a-col flex="1">
        <br />
        <a-card class="yo-form-page--body">
          <template v-for="(part, index) in parts">
            <section :id="`form-${index}-${id}`" :key="index">
              <h5 v-if="part.title">{{part.title}}</h5>
              <component
                :frame="frame"
                :is="part.component"
                :key="index"
                :param="param"
                ref="forms"
                v-if="part.component"
              />
            </section>
            <a-divider :key="`divider-${index}`" v-if="index < parts.length - 1" />
          </template>
        </a-card>
      </a-col>
      <a-col flex="240px">
        <a-anchor
          :get-container="()=> $el.parentNode"
          :offset-top="24"
          :target-offset="48"
          :wrapper-style="{ backgroundColor: 'transparent' }"
          @click.prevent
        >
          <a-anchor-link
            :href="`#form-${index}-${id}`"
            :key="index"
            :title="part.title"
            v-for="(part, index) in parts"
          />
        </a-anchor>
      </a-col>
    </a-row>
  </container>
</template>
<script>
export default {
  props: ['id', 'param', 'frame'],

  data() {
    return {
      parts: [
        {
          title: '建筑物基本信息',
          component: () => import('./building'),
        },
        {
          title: '权属情况',
          component: () => import('./ownership'),
        },
        // {
        //   title: '管理情况',
        //   component: () => import('./manager'),
        // },
        {
          title: '调查情况',
          component: () => import('./investigation'),
        },
        {
          title: '鉴定治理',
          component: () => import('./identification'),
        },
        {
          title: '图纸资料存档处',
          component: () => import('./drawing'),
        },
        {
          title: '相关附件资料',
          component: () => import('./attachments'),
        },
        // // {
        // //   title: '物业维修资金',
        // //   component: () => import('./fund'),
        // // },
        {
          title: '建筑概貌',
          component: () => import('./aspect'),
        },
        {
          title: '调查单位',
          component: () => import('./unit'),
        },
      ],
    };
  },
  methods: {
    /**
     * 循环子组件中的onGetData
     */
    onGetData() {
      return new Promise(async (resolve, reject) => {
        let formData = {},
          flag = true;
        for (let i = 0; i < this.$refs.forms.length; i++) {
          const form = this.$refs.forms[i];
          try {
            const data = await form.onGetData();
            formData = this.$_.defaultsDeep(formData, data);
          } catch (e) {
            flag = false;
            reject(e);
          }
        }
        if (flag) {
          resolve(formData);
        }
      });
    },
  },
};
</script>