<script setup lang="ts">
const User = defineAsyncComponent(() => import('../components/User.vue'))
const Password = defineAsyncComponent(() => import('../components/Password.vue'))
const Suggestions = defineAsyncComponent(() => import('../components/Suggestions.vue'))
const currentTab = ref<'User' | 'Password' | 'Suggestions'>('User')
const tabs = { User, Password, Suggestions }
</script>

<template>
  <AppCard>
    <el-radio-group v-model="currentTab" size="large" style="margin-bottom: 30px">
      <el-radio-button label="User">个人资料</el-radio-button>
      <el-radio-button label="Password">账号密码</el-radio-button>
      <el-radio-button label="Suggestions">投诉建议</el-radio-button>
    </el-radio-group>
    <component :is="tabs[currentTab]" />
  </AppCard>
</template>
