<script setup lang="ts">
import { computed } from 'vue';
import useStore from '@/stores';
import { LeftNav } from '@/components/LeftNav';
import { useLeftNav } from '@/hooks/web/useLeftNav';
import { getStoreData } from '@/utils/composition';
import { NavTheme } from '@/model/base-enum';

const store = useStore();
// 系统锁定状态
const isSystemLock = computed(() => {
  return store.state.glob.systemLocked;
});

const {
  openLeftNav,
  pageTitle,
  currentPageTitle,
  navList,
  currentRoute,
  changeNav,
  changeLeftNavState,
} = useLeftNav('IBMC_HEAD_IBMC_MAGAGE');

const smsName = useStore().state.loct.smsName;
let navTheme = computed(() => {
  return useStore().state.loct.navStyle;
});

const rightNeedMargin = computed(() => {
  return useStore().state.loct.navStyle === NavTheme.TopLeft ? true : false;
});
</script>

<template>
  <section class="layout-with-sider">
    <aside
      v-if="navTheme === NavTheme.TopLeft"
      :class="[openLeftNav ? 'left-nav' : 'left-nav-close']"
    >
      <LeftNav
        :sms-name="smsName"
        :open-left-nav="openLeftNav"
        :page-title="pageTitle"
        :nav-list="navList"
        :current-route="currentRoute"
        @change-nav="changeNav"
        @change-left-nav-state="changeLeftNavState"
      />
    </aside>

    <section :class="[openLeftNav && rightNeedMargin ? 'right-content' : 'right-content-close']">
      <div class="user-container">
        <div class="layout-page-title">{{ $t(currentPageTitle, { smsName: smsName }) }}</div>

        <!-- 提示安全增强 -->
        <Lock />

        <router-view />
      </div>
    </section>
  </section>
</template>

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