<template>
  <div class="Layout font-sans text-base bg-app-drak-1 page text-white">
      <!-- <header>header</header> -->
    <app-overlay></app-overlay>
    <div class='content'>
      <router-view></router-view>
    </div>
    <app-rules ref="rule" :hidden="hidden" />
    <app-navigator class='fixed bottom-0'></app-navigator>
    <app-picker></app-picker>
    <!-- <footer>mxmwebsite</footer> -->
  </div>
</template>

<script lang="ts">
import Vue from 'vue';

export default Vue.extend({
  name: 'Layout',
  data() {
    return {
      hidden: false
    }
  },
  components:{
    'app-overlay':()=>import('./overlay.vue'),
    'app-navigator':()=>import('./navigator.vue'),
    'app-picker':()=>import('@/components/common/Picker.vue'),
    'app-rules': () => import('@/layouts/rules.vue')
  },
  watch: {
    $route() {
      const show = (this.$refs.rule as any)?.show || false
      if (show === false) {
        this.hidden = true
      } else {
        this.hidden = false
      }
    }
  },
  activated() {
    this.$router.replace({ path: this.$route.path, query: { ...this.$route.query, time: Date.now() + '' }})
  }
});
</script>
<style scoped>
.Layout{
    height:100%;
    width: 100%;
    position: relative;
    overflow-y: hidden;
    overflow-x: hidden;
}
.page{
  height: 100vh;
  width: 100vw;
}
</style>