<template>
  <div class="login-body">
    <div class="login-box">
      <div class="logo-box">
        <div class="logo-icon"></div>
        <div class="logo-title">智慧园区平台</div>
      </div>
      <div class="form-body">
        <div class="titles">用户登录</div>
        <div class="bodys">
          <div class="login-row clearfix" style="margin-bottom:8px;">
            <input type="text" class="login-user" placeholder="用户" v-model="userName">
          </div>
          <div class="login-row">
            <input type="password" class="login-password" placeholder="密码" v-model="password"  @keyup.enter="handleLogin">
          </div>
          <div class="login-row">
            <div class="login-btn" id="loginBtn" @click="handleLogin">登录</div>
          </div>
        </div>
      </div>
    </div>
    <div class="ewm-box">
      <div class="download-container jx-container">扫码下载掌上经信<br/><span>(安卓)</span>
        <div class="download-image"></div>
      </div>
      <div class="download-container aj-container">扫码下载智慧安监<br/><span>(安卓)</span>
        <div class="download-image"></div>
      </div>
      <div class="download-container hb-container">扫码下载智慧环保<br/><span>(安卓)</span>
        <div class="download-image"></div>
      </div>
      <div class="download-container spjkA-container">智慧园区视频监控<br/><span>(安卓)</span>
        <div class="download-image"></div>
      </div>
      <div class="download-container spjkI-container">智慧园区视频监控<br/><span>(ios)</span>
        <div class="download-image"/>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'login',
    data () {
      return {
        userName:"",
        password:""
      }
    },
    created (){
      /*vm.GLOBAL.app.*/
    },
    methods:{
      handleLogin() {
        let vm = this,_form = {};
        if(vm.$Util.isEmpty(vm.userName)){
          vm.$message.warning("用户名不能为空！");
          return;
        }else if(vm.$Util.isEmpty(vm.password)){
          vm.$message.warning("密码不能为空！");
          return;
        }
        vm.$http.post('/uniform-auth/auth/login',{
          userName: vm.userName,
          pwd: vm.$md5(vm.password),
          /*origin:'web'*/
        }).then(function (resp) {
          var _data = resp.data;
          if (_data.code === 200) {
            axios.defaults.headers.common['Authorization'] = _data.data.token
            sessionStorage.setItem("userData",JSON.stringify(_data.data.user))
            sessionStorage.setItem("token",JSON.stringify(_data.data.token))
            if(!vm.$Util.isEmpty(_data.data.user.userType) && _data.data.user.userType == 1){
              vm.$router.push("/main")
            }else if(!vm.$Util.isEmpty(_data.data.user.userType) && _data.data.user.userType == 2){
              vm.$router.push("/company")
            }else{
              vm.$router.push("/main")
            }
          } else {
            vm.$message.error(_data.message);
            axios.defaults.headers.common['Authorization'] = ""
            sessionStorage.setItem("userData","")
          }
        })
      }
    }
  }
</script>
<style scoped>
  /*login*/
  .login-body{width: 100%;height: 100%;background:url(../assets/images/loginbg.png) no-repeat;background-size:100% 100%;}
  .login-box{width:478px;height:480px;left:calc(50% - 239px);top: calc(50% - 320px);position: relative;}
  .logo-box{width: 100%;height: 118px;}
  .logo-icon{width: 100%;height: 50px;background:url(../assets/images/login/logo.png) no-repeat 50%; background-size: auto 100%;}
  .logo-title{width: 100%;height:68px;line-height:68px;color:#00e4ff;font-size: 30px;text-align: center;}
  .form-body{width: 478px;height: 360px;background:url(../assets/images/login/loginbody.png) no-repeat 50%; background-size: auto 100%}
  .titles{width: 100%;height: 100px;line-height: 130px;text-align: center;color:#00e4ff;font-size: 22px;}
  .bodys{width:336px;margin:16px auto;}
  .login-row{width:100%;height:50px;}
  .login-row input{width:calc(100% - 46px);height:48px;color:#fff;border:1px solid rgba(22,214,255,.3);padding:0 0 0 44px;font-size:16px;}
  .login-row input:focus{border-color:rgba(22,214,255,1);}
  .login-row input.login-user{background:rgba(6,213,226,.2) url(../assets/images/login/user.png) no-repeat 13px center;}
  .login-row input.login-password{background:rgba(6,213,226,.2) url(../assets/images/login/PWD.png) no-repeat 13px center;}
  .login-btn{width:100%;height:50px;line-height:50px;background:rgba(12,185,201,.7);text-align: center;color:#fff;margin-top:20px;font-size:16px;letter-spacing:3px;border-radius:5px;}
  .login-btn:hover{cursor:pointer;background:rgba(12,185,201,.9);}
  .download-container{
    line-height: 15px;
    font-size: 12px;
    top: 0;
    color: #fff;
    -ms-flex-direction: column;
    flex-direction: column;
    margin: 0 30px;
    height: 130px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
  }
  /*.jx-container{right:10px;top:calc(50% - 65px);}*/
  .jx-container .download-image{width: 90px;height: 90px;background: url("../assets/images/app.png") no-repeat center;background-size: 100%;}
  /*.jx-container{right:10px;}*/
  .jx-container .download-image{width: 90px;height: 90px;background: url("../assets/images/app.png") no-repeat center;background-size: 100%;}
  /*.aj-container{right:10px;}*/
  .aj-container .download-image{width: 90px;height: 90px;background: url("../assets/images/ajEr.png") no-repeat center;background-size: 100%;}
  /*.hb-container{right:150px;}*/
  .hb-container .download-image{width: 90px;height: 90px;background: url("../assets/images/hbEr.png") no-repeat center;background-size:100%;}
  .spjkA-container .download-image{width: 90px;height: 90px;background: url("../assets/images/spA.png") no-repeat center;background-size:100%;}
  .spjkI-container .download-image{width: 90px;height: 90px;background: url("../assets/images/spIos.png") no-repeat center;background-size:100%;}
  .ewm-box {
    height: 130px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    position: fixed;
    bottom: 10px;
    width: 100%;
  }


</style>