<template>
  <div :class="[`${prefixCls}-bottom`, '!dark:bg-dark-900', 'bg-light-50']">
    <Tabs>
      <template v-for="item in achieveList" :key="item.key">
        <TabPane :tab="item.name">
          <component :is="item.component" />
        </TabPane>
      </template>
    </Tabs>
  </div>
</template>

<script lang="ts">
  import { Tabs } from 'ant-design-vue';
  import { defineComponent } from 'vue';
  import SmsLog from './item/SmsLog.vue';
  import EmailLog from './item/EmailLog.vue';
  import { achieveList } from './data';

  export default defineComponent({
    components: {
      Tabs,
      TabPane: Tabs.TabPane,
      SmsLog,
      EmailLog,
    },
    setup() {
      return {
        prefixCls: 'account-center',
        achieveList,
      };
    },
  });
</script>
<style lang="less" scoped>
  .account-center {
    &-bottom {
      padding: 10px;
      margin: 16px;
      // background-color: @component-background;
      border-radius: 3px;
    }
  }
</style>