<script setup>
import AdminMenu from "./menu/index.vue";
import AdminHeader from "./header/index.vue";
import Tabs from "./tabs/index.vue";

import { ref, computed, provide, nextTick } from "vue";
import { useRoute } from "vue-router";
import { useSettingStore } from "@/store/setting.js";

const route = useRoute();

const settingStore = useSettingStore();

const collapse = ref(false);

const handleToggleClospe = () => {
  collapse.value = !collapse.value;
};

const matched = computed(() => {
  return route.matched.filter((item) => item.meta.title);
});

const isMobile = computed(() => {
  return settingStore.isMobile;
});

const isRouterAlive = ref(true);

const reload = () => {
  isRouterAlive.value = false;
  nextTick(() => {
    isRouterAlive.value = true;
  });
};

provide('reload', reload);

</script>

<template>
  <div class="admin-layout">
    <el-container>
      <!-- <el-drawer v-if="isMobile" v-model="collapse">
        <el-aside width="auto" class="side-scroll">
          <admin-menu />
        </el-aside>
      </el-drawer> -->

      <el-aside width="auto" class="side-scroll">
        <admin-menu :collapse="collapse" />
      </el-aside>
      <el-container>
        <div>
          <admin-header
            :collapse="collapse"
            @toggle-clospe="handleToggleClospe"
          />
        </div>
        <el-main>
          <!-- 上方 page tabs -->
          <div class="tabs-block">
            <tabs />
          </div>
          <!-- <div class="page-breadcrumb">
            <el-breadcrumb separator="/">
              <el-breadcrumb-item v-for="(item,i) in matched" :key="i">{{ item.meta.title }}</el-breadcrumb-item>
            </el-breadcrumb>
          </div> -->
          <div class="main-content">
            <router-view  v-if="isRouterAlive"/>
          </div>
        </el-main>
        <el-footer>2023 © copyright ZL </el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<style lang="less" scoped>

</style>
