<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 == '/registe'">
        <div class="bg-main view">
          <registe></registe>
        </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 registe from "@/page/registe/index.vue";
import password from "@/page/password/index.vue";
export default {
  components: {
    bgMenu,
    login,
    page404,
    registe,
    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", "/registe", "/password"].includes(this.$route.path);
    },
    pageShow() {
      return false || !["/404", "/login", "/registe", "/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() {},
  methods: {
    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>
