<template>
  <ScrollContainer>
    <div ref="wrapperRef" :class="prefixCls">
      <div style="text-align: right;padding:20px;">
        <a-button type="primary" @click="routerGo">返回</a-button>
      </div>
      <Tabs tab-position="left" :tabBarStyle="tabBarStyle">
        <template v-for="item in settingList" :key="item.key">
          <TabPane :tab="item.name">
            <component :is="item.component" />
          </TabPane>
        </template>
      </Tabs>
    </div>
  </ScrollContainer>
</template>

<script lang="ts">
  import { defineComponent } from 'vue';
  import { Tabs } from 'ant-design-vue';
  import { ScrollContainer } from '/@/components/Container/index';
  import { settingList } from './data';
  import { useRouter } from 'vue-router';

  import Overview from '../overview/index.vue';
  import OrderList from './OrderList.vue';
  import Product from '../product/index.vue';

  export default defineComponent({
    components: {
      ScrollContainer,
      Tabs,
      TabPane: Tabs.TabPane,
      Overview,
      OrderList,
      Product,
    },
    setup() {
      const router = useRouter();
      function routerGo(){
          router.go(-1)
      }
      return {
        routerGo,
        prefixCls: 'account-setting Level2Tab',
        settingList,
        tabBarStyle: {
          width: '220px',
        },
      };
    },
  });
</script>
<style lang="less">
  .account-setting {
    margin: 12px;
    background-color: @component-background;

    .base-title {
      padding-left: 0;
    }

    .ant-tabs-tab-active {
      background-color: @item-active-bg;
    }
  }
  .Level2Tab{
    .ant-tabs .ant-tabs-left-content{
      padding-left:0px;
    }
  }
</style>
