<!--
 * @Author: jixiang
 * @Date: 2021-04-07 11:06:09
 * @Description:
 * @FilePath: /demo/src/layout/AppLayout.vue
 * 56580223@qq.com
-->
<template>
  <div class="app-layout">
    <router-view v-if="fullScreenMode" />
    <div class="app-content" v-else>
      <app-header />
      <!-- <div id="nav"><router-link to="/">Home</router-link> | <router-link to="/login">login</router-link> |</div> -->
      <div class="app-main">
        <router-view />
      </div>
      <app-footer />

    </div>
  </div>
</template>

<script lang="ts">
import AppFooter from './Footer.vue'
import AppHeader from './Header.vue'
import { defineComponent, ref, watch } from 'vue'
import { useRouter } from 'vue-router'

export default defineComponent({
  components: {
    AppFooter,
    AppHeader
  },
  setup() {
    const fullScreenMode = ref(true)
    const router = useRouter()
    watch(router.currentRoute, () => {
      fullScreenMode.value = Boolean(router.currentRoute.value.meta?.fullScreen)
    })

    return {
      fullScreenMode
    }
  }
})
</script>

<style lang="less" scoped>
.app-layout {
  height: 100%;
}
.app-content {
  position: relative;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
.router-view {
  margin: 0;
  padding: 0;
}
.app-main{
  // width: 1160px;
  min-width: 1160px;
  // max-width: 1160px;
  background: white;
  overflow: auto;
  // margin: 0 auto;
}
@media screen and (min-width: 600px) and (max-width: 1024px) {
  .app-main{
    width: 100% !important;
    min-width: 100% !important;
    overflow: hidden;
  }
}
  @media screen and (max-width: 600px) {
    .app-main{
     width: 100% !important;
     min-width: 100% !important;
     overflow: hidden;
    }
  }

</style>
