
<style scoped>
.comp-login {background-color:#FFF;height:100vh;}
.input-box {background:#FFF;}
.comp-login {padding:0;margin:0;}
/* .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:4rem;display:block;text-align:center;padding:0 0.2rem;}
.login-content p span.vc-text{ flex: 1;padding: 0;display: flex;}
.login-content p >input{background-color: #fff;border:0px;flex:1;outline:none;color:#c03546;}
.login-content p span.vc-text input{width:46%;background-color: #fff;border:0px;outline:none;color:#c03546;}
.login-content p span span.gainVC{flex:1;color:#c03546;padding:0;padding-right: 0.6rem;padding-left:0.2rem;border-left:1px solid #c03546;background: url(https://release-sup8-images.oss-cn-shanghai.aliyuncs.com/h5_shop/arrow_red.png) no-repeat right 54%;background-size: 0.5rem 1rem;}
.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);}
.footer a {color:#b3b3b3;margin: 0 0.6rem;} */
.login-content{padding:0 6%;}
.login-content div{margin-top:0;padding:0.4rem 0;height:2rem;line-height:2rem;display:flex;border-bottom: 1px solid #E9E9E9;}
.login-content div .iconImg{display:inline-block;text-align:center;padding:0 0.4rem; padding-top:0.18rem;padding-left: 0;}
.login-content div .iconImg img{width:0.9rem ;height: 1rem;}
.login-content div input{background-color: #fff;border:0px;flex:1;outline:none;color:#000;}
.login-content div span.gainVC{float:right;color:#FECC41;border-radius: 0.65rem;border: 1px solid#FECC41;font-size: 0.8rem;text-align: center;display: block;width: 5rem;height: 0.7rem;line-height: 0.84rem;padding: 0.16rem 0;margin-top: 0.5rem;}
.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">
        <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 class="iconImg">
          <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 class="iconImg">
          <img src="http://image.supercarrier8.com/h5_key/icon-verificationCode-gray.png" />
        </span>
        <!-- <span class="vc-text"> -->
        <input type="text" placeholder="请输入验证码" class="inp" name="VerifyCode" id="VerifyCode" v-model="VerifyCode" autocomplete="off"/>
        <span class="gainVC" id="btnSendCode" @click="SendCode($event)">获取验证码</span>
        <!-- </span> -->
      </div>
      <div>
        <span class="iconImg">
          <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="Reg($event)">注册</button>
    <!-- <div class="footer"><a href="javascript:void(0)" @click="goPage()">登录</a></div> -->
    <div class="footer">
      <span style="float:left;">
        <a href="javascript:void(0)" @click="goPage('10')">立即登录</a> 
      </span>
      <span style="float:right;">
       <a href="javascript:void(0)" @click="goPage('12')">忘记密码</a>
      </span>
    </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: "JfCompReg",
  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: "",
      VerifyCode:"",
      SendFlag:true,
      vh:false,
    };
  },
  methods: {
    goPage(){
       this.$parent.changeSelectedPage("10");
    },
    // 输入验证
    validation(){
      if(this.Mobile == ""){
        Toast('请输入手机号码');
        return true;
      }
      if(this.MemberPassword == ""){
        Toast('请输入密码');
        return true;
      }
      if(this.VerifyCode == ""){
        Toast('请输入验证码');
        return true;
      }
    },
    SendCode(e){
      var that=this;
      if(this.Mobile == ""){
        Toast('请输入手机号码');
        return true;
       } 
       $(e.target).attr("disabled",true);
       if(!that.SendFlag)
       {
         return true;
       }
       that.SendFlag=false;
        var url = "/integral/SendVCode";
        var dataParams = {
            EnterpriseNo:that.sup8.context.enterpriseno,
            Mobile:this.Mobile,
            Type:1,
            LanguageType:"zh-cn"
        };
        var cbBeforeSend = function(){
          
        };
        var cbComplete = function(){
        
        };
        var cbSuccess = function(res){
            if (res.flag) {
                $(e.target).html("已发送(60s)");
                $(e.target).attr("disabled",true);
                var i=60; 
                var setIntime=window.setInterval(function(){
                  $(e.target).html("已发送("+i+"s)");
                  if(i<=0)
                  {
                      window.clearInterval(setIntime); 
                      that.SendFlag=true; 
                      $(e.target).html("获取验证码");
                      $(e.target).removeAttr("disabled");
                  }
                  i--;
                },1000);
            }else
            { that.SendFlag=true;
               Toast(res.msg);
            }
        };
        var cbError = function(jqXHR, textStatus, errorThrown){
          that.SendFlag=true;
            MintUI.Toast(jqXHR.responseText);
        };
        //请求后端
        JfapiHelper.CommonCallService(url,dataParams,cbSuccess,cbError,cbBeforeSend,cbComplete)
    },
    // 用户登陆
	  loginAuto(LoginID,Password) {
      var that=this;
       var locationto=this.$parent;

      var OpenId="";
      var wxUserInfo=this.sup8.context.wxUser;
      if(wxUserInfo)
      {
        OpenId=wxUserInfo.openid;
      }
       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: LoginID,
			  Password: Password,
			  OpenId: OpenId,
        LanguageType:JfapiHelper.GetLanguageType(),
        GPS:GPRS,
        IP:"" 
		  },
			  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(); 
			  }
      );

	  },
    // 用户注册
    Reg(e){
      var locationto=this.$parent;
      //isAuto是true表示自动登陆
      let that = this;
      if(that.validation()){
        return;
      };
      Indicator.open();
       $(e.target).attr("disabled",true);
     try{
       var nickname="";var headimgurl="";var openid="";var location="";
       var wxUserInfo=this.sup8.context.wxUser;
       console.log(wxUserInfo);
       if(wxUserInfo)
       {
          nickname=wxUserInfo.nickname;
          headimgurl=wxUserInfo.headimgurl;
          openid=wxUserInfo.openid;
       }
       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");
      // 登陆请求
      let eno = that.sup8.context.enterpriseno?that.sup8.context.enterpriseno:that.sup8.context.eno;
      JfapiHelper.UserRegister({
            EnterpriseNo:that.sup8.context.enterpriseno,
            Mobile:that.Mobile,
            MemberName:that.Mobile,
            MemberPwd:that.MemberPassword,
            OpenId:openid,
            LanguageType:JfapiHelper.GetLanguageType(),
            VerifyCode:that.VerifyCode,
            NickName:nickname,
            HeadImage:headimgurl,
            Location:location,
            GPS:GPRS
        },
        function(res) {
          Indicator.close();
          if (res.flag){
            // 保存登陆凭证
            sessionStorage.setItem('loginInfo', JSON.stringify({
              Mobile:base64.en(that.Mobile),
              enterpriseno:base64.en(eno),
              isLogin:true
            }));
            Toast("注册成功");
            that.loginAuto(that.Mobile,that.MemberPassword);
            //locationto.changeSelectedPage("10");
          }else{
             $(e.target).attr("disabled",false);
            sessionStorage.removeItem('loginInfo');
            Toast(res.msg||"注册失败");
          }
        },
        function(res) {
          Indicator.close();
        }
      );
     }catch(e){ $(e.target).attr("disabled",false);
       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: {
    autoLogin:function(){
      if(this.autoLogin){
        this.recordPwd = true;
      }
    },
     "comp.props.bgImg.val": function() {
      this.updateDom();
    }
  },
  created: function() {
     var that = this;
     // 合并参数是为了当实际属性少于基础属性时 补位
     that.mergeCompProps(that.comp);
  },
  mounted: function() {
    var that=this;
    try{
      this.updateDom();
    }catch(e){}
    var isDesign = location.pathname.indexOf('design');
    if (!(isDesign>-1)) {
        that.$set(that,'vh',true);
    }else{
        that.$set(that,'vh',false);
    }
  }
};
</script>

