<template>
  <div class="h-full" @click="readFlag = false">
    <el-config-provider>
      <bg-menu v-if="menuShow" :path="nowParent.path" @open-msg="openMsg" />
      <div v-if="pageShow" class="container" :class="menuShow ? '' : 'full_screen'">
        <bg-nav
          v-if="nowParent.children"
          v-show="navShow"
          :highlight-parent-rule="highlightParentRule"
          width="208px"
          :list="nowParent.children"
          class="con-nav" />
        <div class="bg-main view log_content_nor">
          <router-view />
        </div>
      </div>
      <div v-else-if="$route.path == '/login'" class="container">
        <div class="bg-main view">
          <login />
        </div>
      </div>
      <div v-else-if="$route.path == '/404'" class="container">
        <div class="bg-main view">
          <page404 />
        </div>
      </div>
      <msg v-model="readFlag" />
    </el-config-provider>
  </div>
</template>

<script setup>
import { computed, onBeforeMount, reactive, watch, ref, getCurrentInstance } from "vue";
import { useRoute } from "vue-router";
import store from "@/store";
import bgMenu from "@/components/bg-menu.vue";
import login from "@/page/login/index.vue";
import page404 from "@/page/404.vue";
import axios from "@/request/http.js";
import { clearCookie } from "@/services/cookie.js";
import { resetRouter } from "@/router/index";

const route = useRoute();
const { proxy } = getCurrentInstance();
const { $trace } = proxy;

const msgBoxFlag = computed(() => {
  return store.state.msgBoxFlag;
});
const userInfo = computed(() => {
  return store.state.userInfo;
});
const navMenu = computed(() => {
  return store.state.menu;
});
const menuObj = computed(() => {
  return store.state.menuObj;
});
const navShow = computed(() => {
  return (
    false ||
    !(
      excludeMenuArr.includes(route.path) ||
      excludeMenuArr.includes(store.state.menuObj[route.path].source)
    )
  );
});
const pageShow = computed(() => {
  return false || !["/404", "/login"].includes(route.path);
});
const rowPath = computed(() => {
  if (pageShow.value && store.state.userInfo) {
    return menuObj.value[route.path] && menuObj.value[route.path].rowPath;
  } else {
    return "";
  }
});
const nowParent = computed(() => {
  if (pageShow.value && store.state.userInfo) {
    return rowPath.value ? navMenu.value[rowPath.value.slice(1, 2)] : "";
  } else {
    return "";
  }
});
const menuShow = computed(() => {
  return false || !["/ui-example"].includes(route.path);
});

watch(
  () => msgBoxFlag.value,
  (n, o) => {
    readFlag.value = !readFlag.value;
  }
);
watch(
  () => userInfo.value,
  (n, o) => {
    this.initMsg();
  }
);

const readFlag = ref(false);
const excludeMenuArr = reactive([
  "/",
  "/404",
  "/login",
  "/ability-manage/real-list/detail",
  "/ability-manage/mock-list/detail",
  "/ability-register/add/desc",
  "/ability-register/edit/desc",
  "/ability-register/add/preview",
  "/ability-register/edit/preview",
  "/ui-example",
  "/ability-register/add/valid",
  "/ability-manage/ability-maintain/detail",
  "/ability-manage/sold-approval/detail",
  "/ability-manage/sold-list/detail",
  "/ability-manage/search-list/detail",
  "/ability-manage/my-apply/detail",
  "/ability-manage/my-apply/update",
  "/ability-manage/ability-approval/detail",
  "/shop",
  "/shop/detail",
  "/my-subscription",
  "/my-subscription/ability-shop-apply",
  "/my-subscription/ability-apply-success",
  "/password",
  "/app-manage/app-detail",
  "/cloud-manage/cloud-detail",
  "/cloud-manage/my-apply/resource",
  "/app-manage/deployment-detail",
  "/customer-support",
]);

onBeforeMount(() => {
  initMsg();
  getSysOptions();
});

/**
 * 设置用户多久不操作就跳转到登录界面
 * limit:用户无操作时常限制(分钟)
 */

const exitSystemAfterLimit = (limit) => {
  window.lastOperateTime = new Date();
  window.onload = addOperateListener;
  setTimer(limit);
};
//绑定用户操作事件
const addOperateListener = () => {
  document.addEventListener("mousemove", resetStartTime);
  document.addEventListener("keydown", resetStartTime);
  document.addEventListener("scroll", resetStartTime);
  document.addEventListener("touchstart", resetStartTime);
};
//重置起始时间
const resetStartTime = () => {
  window.lastOperateTime = new Date();
};
//设置定时器
const setTimer = (limit) => {
  window.logTimer = setInterval(() => {
    var currentTime = new Date();
    var timeDiff = currentTime.getTime() - lastOperateTime.getTime();
    if (timeDiff > limit * 60 * 1000) {
      clearInterval(window.logTimer);
      $axios.post("/apaas/system/v5/user/logout").then((res) => {
        if (res.data.code == "200") {
          window.location.href = "/apaas/manage/ui/#/login";
          $store.commit("setUserInfo", null);
          clearCookie("bgToken");
          $message.success("退出成功");
          resetRouter();
        } else {
          $message.error("退出失败");
        }
      });
    }
  }, 1000);
};

const getSysOptions = () => {
  axios.get("/apaas/system/v5/sysOptions").then((res) => {
    if (res.data.code == 200) {
      const result = res.data.data || {};
      if (result.session_validity) exitSystemAfterLimit(result.session_validity);
    } else {
      $message.error(res.data.data);
    }
  });
};

const openMsg = (data) => {
  readFlag.value = !readFlag.value;
};

const initMsg = () => {
  if (userInfo.value && userInfo.value && userInfo.value.system_id) {
    $trace.setOptionValue("userId", userInfo.value.system_id);
    $trace.setOptionValue("organization", userInfo.value.organization_id);
  }
};

const pathToData = (data, path) => {
  let arr = path.split(".");
  let temp = null;
  let tempName = "";
  let tempPath = "";
  arr.forEach((e, idx) => {
    if (idx == 1) {
      temp = data[e];
      tempName = data[e].menuName;
      tempPath = data[e].path;
      data = data[e];
    }
    if (idx == 2) {
      if (data.children && data.children.length) {
        temp = data.children[e];
        data = data.children[e];
      }
    }
  });
  return {
    menuName: tempName,
    path: tempPath,
    children: [temp],
  };
};

const highlightParentRule = (pathArr) => {
  return pathArr.includes(route.path);
};
</script>
<style>
.h-full {
  height: 100%;
}
.container {
  width: 100%;
  height: calc(100% - 56px);
  overflow: hidden;
}
.full_screen {
  height: 100%;
}
.full_screen .bg-main {
  overflow-x: hidden;
}
.con-nav {
  float: left;
}
.view {
  height: 100%;
  overflow-y: auto;
}
</style>
