<template>
  <KlTabBar v-model="type" :data="tabBar" />
  <div v-if="type === '修改密码'">
    <AccountSecurity />
  </div>
  <div v-else-if="type === '账号绑定'">
    <AccountBind />
  </div>
  <div v-else-if="type === '账号注销'">
    <AccountLogout />
  </div>
</template>

<script lang="ts" setup>
  import KlTabBar from '~/components/kl-tab-bar/v2/index.vue'
  import AccountSecurity from './account-security.vue'
  import AccountBind from './account-bind.vue'
  import AccountLogout from './account-logout.vue'

  const tabBar = ref([
    {
      label: '修改密码',
      value: '修改密码',
    },
    {
      label: '账号绑定',
      value: '账号绑定',
    },
    {
      label: '账号注销',
      value: '账号注销',
    },
  ])
  const type = ref('修改密码')
</script>

<style lang="scss" scoped></style>
