<script setup lang="ts">
import { sys_type, sys_type_study_machine } from '@/utils'
import { ref } from 'vue'
import Account from './account.vue'
import Voice from './voice.vue'
import Equipment from './equipment.vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const activeModule = ref('Account') // 激活的侧边栏
const moduleList = initList()

function initList() {
  const list = [
    {
      id: 'Account',
      name: '账号',
    },
  ]
  if (sys_type === sys_type_study_machine) {
    list.push({
      id: 'Equipment',
      name: '设备',
    })
  }
  list.push({
    id: 'Voice',
    name: '声音',
  })
  return list
}
const showPageLoad = ref(false)
function onLoaded() {
  showPageLoad.value = false
}
// 切换
function handleSelectModule(item: any) {
  activeModule.value = item.id
}
function updateLoginAccount(val: boolean) {
  showPageLoad.value = val
}
onMounted(() => {
  let routerForward = router.options.history.state.forward
  let fromLogin = String(routerForward).includes('/login')
  fromLogin && (activeModule.value = 'Account')
})
</script>
<template>
  <UrmLoad v-if="showPageLoad" :duration="1" @loaded="onLoaded" />
  <div v-show="!showPageLoad" class="page">
    <div class="left">
      <BackBar leftText="设置" />
      <Sidebar
        v-model="activeModule"
        :config="moduleList"
        class="navigator"
        @handle-change="handleSelectModule"
      ></Sidebar>
    </div>
    <div class="content_module">
      <Account v-if="activeModule === 'Account'" @updateAccount="updateLoginAccount" />
      <Voice v-if="activeModule === 'Voice'" />
      <Equipment v-if="activeModule === 'Equipment'"></Equipment>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.page {
  display: flex;
  padding-left: $space-6;
  column-gap: 5vh;
  width: 100%;
  height: 100%;
  @include main_bg;
  .left {
    padding-top: 2.67vh;
    width: 260px;
    .navigator {
      margin: 4vh 0 0 0;
    }
  }
  .content_module {
    width: 120vh;
    height: 100%;
  }
}
</style>
