<template>
  <div class="login">
    <login-top></login-top>
    <div class="loginMain">
      <h2>
        <span>
          <img src="../../../../assets/img/login/圆形图标.png" alt />
        </span> 电梯管家管理后台
      </h2>
      <h3>中国电梯行业维保服务标准化执行工具</h3>
      <div>
        <span>
          <p class="erweima"><i class="iconfont iconico" @click="changeerweima"></i></p>
          <div v-if="erweimaSta">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
              <el-form-item prop="username">
                <el-input type="text" placeholder="请输入手机号码" prefix-icon="el-icon-user" v-model="ruleForm.username"></el-input>
              </el-form-item>
              <el-form-item prop="Upword" style="margin-bottom:35px;">
                <el-input type="password" placeholder="请输入密码" show-password prefix-icon="el-icon-lock"  v-model="ruleForm.Upword">
                  <!-- <template slot="append">
                    <a class="forgetPW" @click="toUnRegister">忘记密码？</a>
                  </template> -->
                </el-input>
              </el-form-item>
              <!-- <el-form-item style="margin-bottom:0px;">
                <el-checkbox-group v-model="Logintype">
                  <el-checkbox label="自动登录" name="Logintype"></el-checkbox>
                </el-checkbox-group>
              </el-form-item> -->
              <el-form-item >
                <el-button type="primary" @click="submitForm('ruleForm')" @keyup.enter.native="enter13()">登录</el-button>
              </el-form-item>
            </el-form>
            <div class="regsiterButton">
              <div style="color:#1890FF;cursor: pointer;" @click="toRegister">立即注册账户</div>
              <div style="color:#1890FF;cursor: pointer;" @click="toUnRegister">忘记密码？</div>
            </div>
          </div>
          <div v-else>
            <div  class="imagXia" >
              <img src="../../../../assets/img/xiazai.png" alt />
            </div>
            <p style="text-align:center;padding:10px 0">扫描二维码下载 电梯管家app</p>
            <el-button type="primary" class="getback"  @click="changeerweima">返回</el-button>
          </div>
        </span>
      </div>
    </div>
    <login-bottom></login-bottom>
  </div>
  <!-- <div class="login">
    <login-top></login-top>
    <div class="loginMain">
      <div class="loginMainLeft">
        <img src="../../../../assets/img/login/loginIndex.png" />
      </div>
      <div class="loginMainRight">
        <p>电梯管家后台管理系统 维保端</p>
        <p>Ver.3.0</p>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
          <el-form-item prop="username">
            <el-input type="text" placeholder="请输入手机号码" v-model="ruleForm.username"></el-input>
          </el-form-item>
          <el-form-item prop="Upword">
            <el-input type="password" placeholder="请输入密码" v-model="ruleForm.Upword">
              <template slot="append">
                <a class="forgetPW" @click="toUnRegister">忘记密码？</a>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')" @keyup.enter.native="enter13()">登录</el-button>
          </el-form-item>
        </el-form>
        <p class="toRegister">
          <a @click="toRegister">立即注册</a>
        </p>
      </div>
    </div>
    <login-bottom></login-bottom>
  </div> -->
</template>

<script>
import logintop from "../../components/common/logintop.vue";
import loginbottom from "../../components/common/loginbottom.vue";
import md5 from "js-md5";
import bus from '../../components/header/bus';
import {setCookie,getCookie} from '../../../../assets/js/cookie.js'
export default {
  components: {
    loginTop: logintop,
    loginBottom: loginbottom
  },
  name: "login",
  created() {
    var _this = this;
    document.onkeydown = function(e) {
      let key = window.event.keyCode;
      if (key == 13) {
        _this.submitForm('ruleForm');
      }
    };
  },
  mounted(){
    // if(getCookie('JSESSIONID')){
    //   this.$router.push({
    //       path: '/home'
    //   });
    // }
    
  },
  data() {
    var validateUser = (rule, value, callback) => {
      if (value === "") {
        return callback(new Error("手机号码不能为空"));
      } else if (!/^1[3,4,5,7,8,9]\d{9}$/.test(value)) {
        return callback(new Error("手机号码格式不对"));
      } else {
        return callback();
      }
    };
    var validateUp = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } 
      else if (value.length < 6) {
        callback(new Error("最少输入6个字符，请重新输入"));
      } else if (value.length > 20) {
        callback(new Error("最多输入20个字符，请重新输入"));
      } 
      else {
        return callback();
      }
    };

    return {
      ruleForm: {
        username: "",
        Upword: ""
      },
      rules: {
        username: [{ validator: validateUser, trigger: "blur" }],
        Upword: [{ validator: validateUp, trigger: "blur" }]
      },
      Logintype:"",
      erweimaSta:true,
    };
  },
  methods: {
    submitForm(formName) {
      var that = this;
      this.$refs[formName].validate(valid =>{
        if (valid) {
          that.login();
        } else {
        }
      });
    },
    login() {
      var url = "system/login/login";
      var param = {
        mobile: this.ruleForm.username,
        password: md5(this.ruleForm.Upword),
        mobileType: 2,
      };
      this.axios.post(url, param).then(result => {
        if (result.statusCode==="1") {
          console.log(result.data)
          // sessionStorage.setItem('token', data.token);
          // sessionStorage.setItem('companyList', JSON.stringify(data.companyList));
          // sessionStorage.setItem('user', data.userId);
          // sessionStorage.setItem('mtCompanyId', data.mtCompanyUserResponse.companyId);
          this.$store.commit("SET_TOKEN",result.data.token);  
          this.$store.commit("SET_companyList",result.data.companyList);
          this.$store.commit("SET_menus",result.data.menus);
          this.$store.commit("SET_USER",parseInt(result.data.userId));
          this.$store.commit("SET_USERNAME",result.data.name);
          this.$store.commit("SET_USERAvatar",result.data.avatarUrl);
          this.$store.commit("SET_USERROLE",result.data.role?result.data.role.name:'');
          sessionStorage.setItem('user', result.data.userId);
          if(result.data.maintenanceCompany){
            this.$store.commit("SET_mtCompanyId",result.data.maintenanceCompany.id);
              sessionStorage.setItem('companyID',JSON.stringify(result.data.maintenanceCompany));
          }
          this.$router.replace("home");
        }else if(result.statusCode==="0"){
          this.$message.error(result.message);
        }else{
          this.$message.error(result.message);
        }
      });
      // let token = "333333%rgtg$6778";

      // this.$store.commit("SET_TOKEN", token);
      // this.$router.replace("home");
    },
    //忘记密码
    toUnRegister() {
      this.$router.replace("unregister");
    },
    //注册
    toRegister() {
      this.$router.replace("register");
    },
    changeerweima(){
      this.erweimaSta=!this.erweimaSta
    }
  }
};
</script>
<style lang="stylus">
.login {
  font-size 16px
  .loginMain {
    height 80%
    h2{
      font-size: 45px;
    }
    h3{
      font-size: 22px;
      font-family: 'PingFang SC', 'Hiragino Sans GB', Arial, sans-serif;
      padding: 12px 0;
    }
    >div{
      height: 400px;
      span >div{
        padding-top: 40px;
      }
    }
    .erweima{
      position relative
      .iconfont.iconico{
        position: absolute;
        right: -2rem;
        font-size: 35px;
        top: -0.5rem;
        cursor: pointer;
      }
    }
  }

}
.login .loginMain >div >span i {
    color: #9B9B9B;
    font-size: 1.2rem;
    padding:0.3rem 0
}
.login .loginMain .el-form-item .el-button--primary,.getback{
  width: 98%;
    border-radius: 20px;
    span{
      font-size:18px
    }
}

.imagXia{
  padding 0 25%
  img{
    width:100%
  }
  p{
    font-size:16px
  }
}
</style>

