<template>
  <div class="yo-form-page">
    <div class="yo-form-page-layout">
      <!-- 底部工具栏(需放在前面) -->
      <div class="yo-form-page--bar yo-form-page--bar--with-tab">
        <container>
          <div class="yo-form-page--bar-inner">
            <span>
              <!-- 可以在工具栏中增加其他控件(只能在一行内) -->
              <!-- ... -->
            </span>
            <span>
              <a-button @click="closeContentWindow()">取消</a-button>
              <a-button @click="onSubmit" type="primary">保存</a-button>
            </span>
          </div>
        </container>
      </div>

      <div :style="{ paddingBottom: 0 }" class="yo-form-page--header">
        <container>
          <a-descriptions :column="4" title>
            <a-descriptions-item label="区县（市）">测试区</a-descriptions-item>
            <a-descriptions-item label="街道（乡镇）">测试街道</a-descriptions-item>
            <a-descriptions-item label="社区">欧阳社区</a-descriptions-item>
            <a-descriptions-item label="片区">片区一22（明湖片区）</a-descriptions-item>
            <a-descriptions-item :span="2" label="编号">宁波市-测试区-测试街道-欧阳社区-项目十二(项目十二)-001</a-descriptions-item>
            <a-descriptions-item :span="2" label="编码">330266066001012001</a-descriptions-item>
          </a-descriptions>
        </container>
      </div>

      <!-- 表单主体 -->
      <!-- 
      挂载了一个content到tab后面
      如果直接使用antd-vue的tab,将会莫名其妙地做各种多余的渲染,导致卡顿
      现在只使用其tab卡片,重写了一个tab内容
      -->
      <div class="yo-tab-external-mount">
        <a-tabs @change="onTabChange">
          <template v-for="(tab, index) in tabs">
            <a-tab-pane :force-render="true" :key="index" :tab="tab.title" v-if="tab.show"></a-tab-pane>
          </template>
        </a-tabs>
        <div class="yo-tab-external-mount-content">
          <template v-for="(tab, index) in tabs">
            <div
              :class="tab.active ? 'yo-tab-external-tabpane-active' : 'yo-tab-external-tabpane-inactive'"
              :key="index"
              class="yo-tab-external-tabpane"
              v-if="tab.show"
            >
              <component
                :frame="self"
                :id="id"
                :is="tab.component"
                :param="param"
                ref="forms"
                v-if="tab.component"
              />
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: ['id', 'param'],

  data() {
    return {
      tabs: [
        {
          title: '房屋基本情况',
          component: () => import('./base'),
          active: true,
          show: true,
        },
        {
          title: '幕墙信息',
          name: 'curtainWall',
          component: () => import('./curtainWall'),
          active: false,
          show: false,
        },
        {
          title: '面砖信息',
          name: 'faceBrick',
          component: () => import('./faceBrick'),
          active: false,
          show: false,
        },
        {
          title: '墙面粉刷信息',
          name: 'whiteWash',
          component: () => import('./whiteWash'),
          active: false,
          show: false,
        },
        {
          title: '墙面涂料信息',
          name: 'coating',
          component: () => import('./coating'),
          active: false,
          show: false,
        },
      ],
    };
  },

  computed: {
    self() {
      return this;
    },
  },

  methods: {
    async onSubmit() {
      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 = {
            ...formData,
            ...data,
          };
        } catch {
          flag = false;
        }
      }

      if (!flag) {
        return;
      }

      /**
       * 对表单提交进行处理
       */
    },

    onTabChange(key) {
      this.tabs.forEach((p, i) => {
        p.active = i === key;
      });
    },

    onTogglePane(show, name) {
      const pane = this.tabs.find((p) => p.name === name);
      if (pane) {
        pane.show = show;
      }
    },
  },
};
</script>