<script lang="ts">
import { defineComponent, computed } from 'vue'
import { Navbar, Sidebar, AppMain } from './components/index.ts'
// @ts-ignore: 导入 JS 混入文件，忽略类型检查
import ResizeMixin from './mixin/ResizeHandler.js'
import { useAppStore } from '@/store/app'
import { useSettingsStore } from '@/store/settings'
import { storeToRefs } from 'pinia'

export default defineComponent({
  name: 'Layout',
  components: {
    Navbar,
    Sidebar,
    AppMain
  },
  mixins: [ResizeMixin],
  setup() {
    const appStore = useAppStore()
    const settingsStore = useSettingsStore()
    const { sidebar, device } = storeToRefs(appStore)
    const { fixedHeader } = storeToRefs(settingsStore)

    const handleClickOutside = () => {
      appStore.closeSideBar({ withoutAnimation: false })
    }

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

    return {
      sidebar,
      device,
      fixedHeader,
      classObj,
      handleClickOutside
    }
  }
})
</script>

<template>
  <div :class="classObj" class="app-wrapper">
    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
    <sidebar class="sidebar-container" />
    <div class="main-container">
      <div :class="{'fixed-header':fixedHeader}">
        <navbar />
      </div>
      <app-main />
    </div>
  </div>
</template>

<style lang="scss" scoped>
@use '@/styles/variables' as vars;
@use '@/styles/mixin';

.app-wrapper {
  @include mixin.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% - #{vars.$sideBarWidth});
  transition: width 0.28s;
}

.hideSidebar .fixed-header {
  width: calc(100% - 54px)
}

.mobile .fixed-header {
  width: 100%;
}
</style>