<template>
  <div>
    <div style="z-index: 999;" v-if="isHeader === false">
      <nut-navbar :title="title" @on-click-back="back">
        <template #left>
          <div v-if="isBack">
            <Left color="#000"></Left>
          </div>
        </template>
      </nut-navbar>
    </div>
    <div :style="isTab ? defaultHeight : tabHeight " :class="['container', isTab ? 'container_bottom' : '']">
      <router-view></router-view>
    </div>
    <div class="fixed_tabbar" v-if="isTab">
      <van-tabbar v-model="activeName" @change="tabSwitch">
        <van-tabbar-item v-if="supe" icon="home-o" name="Home">
          首页
        </van-tabbar-item>
        <van-tabbar-item v-else icon="home-o" name="Sub">
          首页
        </van-tabbar-item>
        <van-tabbar-item icon="friends-o" name="Mine">
          我的
        </van-tabbar-item>
      </van-tabbar>
    </div>
  </div>
</template>

<script>
export default {
  name: "MainLayout"
}
</script>
<script setup>
import { ref, onBeforeMount } from 'vue';
import { Left } from '@nutui/icons-vue';
import { useRouter, useRoute, onBeforeRouteUpdate } from 'vue-router';
import { Tabbar as VanTabbar, TabbarItem as VanTabbarItem, NavBar as VanNavBar } from 'vant'
import { getIsSuper } from "../utils/auth";


const title = ref('');
const isBack = ref(false);
const isTab = ref(false);
const isHeader = ref(false);
const activeName = ref('');
const route = useRoute();
const router = useRouter()

const supe = ref(Boolean(getIsSuper()))

const back = () => {
  if (isBack.value) {
    router.back()
  }
}

const h = ref(window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight);

const tabHeight = ref({
  height: `calc(${h.value}px - 70px)`
})


const defaultHeight = ref({
  height: `calc(${h.value}px - 100px)`
})

const tabSwitch = (index) => {
  let url = '/' + index.toLowerCase();
  router.replace(url);
}

onBeforeMount(() => {

  let meta = route.meta;
  isHeader.value = meta.isHeader ? true : false;
  title.value = meta.title;
  isBack.value = meta.isBack;
  isTab.value = meta.isTab;
  activeName.value = route.name;
})

onBeforeRouteUpdate((to, form, next) => {
  title.value = to.meta.title;
  isHeader.value = to.meta.isHeader ? true : false;
  isBack.value = to.meta.isBack;
  isTab.value = to.meta.isTab;
  activeName.value = to.name;
  next()
})



</script>

<style scoped>
.nut-navbar {
  margin-bottom: 0;
}
.fixed_tabbar {
  width: 100%;
  position: fixed;
  left: 0;
  bottom: 0;
}
.container {
  width: 100%;
  box-sizing: border-box;
  /* padding:0 10px; */
  /*margin-bottom: 20px;*/
  /*height: calc(100vh - 70px);*/
  overflow: auto;
  position: relative;
}
.container_bottom {
  /*height: calc(100vh - 140px);*/
  /*margin-bottom: 70px;*/
}
</style>
