
<style scoped>  
.comp-login {background-color:#fff;height:100%;height:100vh;}
.input-box {background:#FFF;}
.comp-login {padding:0;margin:0;}
/* .comp-login ul {margin:0px;padding:0px;list-style:none;}
.comp-login ul li {display:block;height:3.5rem;background-color:#FFF;border-bottom:solid #EEE 0.01rem;clear:both;}
.comp-login ul li h4 {float:left;width:15%;text-align:right;color:#444;font-weight:normal;}
.comp-login ul li .input-box {float:left;padding-left:0.5rem;padding-top:1.1rem;}
.comp-login  ul li .input-box .inp {width:100%;padding:0.2rem 0;border:0 none;} */
/*.login-content{padding:0 4%;padding-top:3rem;}
.login-content p{margin-top:0;margin-bottom:0.8rem;padding:0.4rem 0;height:2rem;line-height:2rem;display:flex;border-bottom: 1px solid #c03546;}
.login-content p span{width:80px;display:block;text-align:center;padding:0 0.2rem;}
.login-content p input{background-color: #fff;border:0px;flex:1;outline:none;color:#c03546;}
.item-btn {display:inline-block;width:92%;height:2.6rem;padding:0;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;margin:0 4%;margin-top:0px;margin-bottom:0px;font-size:1rem;line-height:2.6rem;text-align:center;color:#fff;background:#c03546;border:none;border-radius:0.2rem;margin-top:1rem;margin-bottom:1rem;}
.footer {color:#b3b3b3;text-align:center;text-shadow:1px 1px 0 rgba(255,255,255,1);margin-right:1.6rem; }
.footer a {color:#b3b3b3;margin: 0 0.6rem;}
*/
.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;}
.login-content img{width:0.9rem;height:1rem;}
.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;}
.bannerbg{margin-bottom:2rem;background-image:url('http://image.supercarrier8.com/h5_key/topbanner.png');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" style="">
          <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="请输入手机号码" class="inp"  name="Mobile" id="Mobile" v-model="Mobile" autocomplete="off"/>
        </div>
        <div>
          <span><img src="http://image.supercarrier8.com/h5_key/icon-lock-gray.png"/></span>
          <input type="password" placeholder="请输入密码" class="inp" name="MemberPassword" id="MemberPassword"  v-model="MemberPassword" autocomplete="off"/>
        </div>
      </div>
      <button class="item-btn"  @click="login()">登录</button>
      <div class="footer"><span style="float:left;"><a href="javascript:void(0)" @click="goPage('11')">我要注册</a></span><span  style="float:right;"> <a href="javascript:void(0)" @click="goPage('12')">忘记密码</a></span></div>
    <!--<div class="login-content">
      <p>
        <span>手机号</span>
        <input type="text" placeholder="请输入手机号码" class="inp" name="Mobile" id="Mobile" v-model="Mobile"/>
      </p>
      <p>
        <span>密　码</span>
        <input type="password" placeholder="请输入登录密码" class="inp" name="MemberPassword" id="MemberPassword"  v-model="MemberPassword"/>
      </p>
    </div>
    
    <button class="item-btn"  @click="login()">手机登录</button>
    <div class="footer"><a href="javascript:void(0)" @click="goPage('12')">忘记密码</a> | <a href="javascript:void(0)" @click="goPage('11')">注册</a></div>
    -->

    
  </div>
</template>
<script>
import { Toast } from 'mint-ui';
import JfapiHelper from "../assets/js/JfapiHelper.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: "JfCompLogin",
  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,
      Mobile: "",
      MemberPassword: "",
      vh:false,
    };
  },
  methods: {
     goPage(pagetype){
        this.$parent.changeSelectedPage(pagetype);
    },
    // 输入验证
    validation(){ 
      if(this.Mobile == ""){
        Toast('请输入手机号码');
        return true;
      }
      if(this.MemberPassword == ""){
        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 = "/integral/UserLoginByWeChatOpenId";
        var dataParams = {
            EnterpriseNo:that.sup8.context.enterpriseno,
            OpenId:OpenId,
            LanguageType:JfapiHelper.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("9");
            } Indicator.close();
        };
        //请求后端
        JfapiHelper.CommonCallServiceAuto(url,dataParams,cbSuccess,cbError,null,null)
      },
    // 用户登陆
	  login(isAuto = false) {
       var locationto=this.$parent;
       if(isAuto)
       {
           locationto.changeSelectedPage("9");return;
       }
		  //isAuto是true表示自动登陆
		  let that = this;
		  if (that.validation()) {
			  return;
		  };
      Indicator.open();
      try{
      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;
		  // 登陆请求
		  JfapiHelper.UserLoginAndBindOpenId({
			  EnterpriseNo: that.sup8.context.enterpriseno,
			  MemberName: that.Mobile,
			  Password: that.MemberPassword,
			  OpenId: OpenId,
        LanguageType:JfapiHelper.GetLanguageType(),
        GPS:location,
        IP:"",
        NickName:nickname,
        HeadImage:headimgurl
		  },
			  function (resultData) {
				  Indicator.close();
				  if (resultData.flag) {
					  localStorage.setItem('loginInfo', JSON.stringify(resultData.data));
					  // 页面跳转
					   locationto.changeSelectedPage("9");
				  } else {
					  Toast(resultData.msg || "登陆失败");
				  }
			  },
			  function (res) {
				  Toast("登陆失败");
				  Indicator.close(); 
			  }
      );
      }catch(e){
        Toast(e || "登陆失败"); Indicator.close(); 
      }
    },
    /* 背景图  */
    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: {
    recordPwd:function(){
      if(!this.recordPwd){
        this.autoLogin = false;
      }
    },
     "comp.props.bgImg.val": function() {
      this.updateDom();
    }
  },
  created: function() {
     var that = this;
     // 合并参数是为了当实际属性少于基础属性时 补位
     that.mergeCompProps(that.comp);
     Indicator.close(); 
     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(()=>{
        let offsetHeight = document.body.offsetHeight;
        let scrollHeight = document.body.scrollHeight;
        this.height = scrollHeight>offsetHeight?scrollHeight+"px":offsetHeight+"px";
      },1000);
  }
};
</script>

