<template>
  <div :class="classObj"
    class="app-wrapper"
    :style="{ '--current-color': theme }">
    <div v-if="device === 'mobile' && sidebar.opened"
      class="drawer-bg"
      @click="handleClickOutside" />
    <sidebar v-if="!sidebar.hide"
      class="sidebar-container" />
    <div :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }"
      class="main-container">
      <div :class="{ 'fixed-header': fixedHeader }">
        <navbar @setLayout="setLayout" />
        <tags-view v-if="needTagsView" />
      </div>
      <app-main />
      <settings ref="settingRef" />
    </div>
  </div>
</template>

<script setup>
import { useWindowSize } from '@vueuse/core'
import Sidebar from './components/Sidebar/index.vue'
import { AppMain, Navbar, Settings, TagsView } from './components'
import useAppStore from '@/store/modules/app'
import useSettingsStore from '@/store/modules/settings'

const settingsStore = useSettingsStore()
const theme = computed(() => settingsStore.theme);
const sideTheme = computed(() => settingsStore.sideTheme);
const sidebar = computed(() => useAppStore().sidebar);
const device = computed(() => useAppStore().device);
const needTagsView = computed(() => settingsStore.tagsView);
const fixedHeader = computed(() => settingsStore.fixedHeader);

const classObj = computed(() => ({
  hideSidebar: !sidebar.value.opened,
  openSidebar: sidebar.value.opened,
  withoutAnimation: sidebar.value.withoutAnimation,
  mobile: device.value === 'mobile'
}))

const { width, height } = useWindowSize();
const WIDTH = 992;

watch(() => device.value, () => {
  if (device.value === 'mobile' && sidebar.value.opened) {
    useAppStore().closeSideBar({ withoutAnimation: false })
  }
})

watchEffect(() => {
  if (width.value - 1 < WIDTH) {
    useAppStore().toggleDevice('mobile')
    useAppStore().closeSideBar({ withoutAnimation: true })
  } else {
    useAppStore().toggleDevice('desktop')
  }
})

function handleClickOutside() {
  useAppStore().closeSideBar({ withoutAnimation: false })
}

const settingRef = ref(null);
function setLayout() {
  settingRef.value.openSetting();
}
</script>

<style lang="scss"
  scoped>
  @import "@/assets/styles/mixin.scss";
  @import "@/assets/styles/variables.module.scss";

  .app-wrapper {
    @include clearfix;
    position: relative;
    height: 100%;
    width: 100%;

    &.mobile.openSidebar {
      position: fixed;
      top: 0;
    }
  }

  .drawer-bg {
    background: #000;
    opacity: 0.3;
    width: 100%;
    top: 0;
    height: 100%;
    position: absolute;
    z-index: 999;
  }

  .fixed-header {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 9;
    width: calc(100% - #{$base-sidebar-width});
    transition: width 0.28s;
  }

  // 开启头部固定以后，main的高度需要设置为100vh
  .fixed-header+.app-main {
    min-height: 100vh;
    padding-top: 50px;
  }


  // 有头部标签导航时
  .hasTagsView {
    .app-main {
      /* 84 = navbar + tags-view = 50 + 34 */
      // min-height: calc(100vh - 84px);
      min-height: 100vh;
    }

    .fixed-header+.app-main {
      padding-top: 84px;
    }
  }

  // 侧边栏导航隐藏时
  .hideSidebar .fixed-header {
    width: calc(100% - 54px);
  }

  .sidebarHide .fixed-header {
    width: 100%;
  }

  .mobile .fixed-header {
    width: 100%;
  }


  // 有些页面高度固定就是 100 vh - 头部高度作为可视区域
  // 例如：小 BI 分析中的商品管理页面，中间可用区域固定高度，不能撑开整个网页滚动
  // 所以要动态计算高度
  ::v-deep() {

    // 无头部固定，无头部 Tags-view
    .client-fix-height {
      // 头部导航 50，上下内边距 20
      height: calc(100vh - 50px - 40px);
    }

    // 头部固定时
    .fixed-header+.app-main {
      .client-fix-height {
        height: calc(100vh - 50px - 40px) !important;
      }
    }

    // 有头部标签时
    .hasTagsView {
      .fixed-header+.app-main {
        .client-fix-height {
          height: calc(100vh - 50px - 34px - 40px) !important;
        }
      }
    }
  }
</style>