<template>
  <div class="main">
    <div class="main_header">
      <NavBar :title="routerName">
        <template #left>
          <div v-if="isBack" @click="back">
            <Icon name="arrow-left" color="#1998FA" size="16"></Icon>
            <span class="arrow_back">返回</span>
          </div>
        </template>
      </NavBar>
    </div>
    <div :class="['main_content', isTab ? 'main_tab' : 'main_no_tab']">
      <router-view v-slot="{ Component }">
        <keep-alive :include="keepAlive">
          <component :is="Component"/>
        </keep-alive>
      </router-view>
    </div>
    <div class="main_footer" v-if="isTab">
      <Tabbar
        v-model="activeName"
        @change="tabSwitch"
        fixed
      >
        <TabbarItem name="Home">
          <span>工作台</span>
          <template #icon="props">
            <img :src="props.active ? menuSelect : menu" alt="" />
          </template>
        </TabbarItem>
        <TabbarItem name="Production">
          <span>生产</span>
          <template #icon="props">
            <img :src="props.active ? productionSelect : production" alt="" />
          </template>
        </TabbarItem>
        <TabbarItem name="Warn">
          <span>预警</span>
          <template #icon="props">
            <img :src="props.active ? warnSelect : warn" alt="" />
          </template>
        </TabbarItem>
        <TabbarItem name="Mine">
          <span>我的</span>
          <template #icon="props">
            <img :src="props.active ? mineSelect : mine" alt="" />
          </template>
        </TabbarItem>
      </Tabbar>
    </div>
  </div>
</template>

<script>
export default {
  name: "MainLayout"
}
</script>
<script setup>
import {ref, onBeforeMount, onMounted, watch, computed} from 'vue';
import { NavBar, Icon, Tabbar, TabbarItem } from 'vant'
import { useRouter, useRoute, onBeforeRouteUpdate } from 'vue-router';
import menu from '../assets/images/tabs/menu.png';
import menuSelect from '../assets/images/tabs/menuSelect.png';
import production from '../assets/images/tabs/production.png';
import productionSelect from '../assets/images/tabs/productionSelect.png';
import warn from '../assets/images/tabs/warn.png';
import warnSelect from '../assets/images/tabs/warnSelect.png';
import mine from '../assets/images/tabs/mine.png';
import mineSelect from '../assets/images/tabs/mineSelect.png';
import { useKeepStore } from "../store";
import { storeToRefs } from 'pinia'


const route = useRoute();
const router = useRouter();

const keepStore = useKeepStore()


const { keepAlive } = storeToRefs(keepStore)

const tabSwitch = (row) => {
  console.log(row)
  if(row.name === activeName.value) {
    return
  }
  let url = '/' + row.toLowerCase();
  router.replace(url);
}

const isBack = ref(false)
const isTab = ref(true)
const routerName = ref('')
const activeName = ref('Home')

const back = () => {
  if (window.history.length <= 1) {
    router.replace('/home')
  } else {
    router.go(-1);
  }
}

onBeforeMount(() => {
  let meta = route.meta;
  isBack.value = meta.isBack;
  isTab.value = meta.isTab;
  routerName.value = meta.title;
  activeName.value = route.name;
})

const throttle = (fn, delay) => {
  var timer = null
  return function() {
    var context = this, args = arguments
    clearTimeout(timer)
    timer = setTimeout(function() {
      fn.apply(context, args)
    }, delay)
  }
}

const setScale = () => {
}

onMounted(() => {
  window.addEventListener('resize', throttle(() => {
    setScale()
  }, 500))
})

onBeforeRouteUpdate((to, form, next) => {
  isBack.value = to.meta.isBack;
  isTab.value = to.meta.isTab;
  routerName.value = to.meta.title;
  activeName.value = to.name;
  next()
})

watch(route, (newVal) => {
  activeName.value = newVal.name;
}, { deep: true, immediate: true })



</script>

<style scoped>
.main {
  width: 100%;
  height: 100%;
}
.main_header {
  width: 100%;
}
.arrow_back {
  font-size: 16px;
  color: #1998Fa;
}
.main_content {
  width: 100%;
  box-sizing: border-box;
  overflow: auto;
}
.main_tab {
  height: calc(100% - 98px);
}
.main_no_tab {
  height: calc(100% - 46px);
}
.main_footer {
  width: 100%;
  /*position: fixed;*/
  /*bottom: 0;*/
  /*left: 0;*/
}
</style>
