<script setup lang="ts">
import Medal from './medal.vue'
import BasicInfo from './basicInfo.vue'
import { sleepNotInWeb } from '@/utils'
import Setting from './setting.vue'
import VipCenter from './vip-center/index.vue'
import userApi from '@/api/system/user'

const module_basic = 1
const module_vip = 2
const module_medal = 3
const module_setting = 4
const moduleList = [
  {
    id: module_basic,
    name: '基本信息',
  },
  // {
  //   id: module_vip,
  //   name: '会员中心',
  // },
  {
    id: module_medal,
    name: '我的成就',
  },
  {
    id: module_setting,
    name: '设置',
  },
]
const activeModule = ref(moduleList[0].id) // 激活的侧边栏
// 切换
function handleSelectModule(item: any) {
  activeModule.value = item.id
}
const dia = ref(false)
function editUser() {
  dia.value = true
}
const canShow = ref(false)
onMounted(async () => {
  await sleepNotInWeb()

  canShow.value = true
})
</script>
<template>
  <div class="page">
    <BackBar leftText="个人中心" />
    <template v-if="canShow">
      <div class="user">
        <Sidebar
          :modelValue="activeModule"
          :config="moduleList"
          class="navigator"
          @handle-change="handleSelectModule"
        ></Sidebar>
        <div class="content">
          <BasicInfo v-show="activeModule === module_basic" @editUser="editUser" />
          <Medal v-show="activeModule === module_medal" />
          <Setting v-show="activeModule === module_setting" />
          <VipCenter v-show="activeModule === module_vip" />
        </div>
      </div>
      <UserCenterDia v-model="dia"></UserCenterDia>
    </template>
    <Empty v-else type="loading" />
  </div>
</template>
<style lang="scss" scoped>
.page {
  padding: 2.67vh 0 0 64px;
  width: 100%;
  height: 100%;
  @include main_bg;
  .user {
    display: flex;
    :deep(.sidebar-box) {
      width: 240px;
    }
    .navigator {
      margin-top: 4vh;
    }
    .content {
      width: calc(100% - 240px);
    }
  }
}
</style>
