<template>
  <!-- 
    整页表单的外框架
    v 1.2
    2021-06-03
    Lufthafen
  -->
  <div class="yo-form-page">
    <!-- 表单主体 -->
    <!-- 如果不想使用锚点,删除a-row->a-col,只留内部的a-card层即可 -->
    <container>
      <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
                  :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"
            :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>

    <!-- 底部工具栏 -->
    <div class="yo-form-page--bar">
      <container>
        <div class="yo-form-page--bar-inner">
          <span>
            <!-- 可以在工具栏中增加其他控件(只能在一行内) -->
            <!-- ... -->
          </span>
          <span>
            <a-button @click="closeContentWindow()">取消</a-button>
            <a-button :loading="saving" @click="onSubmit" type="primary">保存</a-button>
          </span>
        </div>
      </container>
    </div>
  </div>
</template>
<script>
export default {
  props: ['id', 'param'],

  data() {
    return {
      saving: false,

      parts: [
        /**
          {
            title: '标题',
            component: () => import('...'),
          }
         */
      ],
    };
  },

  methods: {
    async onSubmit() {
      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 (e) {
          return;
        }
      }

      this.saving = true;
      /**
       * 对表单提交进行处理
       */
      this.saving = false;
    },
  },
};
</script>