<template>
  <!-- 
    整页表单的页签内框架,整合分片表单
    v 1.0
    2021-05-12
    Lufthafen
  -->
  <container>
    <!-- 如果不想使用锚点,删除a-row->a-col,只留内部的a-card层即可 -->
    <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-curtainwall-${index}-${id}`" :key="index">
              <h5 v-if="part.title">{{part.title}}</h5>
              <component
                :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-curtainwall-${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'],

  data() {
    return {
      parts: [
        /**
         * {
         *    title: '标题',
         *    component: () => import('...'),
         * }
         */
        {
          title: '基本资料',
          component: () => import('./base'),
        },
        {
          title: '玻璃幕墙',
          component: () => import('./glass'),
        },
        {
          title: '采光顶',
          component: () => import('./skylight'),
        },
        {
          title: '雨棚',
          component: () => import('./cnopy'),
        },
        {
          title: '石材',
          component: () => import('./stone'),
        },
        {
          title: '金属',
          component: () => import('./metal'),
        },
        {
          title: '其他幕墙',
          component: () => import('./other'),
        },
        {
          title: '调查单位',
          component: () => import('./unit'),
        },
        {
          title: '安全检查',
          component: () => import('./patrol'),
        },
      ],
    };
  },

  methods: {
    /**
     * 循环子组件中的onGetData
     */
    onGetData() {
      return new Promise(async (resolve, reject) => {
        let formData = {};
        for (let i = 0; i < this.$refs.forms.length; i++) {
          const form = this.$refs.forms[i];
          try {
            const data = await form.onGetData();
            formData = {
              ...formData,
              ...data,
            };
          } catch {
            reject();
            return;
          }
        }
        resolve(formData);
      });
    },
  },
};
</script>