
<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 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">
      <p>
        <span>手机号</span>
        <input type="text" placeholder="请输入手机号码" class="inp" name="Mobile" id="Mobile" v-model="Mobile">
      </p>
      <p>
        <span>验证码</span>
        <span class="vc-text">
          <input type="text" placeholder="请输入验证码" class="inp" name="VerifyCode" id="VerifyCode" value="" v-model="VerifyCode">
          <span class="gainVC" id="btnSendCode" @click="SendCode($event)">获取验证码</span>
        </span>
      </p>
      <p>
        <span>新密码</span>
        <input type="password" placeholder="请输入登录密码" class="inp" name="MemberPassword" id="MemberPassword"  v-model="MemberPassword">
      </p>
    </div>
    <button class="item-btn"  @click="UpdatePwd()">确定修改</button>

    <div class="footer"><a href="javascript:void(0)" @click="GoPage()">登录</a></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>
    <!-- <img class="bg-img" :src="comp.props.bgImg.val"> -->
    <button class="item-btn"  @click="UpdatePwd()">确定修改</button>

    <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('11')">我要注册</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(pagetype){
      debugger
        this.$parent.changeSelectedPage(pagetype);
    },
    // 输入验证
    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:2,
            LanguageType:JfapiHelper.GetLanguageType()
        };
        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)
                  { that.SendFlag=true; 
                      window.clearInterval(setIntime);  
                      $(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)
    },
    // 用户注册
    UpdatePwd(){
      var locationto=this.$parent;
      //isAuto是true表示自动登陆
      let that = this;
      if(that.validation()){
        return;
      };
      Indicator.open();
      // 登陆请求
      let eno = that.sup8.context.enterpriseno?that.sup8.context.enterpriseno:that.sup8.context.eno;
      JfapiHelper.UpdatePwd({
            EnterpriseNo: eno,
            Mobile:that.Mobile,
            MemberPwd:that.MemberPassword,
            LanguageType:JfapiHelper.GetLanguageType(),
            VerifyCode:that.VerifyCode
        },
        function(res) {
          Indicator.close();
          if (res.flag){
             Toast("修改成功");
            locationto.changeSelectedPage("10");
          }else{
            sessionStorage.removeItem('loginInfo');
            Toast(res.msg||"修改失败");
          }
        },
        function(res) {
          Toast("修改失败");
          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;
      }
    },
    recordPwd:function(){
      if(!this.recordPwd){
        this.autoLogin = false;
      }
    },
     "comp.props.bgImg.val": function() {
      this.updateDom();
    }
  },
  created: function() {
    var that = this;
    // 合并参数是为了当实际属性少于基础属性时 补位
    that.mergeCompProps(that.comp);

    that.style = {};
    switch (that.sup8.env) {
      case that.sup8._def.env.design:
        that.disabled = true;
        break;
      case that.sup8._def.env.preview:
        break;
      case that.sup8._def.env.run:
        let cookie = {};
        // cookie过期JSON.parse容错处理
        try {
          cookie = JSON.parse(Cookies.get('employeeInfo'));
        } catch (error) {
          cookie = {};
        }
        if(cookie.autoLogin || cookie.recordPwd){
          this.username = base64.de(cookie.username);
          this.password = base64.de(cookie.password);
          this.recordPwd = cookie.recordPwd;
          this.autoLogin = cookie.autoLogin;
          if(cookie.autoLogin){
            this.login(true);
          }
        }
        break;
      default:
        break;
    }
  },
  mounted: function() {
      try{
        this.updateDom();
      }catch(e){}
    var that=this;
    var isDesign = location.pathname.indexOf('design');
    if (!(isDesign>-1)) {
        that.$set(that,'vh',true);
    }else{
        that.$set(that,'vh',false);
    }
  }
};
</script>