<script setup lang="ts">
import {useMainLayoutStore} from "~/strores/UseMainLayoutStore";

definePageMeta({
  layout: 'main',
  middleware: ['auth']
})
const mainLayoutStore=useMainLayoutStore()
</script>

<template>
<div class="setting-layout">
  <div class="setting-list">
    <div @click="navigateTo('/settings/panelSettings')" v-if="mainLayoutStore.UserInfo.Role==='admin'">
      <Icon name="Settings2"/>
      <p>平台设置</p>
    </div>
    <div >
      <Icon name="UserRoundCog"/>
      <p>账号设置</p>
    </div>
    <div @click="navigateTo('/settings/alertSettings')">
      <Icon name="BellElectric"/>
      <p>告警设置</p>
    </div>
  </div>
  <div class="setting-content">
  <NuxtPage/>
  </div>
</div>
</template>

<style scoped lang="scss">
@import "base";
.setting-layout{
  *{
    @include SC_Font
  }
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: 1fr;
  min-height: 800px;
  width: 100%;
  gap: $gap*2;
}
.setting-list,.setting-content{
  background: $light-bg-color;
  border: $border;
  border-radius: $radius;
}
.setting-list{
  display: flex;
  flex-direction: column;
  gap: $gap;
  padding: $padding;
  div{
    display: flex;
    padding: $padding;
    gap: $gap;
    cursor: pointer;
    &:hover{
      background: $light-bg-underline-color;
      border-radius: $radius;
    }
  }
}
</style>