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

const {
  openLeftNav,
  pageTitle,
  currentPageTitle,
  navList,
  currentRoute,
  changeNav,
  changeLeftNavState,
} = useLeftNav('COMMON_HEADER_MAINTANCE');
const productLabel = useStore().state.loct.sn;

// 获取locked锁定值
let systemLockDownEnabled = computed(() => {
  return useStore().state.glob.systemLocked;
});

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
        :software-name="productLabel"
        :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, { softwareName: productLabel }) }}
        </div>
        <!-- 提示界面 -->
        <Lock v-if="currentPageTitle !== 'COMMON_MAINTANCE_FDM'" />
        <div v-else class="no-locked"></div>
        <router-view />
      </div>
    </section>
  </section>
</template>

<style lang="scss" scoped>
.right-content {
  min-width: 0;
}

.no-locked {
  height: 16px;
  flex: 0 0 auto;
}
</style>
