<template>
  <div class="avue-contail"
       :class="{ 'avue--collapse': isCollapse, 'avue-contail2': appStore.isHome }">
    <div class="avue-header">
      <!-- 顶部导航栏 -->
      <top />
    </div>
    <div class="avue-layout">
      <div :class="['avue-main',iscockpit?'AllHeight':'']">
        <!-- 左侧导航栏-->
        <div class="avue-left"
             v-show="!appStore.isMenu&&!appStore.isHome && allData.menuWay == 'direction'">
          <sidebar />
        </div>
        <!-- 主体视图层 -->
        <div class="avue-main-right"
             :class="[
              !appStore.isMenu && !isCollapse && allData.menuWay == 'direction'
                ? ''
                : '',
              !appStore.isMenu && isCollapse && allData.menuWay == 'direction'
                ? 'main-right-margin-left60'
                : '',
            ]">
          <!-- 顶部标签卡 -->
          <!-- <tags v-if="!isMenu" />
            <transition name="fade-scale">
              <search class="avue-view"
                      v-show="isSearch"></search>
            </transition> -->
          <!-- 主体视图层 -->

          <div style="flex: 1; overflow: hidden"
               id="avue-view">
            <keep-alive :include="['cockpit','wel']">
              <router-view class="avue-view avue-view-content flex flex-align-center flex-justcontent-center" />
            </keep-alive>
            <!-- <router-view class="avue-view avue-view-content flex flex-align-center flex-justcontent-center"
                         v-slot="{ Component }">
              <keep-alive :include="['cockpit']">
                <component :is="Component" />
              </keep-alive>
            </router-view> -->
          </div>

          <!-- 底部系统支持 -->
          <!-- <foot /> -->
        </div>

      </div>
    </div>
    <!-- <div id="Centent">
      <router-view> </router-view>
    </div> -->
    <div class="avue-shade"
         @click="showCollapse"></div>
  </div>
</template>

<script setup name="wel">

// import { mapGetters, mapState } from "vuex";
// import tags from "./tags";
// import search from "./search";
import top from "./top/index.vue";
// import sidebar from "./sidebar/";
// import foot from "./footer/";
// import admin from "@/util/admin";
// import { validatenull } from "@/util/validate";
// import { calcDate } from "@/util/date.js";
// import { getStore } from "@/util/store.js";
const { proxy } = getCurrentInstance();
import useUserStore from '@/store/modules/user'
const appStore = useUserStore()

const allData = reactive({
  menuWay: 'direction',
  // isMenu: true,
  // isHome: true,
  isCollapse: false,
  //搜索控制
  // isSearch: false,
  //刷新token锁
  refreshLock: false,
  //刷新token的时间
  refreshTime: "",
  isOneMap: false,
})

// name: "index",
// provide () {
//   return {
//     index: this,
//   };
// },

// created () {
//   //实时检测刷新token
//   // this.refreshToken();

//   // console.log(this.currentRoutePath);

// };
// mounted () {

//   // this.init();
//   // 监听当前页面显示状态
//   // window.addEventListener("visibilitychange", this.handleVisibilityChange);
// },
// computed: {
//   // ...mapGetters([
//   //   "isMenu",
//   //   "isLock",
//   //   "isCollapse",
//   //   "website",
//   //   "menu",
//   //   "marginLeft",
//   //   "menuWay",
//   //   'iscockpit'
//   // ]),
//   // ...mapState({
//   //   showTag: (state) => state.common.showTag,
//   //   isHome: (state) => state.common.isHome,
//   //   currentRoutePath: (state) => state.common.currentRoutePath,
//   // }),

//   // currentRoutePath () {
//   //   console.log('currentRoutePath', this.currentRoutePath);
//   // },
// },
// watch: {
//   // currentRoutePath (val) {
//   //   console.log('currentRoutePath', this.currentRoutePath);
//   // },
// },
// props: [],
// 业务操作
function handleVisibilityChange () {
  if (document.visibilityState === "hidden") {
    this.isOneMap = true;
    this.bus.$emit("isOneMap", true);
  } else if (document.visibilityState === "visible") {
    this.isOneMap = false;
    this.bus.$emit("isOneMap", false);
  }
};
function showCollapse () {
  this.$store.commit("SET_COLLAPSE");
};
// 初始化
function init () {
  this.$store.commit("SET_SCREEN", admin.getScreen());
  window.onresize = () => {
    setTimeout(() => {
      this.$store.commit("SET_SCREEN", admin.getScreen());
    }, 0);
  };
  this.$store.dispatch("FlowRoutes").then(() => { });
};
//打开菜单
function openMenu (item = {}) {
  // this.$store.commit("SET_ISHOME", false);
  this.$store.dispatch("GetMenu", item.id).then((data) => {
    if (data.length !== 0) {
      this.$router.$avueRouter.formatRoutes(data, true);
    }
  });
};
// 定时检测token
function refreshToken () {
  this.refreshTime = setInterval(() => {
    const token =
      getStore({
        name: "token",
        debug: true,
      }) || {};
    const date = calcDate(token.datetime, new Date().getTime());
    if (validatenull(date)) return;
    if (date.seconds >= this.website.tokenTime && !this.refreshLock) {
      this.refreshLock = true;
      this.$store
        .dispatch("refreshToken")
        .then(() => {
          this.refreshLock = false;
        })
        .catch(() => {
          this.refreshLock = false;
        });
    }
  }, 10000);
};

</script>

<style lang="scss" scoped>
.avue-main-right {
  display: flex;
  flex-direction: column;

  .avue-view-content {
    height: 100%;
  }
  .margin20 {
    margin: 0 20px;
  }
}
</style>