<style scoped>
.comp-classpage input,.comp-classpage textarea,.comp-classpage select,.comp-classpage button{padding:0;}
hr {margin: 0;border: 0.17rem solid #e6e6e9;}
.comp-classpage{height:100%;height: 100vh;}
.Key_UpdateName{padding:5% 6%;}
/* .Key_UpdateName div{
	line-height: 3rem;height: 3rem;
	margin-top:0;padding:0.4rem 0;display:flex;border-bottom: 0.01rem solid #E9E9E9;}
.Key_UpdateName div span{display:block;text-align:center;padding:0.3rem 0.5rem;padding-left:0; }
.Key_UpdateName div input{text-indent:0.3rem; background-color: #fff;border:0px;flex:1;outline:none;color:#333;}
.Key_UpdateName img{width:0.9rem;height:1rem;} */
.Key_UpdateName div{margin-top:0;padding:0.6rem 0;height:2rem;line-height:2rem;display:flex;border-bottom: 1px solid #E9E9E9;}
.Key_UpdateName div .iconImg{display:inline-block;text-align:center;padding:0 0.4rem; padding-top:0.2rem;padding-left: 0;}
.Key_UpdateName div .iconImg img{width:0.9rem ;height: 1rem;}
.Key_UpdateName div input{background-color: #fff;border:0px;flex:1;outline:none;color:#000;}
.Key_UpdateName div .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.4rem;}
/* .Key_UpdateName div span.vc-text{ flex: 1;padding: 0;display: flex;}
.Key_UpdateName div span.vc-text input{width:46%;background-color: #fff;border:0px;outline:none;color:#333;} */
/* .Key_UpdateName div span span.gainVC{
  padding:0;border-left:1px solid #E9E9E9;background-size: 0.5rem 1rem; border-radius:100%;
  color:#FECC41;border-radius: 0.6rem;border: 1px solid #FECC41;
  line-height: 1.4rem;
height: 1.25rem;
margin-left: 2rem;font-size: 0.8rem;margin-top:0.7rem;width: 5rem;} */

.item-btn {display:inline-block;width:88%;height:2.5rem;padding:0;
margin:0 6%;margin-top:0px;margin-bottom:0px;font-size:1rem;
line-height:2.5rem;text-align:center;color:#fff;
background:#3A8AFB;border:none;border-radius:0.2rem;
margin-top:1.5rem;margin-bottom:1rem; font-weight: bold;}
input[type=button],button, input[type=submit], input[type=file], button {cursor:pointer;outline:0px; -webkit-appearance:none; }

</style>
<template>
<div class="container comp-classpage jfBaseSize" v-cloak v-bind:style="vh?'height:100vh':'height: 100%;'">
    <div id="Key_UpdateName" class="Key_UpdateName">
     <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>
        <input type="text" placeholder="请输入验证码" class="inp" name="VerifyCode" id="VerifyCode"  autocomplete="off"/>
        <span class="gainVC" id="btnSendCode" @click="SendCode($event)">获取验证码</span>
      </div>
    </div>
<button class="item-btn"  @click="UpdateMobile()">保存</button>
 <ReturnHome ref="returnhome"></ReturnHome>
</div>
</template>
<script> 
	import $ from 'jquery'
	import ReturnHome from "@/components/channel/temp001/ReturnHome";
	import JfapiHelper from "@/assets/js/JfapiHelper.js";
	import channelHelper from "@/assets/js/channelHelper.js";
	import MintUI from 'mint-ui';
	import { Toast } from 'mint-ui';
	export default {
		name: 'Key_UpdateMobile',
		components: {ReturnHome},
		provide(){       
			return{           
				goPage:this.goPage       
			}   
		},
		props: ["cfg", "comp","selectedPage"],
		data() {
			var that = this;
			//从缓存中得到登录信息
			var loginUserInfo = null;
			var tempLoginInfo = localStorage.getItem("loginInfo");
			var Phone="";
			if ($.trim(tempLoginInfo) != "") {
				loginUserInfo = eval('(' + tempLoginInfo + ')');
				Phone=loginUserInfo.Phone;
            }
			return {
				loginUserInfo:loginUserInfo,
				Mobile: Phone,
				vh:false,
				SendFlag:true
			};
		},
		methods: {
			goPage(type){
               this.$parent.changeSelectedPage(type);
            },
			UpdateMobile() {
				var location=this.$parent;
				var that = this;
				var eno=that.sup8.context.enterpriseno;
				var confirmBtn = $(".item-btn");
				var changeMobileObj = $("#Mobile");
				if ($.trim(changeMobileObj.val()) == "") {
					MintUI.Toast('请输入手机号码！');
					return false;
				}
				if($.trim($("#VerifyCode").val())== ""){
					Toast('请输入验证码');
					return true;
				}  
				var tempMobile = $.trim(changeMobileObj.val());
				//判断是否登录
				if (!JfapiHelper.CheckLogin(this.$parent,eno)) {
					return false;
				}
				//更新姓名
				var url = "/channel/ChangeUserMobile";
				var dataParams = {
					EnterpriseNo: eno,
					Mobile: tempMobile,
					UserToken: that.loginUserInfo.UserToken,
					VerifyCode:$("#VerifyCode").val(),
					LanguageType: channelHelper.GetLanguageType()
				};
				var cbBeforeSend = function () {
					confirmBtn.val("请稍等...");
				};
				var cbComplete = function () {
					confirmBtn.val("确定");
				};
				var cbSuccess = function (resultData) {
					if ((resultData || "") != "") {
						if ((typeof resultData).toLowerCase() == "string") {
							resultData = eval('(' + resultData + ')');
						}
						if (resultData.flag && (resultData.errorCode || "") == "0") {
							//更新用户json变量中的数据
							that.loginUserInfo.Phone = tempMobile;
							MintUI.Toast('更新成功！');
							window.history.go(-1);
						}
						else {
							MintUI.Toast(resultData.msg);
						}
					}
				};
				var cbError = function (jqXHR, textStatus, errorThrown) {
					MintUI.Toast(jqXHR.responseText);
				};
				//请求后端
				channelHelper.CommonCallService(url, dataParams, cbSuccess, cbError, cbBeforeSend, cbComplete);
			},
			SendCode(e){
				var that=this;
			    var changeMobileObj = $("#Mobile");
				if($.trim(changeMobileObj.val())== ""){
					Toast('请输入手机号码');
					return true;
				}
				$(e.target).attr("disabled",true);
				if(!that.SendFlag)
				{
					return true;
				}
				that.SendFlag=false;
				var url = "/integral/SendVCode";
				var dataParams = { 
					EntranceId:this.sup8.context.entranceid,
					EnterpriseNo:that.sup8.context.enterpriseno,
					Mobile:changeMobileObj.val(),
					Type:3,
					LanguageType:channelHelper.GetLanguageType()
				};
				var cbBeforeSend = function () {
					$(e.target).html("获取中...");
				};
				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
					{ 
						$(e.target).html("获取验证码");
						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,null)
			}
		},
		created() {
		var that=this;
			var isDesign = location.pathname.indexOf('design');
			if (!(isDesign>-1)) {
				that.$set(that,'vh',true);
			}else{
				that.$set(that,'vh',false);
			}
		},
		mounted: function () { 
			
		}
	}
</script>
