<template>
  <div id="login" @keypress.enter="handleSubmit()">
    <!--<div class="backGroundVideo">
      <video
        poster
        x5-playsinline
        playsinline
        webkit-playsinline
        autoplay
        muted
        loop
        class="J_bgvideo"
        id="myVideo1"
      >
        <source src="@/assets/loginbg.mp4" type="video/mp4" />
      </video>
    </div>-->
    <div class="loginWrap">
      <div class="form">
        <el-row>
          <el-col :span="24" class="form-tit cent">
            <img src="@/assets/logo.png" alt width="100px" />
            <h1>应急联动综合管理服务平台</h1>
            <p>
              <!-- <em>Emergency Onduty Management System</em> -->
              <br />
            </p>
          </el-col>
          <div class="contianer">
            <el-form class="form-con" :model="ruleForm" :rules="rules" ref="ruleForm">
              <el-form-item prop="username">
                <el-input
                  placeholder="请输入用户名"
                  name="username"
                  id="username"
                  v-model="ruleForm.username"
                ></el-input>
              </el-form-item>
              <el-form-item prop="password">
                <el-input
                  placeholder="请输入密码"
                  type="password"
                  name="password"
                  id="password"
                  v-model="ruleForm.password"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button
                  class="loginbtn"
                  @click.native.prevent="handleSubmit()"
                  :loading="isLoging"
                style="color: white">登录</el-button>
                <!-- 注释：native.prevent 取消默认事件 -->
              </el-form-item>
              <!-- <p>
              <el-checkbox label="7天自动登陆" v-model="ruleForm.autoLogin"></el-checkbox>
              <el-button type="text" class="fr" @click="$router.push('/password')">忘记密码？</el-button>
              </p>-->
            </el-form>
          </div>
        </el-row>
      </div>
    </div>
  </div>
</template>
<style lang="scss">
#login {
  width: 100%;
  height: 100%;
  overflow: hidden;
  .backGroundVideo video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 0;
    transform: translate(-50%, -50%);
    transition: opacity 1s;
  }
  .loginWrap {
    display: flex;
    align-items: center;
    -webkit-lign-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: url("../assets/loginbackground.png") center no-repeat;
    .form {
      //background: transparent;
      background: white;
      width: 350px;
      height: auto;
      padding: 40px 30px;
      box-shadow: 0 0 10px #f8f8f8;
      z-index: 2;
      .el-row {
        margin-bottom: 20px;
      }
      .form-tit {
        margin-bottom: 20px;
      }
      h1 {
        font-family: "黑体", serif;
        //color: #f8f8f8;
        color: #2F739B;
        margin-bottom: 5px;
      }
      p {
        color: #b2b2b2;
        margin: 0;
      }
      .loginbtn {
        background: transparent;
        //color: #ffffff;
        background: #2F739B;
        font-size: 1.2em;
        width: 100%;
        box-shadow: 0 0 7px #399c83;
        border: 1px solid #399c83 !important;
      }
      input[name="username"],
      input[name="password"] {
        height: 45px;
        line-height: 45px;
        background-position: 10px center;
        background-repeat: no-repeat;
        padding-left: 40px;
        background-color: transparent !important;
        //color: white;
      }
      input[name="username"] {
        background-image: url("../assets/u22.png");
      }
      input[name="password"] {
        background-image: url("../assets/u24.png");
      }
      input[name="email"] {
        background-image: url("../assets/u23.png");
        background-size: 24px;
      }
    }
  }
}
</style>
<script lang="ts">
import { Component, Vue, Provide } from "vue-property-decorator";
import { Message, Form } from "element-ui";
import { State, Getter, Mutation, Action } from "vuex-class";
import Layout from "../views/Layout/index.vue";
import { mapActions } from "vuex";
import METHOD from "../utils/methods";
import { createrouter, asyncRouterMap } from '../router'
import routers from '../router'
@Component({
  components: { Layout }
})
export default class Home extends Vue {
  @Action("setMoudleArr") setMoudleArr: any;

  @Provide() isLoging: Boolean = false;
  @Provide() ruleForm: {
    username: String;
    password: String;
    autoLogin: Boolean;
  } = {
    username: "",
    password: "",
    autoLogin: true
  };
  @Provide() rules = {
    username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
    password: [{ required: true, message: "请输入密码", trigger: "blur" }]
  };
  addDouter(rolelist: any) {
    let that = this;
    var deArr: any = [];
    let obj: any = {};
    if (rolelist.length == 0) {
      that.$message.error("该用户未分配角色！");
      return;
    }
    rolelist.forEach((ele: any) => {
      let isSelected = ele.children.some((el: any) => el.selected == "true");
      var obj = {
        path: ele.path,
        component: Layout,
        redirect: "",
        meta: {
          title: ele.title,
          icon: ele.icon,
          selected: isSelected ? "true" : ele.selected,
          level: ele.level
        },
        children: []
      };
      obj.path = ele.path;
      let childarr: any = ele.children;
      if (childarr.length > 0) {
        childarr.forEach((sele: any) => {
          let vueurl =
            (METHOD.componentUrl as any)[sele.path.replace("/", "")] +
            sele.path;
          let sobj: any = {
            name: sele.name,
            path: sele.path,
            component: () => import(`@/views/Main/${vueurl}.vue`),
            meta: {
              title: sele.title,
              icon: sele.icon,
              selected: sele.selected,
              level: sele.level
            }
          };
          if (sele.code) sobj.meta.listId = sele.code;
          if (sele.selected == "true") {
            obj.children.push(sobj);
          }
        });
      }
      if (obj.children.length > 0) obj.redirect = ( obj.children[0] as any).path;
      deArr.push(obj);
    });
    // this.$router不是响应式的，所以手动将路由元注入路由对象--这一步没有用处
    // (that.$router as any).options.routes = [
    //   ...(that.$router as any).options.routes,
    //   ...deArr
    // ];
    (that.$router as any).matcher = ( createrouter( asyncRouterMap ) as any).matcher;//重置router
    that.$router.addRoutes( deArr );
    that.setMoudleArr( deArr )
    sessionStorage.setItem("moudleArr", JSON.stringify( deArr ));
    that.$router.push("/alls");
  }
  //异步添加路由--？
  asyncAddroutes(addroutes: any) {
    return new Promise((resolve, reject) => {
      if (addroutes.length > 0) {
        resolve(addroutes);
      } else {
        reject("错误");
      }
    });
  }
  handleSubmit(): void {
    let that = this;
    (this.$refs["ruleForm"] as any).validate((valid: any) => {
      if (valid) {
        let timestamp = new Date().getTime();
        that.isLoging = true;
        (that as any).$axios
          .post("/account/login/", {
            account: that.ruleForm.username,
            password: that.ruleForm.password,
            captcha: "",
            type: "",
            timestamp: timestamp
          })
          .then((res: any) => {
            that.isLoging = false;
            sessionStorage.setItem("token", res.token);
            sessionStorage.setItem("userInfo", JSON.stringify(res.userInfo));
            //登陆成功 返回权限菜单 跳转到综合页面
            that.addDouter(res.userInfo.roleMenuList);

            // that.$router.replace("/UserMg").then(onComplete => {
            //   console.log('onComplete')
            // }).catch(onAbort => {
            //   console.log('路由被打断')
            // });
          })
          .catch(() => {
            this.isLoging = false;
          });
      } else {
        return false;
      }
    });
  }
  created() {
    this.setMoudleArr([]);
  }
}
</script>
