<template>
  <div id="app" @click="readFlag = false">
    <el-config-provider>
      <bg-menu :path="nowParent.path" v-if="menuShow" @openMsg="openMsg"></bg-menu>
      <div class="container" :class="menuShow ? '' : 'full_screen'" v-if="pageShow">
        <!-- <bg-nav :highlightParentRule="highlightParentRule" :title="nowParent.menuName" width="208px" :list="nowParent.children" v-show="navShow" class="con-nav" /> -->
        <bg-nav
          v-if="nowParent.children"
          :highlightParentRule="highlightParentRule"
          width="208px"
          :list="nowParent.children"
          v-show="navShow"
          class="con-nav" />
        <div class="bg-main view">
          <router-view />
        </div>
      </div>
      <div class="container" v-else-if="$route.path == '/login'">
        <div class="bg-main view">
          <login></login>
        </div>
      </div>
      <div class="container" v-else-if="$route.path == '/register'">
        <div class="bg-main view">
          <register></register>
        </div>
      </div>
      <div class="container" v-else-if="$route.path == '/password'">
        <div class="bg-main view">
          <password></password>
        </div>
      </div>
      <div class="container" v-else-if="$route.path == '/404'">
        <div class="bg-main view">
          <page404></page404>
        </div>
      </div>
      <!-- <msg v-model="readFlag"></msg> -->
    </el-config-provider>
  </div>
</template>

<script>
import bgMenu from "@/components/bg-menu.vue";
import login from "@/page/login/index.vue";
import page404 from "@/page/404.vue";
import register from "@/page/register/index.vue";
import password from "@/page/password/index.vue";
import { clearCookie } from "@/services/cookie.js";
import { resetRouter } from "@/router/index";

export default {
  components: {
    bgMenu,
    login,
    page404,
    register,
    password,
  },
  computed: {
    msgBoxFlag() {
      return this.$store.state.msgBoxFlag;
    },
    userInfo() {
      return this.$store.state.userInfo || {};
    },
    navMenu() {
      return this.$store.state.menu;
    },
    menuObj() {
      return this.$store.state.menuObj;
    },
    navShow() {
      return false || !["/", "/404", "/login", "/register", "/password"].includes(this.$route.path);
    },
    pageShow() {
      return false || !["/404", "/login", "/register", "/password"].includes(this.$route.path);
    },
    rowPath() {
      if (this.pageShow && this.$store.state.userInfo) {
        return this.menuObj[this.$route.path] && this.menuObj[this.$route.path].rowPath;
      } else {
        return "";
      }
    },
    nowParent() {
      if (this.pageShow && this.$store.state.userInfo) {
        return this.rowPath ? this.navMenu[this.rowPath.slice(1, 2)] : "";
      } else {
        return "";
      }
    },
    menuShow() {
      return false || !["/ui-example"].includes(this.$route.path);
    },
  },
  watch: {
    msgBoxFlag(n, o) {
      this.readFlag = !this.readFlag;
    },
    userInfo: {
      handler() {
        this.initMsg();
      },
      deep: true,
    },
  },
  data() {
    return {
      readFlag: false,
      menuIndex: "",
    };
  },
  created() {
    // this.initMsg()
  },
  mounted() {
    this.getSysOptions();
  },
  methods: {
    /**
     * 设置用户多久不操作就跳转到登录界面
     * limit:用户无操作时常限制(分钟)
     */

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

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

    openMsg(data) {
      this.readFlag = !this.readFlag;
    },
    initMsg() {
      if (this.userInfo && this.userInfo.system_id) {
        this.$trace.setOptionValue("userId", this.userInfo.system_id);
        // this.$trace.setOptionValue('userType',this.userInfo.userType)
        // this.$trace.setOptionValue('roleId',this.userInfo.roleIds.join(','))
        this.$trace.setOptionValue("organization", this.userInfo.organization_id);
      }
    },
    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],
      };
    },
    highlightParentRule(pathArr) {
      return pathArr.includes(this.$route.path);
    },
    ada() {},
  },
};
</script>
<style>
#app {
  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;
  background-color: #ebedf2;
}
</style>
