<template>
  <div class="home">
    <el-container>
      <el-header>
        <Header v-bind="{ jump: jump }"></Header>
      </el-header>
      <el-container class="router_container">
        <el-aside>
          <Menu v-bind="{ jump: jump }"></Menu>
        </el-aside>
        <el-main>
          <router-view></router-view>
          <Default v-if="controlShow == 0" v-bind="{ params: params }"></Default>
          <MetadataListContainer v-if="controlShow == 1" v-bind="{ params: params }"></MetadataListContainer>
          <ModelManagement v-if="controlShow == 2" v-bind="{ params: params }"></ModelManagement>
          <AuthorityManagement v-if="controlShow == 3" v-bind="{ params: params }"></AuthorityManagement>
          <Log v-if="controlShow == 4" v-bind="{ params: params }"></Log>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import login from "../utils/login";

export default {
  name: "Home",
  data() {
    return {
      autologin: false,
      controlShow: 0,
      params: null,
      requestCode: systemConfig.requestCode
    };
  },
  components: {
    Header: () => import("@/components/Header.vue"),
    Menu: () => import("@/components/Menu.vue"),

    Default: () => import("@/views/Default.vue"),
    MetadataListContainer: () => import("@/views/MetadataListContainer.vue"),
    ModelManagement: () => import("@/views/ModelManagement.vue"),
    AuthorityManagement: () => import("@/views/AuthorityManagement.vue"),

    Log: () => import("@/views/Log.vue")
  },
  beforeCreate() {
    window.addEventListener(
      "message",
      function (e) {
        if (e.source != window.parent) {
          return;
        }
        let data;
        if (typeof e.data == "string") {
          data = JSON.parse(e.data);
        }
        if (typeof e.data == "object") {
          data = e.data;
        }
        if (data.type == "ONEMAP") {
          if (data.action == "ADD") {
            localStorage.setItem("autologin", data.autologin);
          } else {
            localStorage.removeItem("autologin");
          }
        }
        window.parent.postMessage(data, "*");
      },
      false
    );
    window.onbeforeunload = function (e) {
      localStorage.removeItem("autologin");
    };
    window.loginFunc = this.loginFunc;
    window.checkRequestCode = this.checkRequestCode;
  },
  created() {
    let that = this;
    let obj = this.getParams();
    let autologin1 = obj.autologin;
    let autologin2 = localStorage.getItem("autologin");
    if (autologin1 == 1 || autologin2 != null || autologin2 != undefined) {
      this.loginFunc();
    } else {
      this.$router.push({
        path: "/error",
      });
    }
  },
  methods: {
    jump(modelIndex, params) {
      this.controlShow = modelIndex;
      this.params = params
    },
    loginFunc() {
      let that = this;
      login(this)
        .then((result) => {
          that.$store.commit("setToken", result.message);
          that.$store.commit("setUserState", true);
        })
        .catch((err) => {
          that.$message({
            type: "error",
            message: err,
          });
        });
    },
    checkRequestCode(result) {
      let that = this;
      return new Promise((resolve, reject) => {
        if (result.code == 212) {
          let obj = that.getParams();
          let autologin1 = obj.autologin;
          let autologin2 = localStorage.getItem("autologin");
          if (
            autologin1 == 1 ||
            autologin2 != null ||
            autologin2 != undefined
          ) {
            that.loginFunc();
          } else {
            that.$store.commit("setToken", "");
            that.$store.commit("setUserState", false);
          }
        } else {
          let code = that.requestCode[result.code];
          if (code == 206 || code == 207 || code == 208) {
            this.$router.push({
              path: "/error",
            });
          } else {
            that.$message({
              type: "warning",
              message: that.requestCode[result.code]
            })
          }
        }
      });
    },
    getParams() {
      let obj = {
        autologin: null,
      };
      obj.autologin = this.getQueryString("autologin");
      return obj;
    },
    getQueryString(name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
      var r = window.location.search.substr(1).match(reg);
      if (r != null) return unescape(r[2]);
      return null;
    },
  },
};
</script>

<style lang="less" scoped>
.home {
  height: 100%;
  width: 100%;
  // background: url(../assets/img/bg.jpg) center center / 100% 100% no-repeat;
}

.el-container {
  height: 100%;
}

.router_container {
  height: calc(100% - @header_height);
}

.el-header {
  padding: 0 0;
  height: @header_height  !important;
}

.el-main {
  background: #f0f2f5;
  // margin:
  padding: 30px 30px 30px 30px;
}

.el-aside {
  width: @aside_width  !important;
}
</style>
