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

function initList() {
  const list = [
    {
      value: 'Account',
      label: '账号',
    },
  ]
  if (sys_type === sys_type_study_machine) {
    list.push({
      value: 'Equipment',
      label: '设备',
    })
  }
  list.push({
    value: 'Voice',
    label: '声音',
  })
  return list
}
// 切换
function handleSelectModule(item: any) {
  // activeModule.value = item.id
}
onMounted(() => {
  let routerForward = router.options.history.state.forward
  let fromLogin = String(routerForward).includes('/login')
  fromLogin && (activeModule.value = 'Account')
})
</script>
<template>
  <div class="setting-box">
    <SelectTab
      v-model="activeModule"
      :dataList="moduleList"
      class="SelectTab"
      @change="handleSelectModule"
    ></SelectTab>
    <div class="content_module">
      <Account v-if="activeModule === 'Account'" />
      <Voice v-if="activeModule === 'Voice'" />
      <Equipment v-if="activeModule === 'Equipment'" />
    </div>
  </div>
</template>
<style lang="scss" scoped>
.setting-box {
  display: flex;
  flex-direction: column;
  padding-left: 80px;
  width: 100%;
  height: 100%;
  .SelectTab {
    width: fit-content;
    position: fixed;
    top: 2.67vh;
    right: 48px;
  }

  .left {
    padding-top: 2.67vh;
    width: 260px;
    .navigator {
      margin: 4vh 0 0 0;
    }
  }
  .content_module {
    width: 120vh;
    height: 100%;
  }
}
</style>
