<template>
  <PageWrapper dense contentFullHeight fixedHeight>
    <div class="account-setting">
      <ScrollContainer viewClass="h-full" class="h-full">
        <Tabs class="h-full">
          <template v-for="item in settingList" :key="item.key">
            <TabPane :tab="item.name" class="h-full">
              <component :is="item.component" />
            </TabPane>
          </template>
        </Tabs>
      </ScrollContainer>
    </div>
  </PageWrapper>
</template>

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

  import BaseSetting from './BaseSetting.vue';
  import SecureSetting from './SecureSetting.vue';
  import AccountBind from './AccountBind.vue';
  import MsgNotify from './MsgNotify.vue';
  import UpdatePassword from './UpdatePassword.vue';
  import HomeSetting from './HomeSetting.vue';
  export default defineComponent({
    components: {
      ScrollContainer,
      Tabs,
      TabPane: Tabs.TabPane,
      BaseSetting,
      SecureSetting,
      AccountBind,
      MsgNotify,
      UpdatePassword,
      HomeSetting,
      PageWrapper,
    },
    setup() {
      return {
        settingList,
      };
    },
  });
</script>
<style lang="less" scoped>
  .account-setting {
    height: 100%;
    background-color: @component-background;
    border-radius: 16px;

    :deep(.ant-tabs-top) {
      > .ant-tabs-nav {
        padding: 0 16px;
        margin: 0;

        &::before {
          border-bottom: 1px solid #ddd;
        }
      }

      .ant-tabs-content-holder {
        overflow: auto;
      }
    }
  }
</style>
