
<style scoped>  
.comp-login {background-color:#fff;height:100%;height:100vh;}
.input-box {background:#FFF;}
.comp-login {padding:0;margin:0;}
.login-content{padding:0 6%;}
.login-content div{margin:0;padding:0.4rem 0;height:2rem;line-height:2rem;display:flex;border-bottom: 1px solid #E9E9E9;}
.login-content div span{display:inline-block;text-align:center;padding:0 0.4rem; padding-top:0.2rem;padding-left: 0;}
.login-content div input{background-color: #fff;border:0px;flex:1;outline:none;color:#000;}
.item-btn {display:inline-block;width:88%;height:2.6rem;padding:0;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;margin:0 6%;margin-top:0px;margin-bottom:0px;font-size:1rem;line-height:2.6rem;text-align:center;color:#fff;background:#3A8AFB;border:none;border-radius:0.2rem;margin-top:1.6rem;margin-bottom:0.34rem;}
.footer {color:#b3b3b3;text-align:center;text-shadow:1px 1px 0 rgba(255,255,255,1);}
.footer a {color:#b3b3b3;margin: 0 1.5rem;}
.login-content img{width:0.9rem;height:1rem;}
.bannerbg{margin-bottom:2rem;background-size:100% 100%;background-repeat:no-repeat;height: 6.4rem;}
input[type=button], input[type=submit], input[type=file], button {cursor:pointer;outline:0px; -webkit-appearance:none; }

</style>
<template>     
  <div class="container comp-login jfBaseSize" v-cloak v-bind:style="vh?'height:100vh':'height: 100%;'"> 
    <div class="bannerbg">
           <div class="UserPhoto" style="position:relative;top:65%;text-align:center;">
            <img v-bind:src="UserPhoto" style="border-radius: 100%;height: 4rem;width: 4rem;"/>
          </div>
    </div>
    <div class="login-content">
      <div>
        <span><img src="http://image.supercarrier8.com/h5_key/icon-tel-gray.png" /></span>
        <input type="text" placeholder="请输入手机号码" readonly="readonly" class="inp" name="PhoneNo" id="PhoneNo" v-model="PhoneNo" autocomplete="off">
      </div>
      <div>
        <span><img src="http://image.supercarrier8.com/h5_key/icon-lock-gray.png"/></span>
        <input type="password" placeholder="请输入密码" readonly="readonly" class="inp" name="Password" id="Password"  v-model="Password" autocomplete="off">
      </div>
    </div>
    <!-- <img class="bg-img" :src="comp.props.bgImg.val"> -->
    <button class="item-btn"  @click="login()">登录</button>

    <div class="footer"><span style="float:left;"><a href="javascript:void(0)" @click="goPage('K_Reg')">我要注册</a></span> <span  style="float:right;"> <a href="javascript:void(0)" @click="goPage('Key_FPwd')">忘记密码</a></span> </div>
  </div>
</template>
<script>
import { Toast } from 'mint-ui';
import channelHelper from "@/assets/js/channelHelper.js";
import { base64 } from "@/assets/js/cryptoHelper";
import { debug } from 'util';
import '@/assets/js/libs/js.cookie';
import { Indicator } from 'mint-ui';
export default {
  name: "Key_Login",
  props: ["comp", "cfg", "selectedPage"],
  data() {
    var wxUserInfo=this.sup8.context.wxUser;
    var UserPhoto="";
    if(wxUserInfo)
    {
      UserPhoto=wxUserInfo.headimgurl;
    }else{
      UserPhoto="http://image.supercarrier8.com/h5_key/icon_headDefault.png";
    }
    return {
      UserPhoto:UserPhoto,
      PhoneNo: "",
      Password: "",
      vh:false,
    };
  },
  methods: {
     goPage(pagetype){
        this.$parent.changeSelectedPage(pagetype);
    },
    // 输入验证
    validation(){ 
      if(this.PhoneNo == ""){
        Toast('请输入手机号码');
        return true;
      }
      if(this.Password == ""){
        Toast('请输入密码');
        return true;
      }
      return false;
    },
      AutoLogin(){
         var locationto=this.$parent;
        var that=this;var OpenId="";var nickname="";var headimgurl="";
        var wxUserInfo=this.sup8.context.wxUser;
        if(wxUserInfo)
        {
            nickname=wxUserInfo.nickname;
            headimgurl=wxUserInfo.headimgurl;
            OpenId=wxUserInfo.openid;
        }
        if(OpenId=="")
        {
            return;
        }
        var GPRS=sessionStorage.getItem("gps");
        var url = "/channel/KeyPersonUserLoginByOpenId";
        var dataParams = {
            EntranceId:this.sup8.context.entranceid,
            EnterpriseNo:that.sup8.context.enterpriseno,
            OpenId:OpenId,
            LanguageType:channelHelper.GetLanguageType(),
            IP:"",
            GPS:GPRS,
            NickName:nickname,
            HeadImage:headimgurl
        };
        var cbError=function(){Indicator.close();}
        var cbSuccess = function(res){
            if(res.flag)
            {
               localStorage.setItem("loginauto","1");
               localStorage.setItem('loginInfo', JSON.stringify(res.data));
              // 页面跳转
              locationto.changeSelectedPage("Key_HPage");
            } Indicator.close();
        };
        //请求后端
        channelHelper.CommonCallServiceAuto(url,dataParams,cbSuccess,cbError,null,null)
      },
    // 用户登录
	  login(isAuto = false) {
       var locationto=this.$parent;
       if(isAuto)
       {
           locationto.changeSelectedPage("Key_HPage");return;
       }
		  //isAuto是true表示自动登录
		  let that = this;
		  if (that.validation()) {
			  return;
		  };
      Indicator.open();
      
      var OpenId="";var location="";var nickname="";var headimgurl="";
      var wxUserInfo=this.sup8.context.wxUser;
      if(wxUserInfo)
      {
        OpenId=wxUserInfo.openid;
        nickname=wxUserInfo.nickname;
        headimgurl=wxUserInfo.headimgurl;
      }
       var GeoArea=that.sup8.context.geo;
       if(GeoArea)
       {
          GeoArea=GeoArea.addressComponent;
          location=GeoArea.country+GeoArea.province+GeoArea.city+GeoArea.district+GeoArea.street+GeoArea.street_number;
       }
       var GPRS=sessionStorage.getItem("gps");
      //var GPRS=that.sup8.UA.geo.latitude+","+that.sup8.UA.geo.longitude;
		  // 登录请求
       var url = "/channel/KeyPersonLoginAndBindOpenId";
        var dataParams = {
            EntranceId:this.sup8.context.entranceid,
            EnterpriseNo: that.sup8.context.enterpriseno,
            MemberName: base64.en(that.PhoneNo),
            MemberPwd: base64.en(that.Password),
            OpenId: OpenId,
            LanguageType:channelHelper.GetLanguageType(),
            GPS:location,
            IP:"",
            NickName:nickname,
            HeadImage:headimgurl
        };
        var cbError=function(){Indicator.close();}
        var cbSuccess = function(res){
          Indicator.close();
				  if (res.flag) {
					  localStorage.setItem('loginInfo', JSON.stringify(res.data));
					  // 页面跳转
					   locationto.changeSelectedPage("Key_HPage");
				  } else {
					  Toast(res.msg || "登录失败");
				  }
        };
        //请求后端
        channelHelper.CommonCallService(url,dataParams,cbSuccess,cbError,null,null)
	  },
    /* 背景图  */
    updateDom() {  
        var that = this;
        //alert(this.comp.props.bgImg.val);
        // 将当前设置的背景图片加到body标签下
        $(".bannerbg").css({
          "margin-bottom":"2rem",
          "height":"6.4rem",
          "background-repeat": "no-repeat",
          "background-color": "rgb(53, 145, 246)",
          "background-size": "100% 100%",
          "background-image":"url("+this.comp.props.bgImg.val+")"
        });
    }
  },
  watch: {
      "comp.props.bgImg.val": function() {
      this.updateDom();
    }
  },
  created: function() {
     var that=this;
     Indicator.close(); 
      var isDesign = location.pathname.indexOf('design');
      if(isDesign!=-1)
      {
         return;
      }
      if(channelHelper.CheckLogin(this.$parent, that.sup8.context.enterpriseno,this.sup8.context.entranceid)){
              this.$parent.changeSelectedPage("Key_HPage");
      }else{
          this.AutoLogin();
      }
  },
  mounted: function() {
    try{
     this.updateDom();
    }catch(e){}
      //如果登录了则自动跳转到首页
      // if(localStorage.getItem("loginInfo")!=null)
      // {
      //     //var loginInfo=JSON.parse(localStorage.getItem("loginInfo"));
      //     this.login(true);
      // }
      var that=this;
      var isDesign = location.pathname.indexOf('design');
      if (!(isDesign>-1)) {
          that.$set(that,'vh',true);
      }else{
          that.$set(that,'vh',false);
      }
      setTimeout(()=>{
        $("#PhoneNo").removeAttr("readonly");$("#Password").removeAttr("readonly");
        let offsetHeight = document.body.offsetHeight;
        let scrollHeight = document.body.scrollHeight;
        this.height = scrollHeight>offsetHeight?scrollHeight+"px":offsetHeight+"px";
      },500);
  }
};
</script>

