<template>
  <div style="display: flex">
    <a-tabs
      v-model="activeKey"
      tab-position="left"
      style="flex: none"
      :class="$store.state.app.multiTab ? 'ant-tabs-top-tabs' : 'ant-tabs-no-top-tabs'"
    >
      <!-- @change="onChange" -->
      <a-tab-pane key="1" tab="Tab1"></a-tab-pane>
      <a-tab-pane key="2" tab="Tab2"></a-tab-pane>
      <a-tab-pane key="3" tab="Tab3"></a-tab-pane>
      <a-tab-pane key="4" tab="Tab4"></a-tab-pane>
    </a-tabs>
    <div
      ref="tabContainer"
      id="tabContainer"
      :class="
        $store.state.app.multiTab ? 'router-wrapper-2-top-tabs' : 'router-wrapper-2-no-top-tabs'
      "
      style="backgroun-color: pink; flex: auto"
    >
      <component :is="'Tab' + activeKey"></component>
      <!-- :updateScrollTop="updateScrollTop" -->
    </div>
  </div>
</template>

<script>
import Tab1 from '@/views/sideTabs/components/Tab1'
import Tab2 from '@/views/sideTabs/components/Tab2'
import Tab3 from '@/views/sideTabs/components/Tab3'
import Tab4 from '@/views/sideTabs/components/Tab4'
export default {
  name: 'SideTab',
  components: {
    Tab1,
    Tab2,
    Tab3,
    Tab4,
  },
  data() {
    return {
      activeKey: '1',
      scrollTop: {
        Tab1: 0,
        Tab2: 0,
        Tab3: 0,
        Tab4: 0,
      },
    }
  },
  // methods: {
  //   onChange(activeKey) {
  //     console.log("切换到" + activeKey);
  //     this.activeKey = activeKey;
  //     console.log(this.scrollTop["Tab" + activeKey]);
  //     this.$refs.tabContainer.scrollTop = this.scrollTop["Tab" + activeKey];
  //   },
  //   updateScrollTop(activeKey) {
  //     console.log(document.getElementById("tabContainer").scrollTop);
  //     this.scrollTop["Tab" + activeKey] = this.$refs.tabContainer.scrollTop;
  //   }
  // }
}
</script>
<style lang="less" scoped>
@import '~@/assets/less/common';
.layout-content-height();
</style>
