<template>
	<!-- 验证用户身份组件 -->
	<view class="VerifyIdentity">

		<uni-popup :show="showtip" type="center" :mask-click="true" @change="change">
			
			<view class="tipboxs">
				
				<view class="tipboxs_body" v-if="value!=''">
					<view class="textmsgs">为了你的账户安全, </view>
					<view class="textmsgs">系统需要对你的身份进行验证</view>
					
					<view class="fromboxs">
						<view class="lablecell flex ali-c">
						  <view class="cellname">手机号码</view>
						  <view class="inputbox">
							<input type="number" disabled="disabled"  :value="value" @input="changeinput" class="input" placeholder="请输入手机号码" />
						  </view>
						</view>
		
						<view class="lablecell flex ali-c">
						  <view class="cellname">验证码</view>
						  <view class="inputbox">
							<input type="number"   v-model="code"  class="input" placeholder="请输入验证码" />
							<view class="codetag" v-if="datesis==60" @tap="shendcodefun">发送</view>
							<view class="codetag codetagtwo" v-if="datesis!=60" >{{datesis}}</view>
							
						  </view>
						</view>
					</view>

					<view class="submitbtns" @tap="confirm">确认</view>
				</view>
				
				<view class="tipboxs_body" v-else>
					<view class="textmsgs">为了你的账户安全, 你需要先持管理者账号</view>
					<view class="textmsgs">登录鹿马108小程序或APP 绑定手机号码</view>
					<view class="submitbtns" @tap="cancel" >好的,我知道了</view>
				</view>
				
				<image @tap="cancel" class="Closeicon" :src="joinurl+'/images/uts/guanbi.png'" mode=""></image>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	import {userSendSms} from "@/utils/api/api.js";
	export default{
		//props:["title","content"],
		props:{
			//手机号码
			value:{
				type:String,
				default:"",
			},
			//使用场景
			type:{
				type:String,
				default:"1",
			}
		},
		name:"VerifyIdentity",
		components:{
			uniPopup,
		},
		computed:{
			joinurl(){
				return this.$store.state.joinurl;
			}
		},
		data(){
			return{
				showtip:false,
				datesis:60,
				phone:this.value,
				code:"",
			}
		},
		methods:{
			changeinput(e){
				this.phone = e.detail.value;
				// this.setValue(e.detail.value);
			},
			//发送验证码按钮点击后
			shendcodefun(){
				if (!(/^1[3456789]\d{9}$/.test(this.value))) {
					this.$api.msg("手机号码有误");
				} else {
					
					userSendSms({
					  mobile: this.value,
					  smstype:this.type,//验证码类型（默认修改密码：sms_user_newpwd，提现：sms_withdraw）
					}).then((res)=>{
					  if(res.code==0){
						this.$api.msg(res.msg);
						//倒计时代码
						let timeid = setInterval(() => {
						  this.datesis--;
						  if (this.datesis <= 0) {
							clearInterval(timeid);
							this.datesis = 60;
						  }
						}, 1000)
			
					  }else{
						
						this.$api.msg(res.msg);
					  }
					}).catch((e)=>{
					  this.$api.msg(e);
					})
				}
			},
			cancel(type) {//关闭
				this.showtip = false;
			},
			//提示弹窗
			change(e) {
				if (!e.show) {
					this.showtip = false
				}
			},
			show(){
				this.showtip = true;
			},
			//确认发布点击
			confirm(){
				this.showtip = false;
				this.$emit("fromSubmitfun",{code: this.code, phone: this.value, type:this.type});//触发回调方法
				this.code = "";
			}
		},
		watch:{
			value(e){
				
			}
		}
	}
</script>

<style lang="scss">
	.VerifyIdentity{
		width: 510upx;
	}
	.tipboxs{
		.heads{
			.headimg{
				height: 300upx;
				width: 100%;
			}
		}
		.fromboxs{
			margin-top: 30upx;
			.lablecell{
					height: 88upx;
				  line-height: 88upx;
				  font-size: 30upx;
				  padding:0 24upx ;
				  border-bottom: 1px solid #f5f5f5;
				.cellname{
					margin-right: 10upx;
					width: 140upx;
				}
				.inputbox{
					position: relative;
					height: 88upx;
					.input{
						height: 88upx;
						line-height: 88upx;
						text-align: left;
					}
					.codetag{
					  position: absolute;
					  top: 14upx;
					  right: 0;
					  z-index: 99;
					  color:#FFFFFF;
					  background: #ff6900;
					  font-size: 28upx;
					  padding: 0 30upx;
					  height: 60upx;
					  line-height: 60upx;
					  box-sizing: border-box;
					  border-radius: 4upx;
					}
					.codetagtwo{
					  background: #999;
					}

				}
			}
		}
		.tipboxs_body{
			border-radius: 14upx;
			
			margin-top: -20upx;
			padding: 20upx;
			padding-top: 30upx;
			background: #ffffff;
			text-align: center;
			.textmsgs{
				color:#333C4C;
				font-size: 32upx;
				font-weight: bold;
				.sum{
					color:#ff6900;
				}
			}
			.submitbtns{
				font-size: 32upx;
				width:411upx;
				height:83upx;
				line-height: 83upx;
				text-align: center;
				background:rgba(255,105,0,1);
				border-radius:10upx;
				color:#FFFFFF;
				margin: 0 auto;
				margin-top: 50upx;
				margin-bottom: 30upx;
			}
		}
		.Closeicon{
			position: absolute;
			left: 50%;
			margin-left: -30upx;
			margin-top: 40upx;
			width: 60upx;
			height: 60upx;
		}
	}
</style>
