<template>
  <div class="yo-form-page">
    <div class="yo-form-page-layout">
      <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-radio-group
            :value="tabs.find(p => p.active).type"
            @change="onStatisticsTypeChange"
            button-style="solid"
            class="block mt-xxs mr-md"
            slot="tabBarExtraContent"
          >
            <a-radio-button class="mb-none" value="charts">
              <a-icon type="bar-chart" />
            </a-radio-button>
            <a-radio-button class="mb-none" value="table">
              <a-icon type="table" />
            </a-radio-button>
          </a-radio-group>
        </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
                :id="id"
                :is="tab.component"
                :param="param"
                :type="tab.type"
                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('./tab1'),
          active: true,
          show: true,
          type: 'charts',
        },
        {
          title: '按房屋结构',
          component: () => import('./tab2'),
          active: false,
          show: true,
          type: 'charts',
        },
      ],
    };
  },
  methods: {
    onTabChange(key) {
      this.tabs.forEach((p, i) => {
        p.active = i === key;
      });
    },

    onStatisticsTypeChange(e) {
      this.tabs.find((p) => p.active).type = e.target.value;
    },
  },
};
</script>