<template>
	<view class="verfiy_name">
		<view class="vnf-tit">
			<view class="vntit">请填写实名认证信息</view>
			<view class="vntips">填写时，请保证输入信息的真实性</view>
		</view>
		<view class="form-group">
			<view class="form-item">
				<input type="text" v-model="rname" class="form-item--input" placeholder="请输入手机号持有人姓名"/>
			</view>
			
			<view class="form-item">
				<input type="text" v-model="rid" maxlength="18"  class="form-item--input" placeholder="请输入手机号持有人身份证号"/>
			</view>
		
		</view>
		<view class="gtbtnzone">
			<button class="gtbtn" @click="chkst">下一步</button>
		</view>
	</view>
</template>

<script>
	import * as Verify from '@/utils/verify'
	import store from '@/store'
	
	export default {
		data() {
			return {
				//姓名
				rname:"方哲宇",
				// 身份证
				rid:"440923195801215174",
			}
		},
		methods: {
			// 点击登录
			chkst() {
			  const app = this
			  if (!app.isLoading && app.formValidationName(app.rname) && app.formValidationId(app.rid)) {
			    //app.submitLogin()
				// 跳转到选择设备
				this.$navTo("pages/verfiy/choosedev");
			  }
			},
			
			//todo 
			formValidationName(str){
				if(Verify.isEmpty(str)){
					this.$toast('手机号持有人姓名不能为空')
					return false
				}
				return true
			},
			
			//check id
			formValidationId(str){
				if(Verify.isEmpty(str)){
					this.$toast('手机号持有人身份证号')
					return false
				}
				if(str.length<18 || str.length>18){
					this.$toast("手机号持有人身份证号异常")
					return false
				}
				return true
			},		
			
		}
	}
</script>

<style lang="scss" scoped>
.verfiy_name{
	height: 100%;
	overflow: hidden;
	position: relative;
}

.vnf-tit{
	width: 100%;
	padding-left: 36rpx;
	margin-top: 46rpx;
	
	.vntit{
		font-size: 46rpx;
		line-height: 1.6;
	}
	.vntips{
		padding: 10rpx;
		font-size: 22rpx;
		color: #999;
	}
}
.form-group{
	padding-left: 10rpx;
	padding-right: 10rpx;
	margin-top: 44rpx;
	
  // 输入框元素
  .form-item {
    display: flex;
    padding: 18rpx;
    border-bottom: 1rpx solid #f3f1f2;
    margin-bottom: 30rpx;
    height: 126rpx;

    &--input {
	  padding-left: 10rpx;
      font-size: 28rpx;
      letter-spacing: 1rpx;
      flex: 1;
      height: 100%;
	  background-color: #F8F8F8;
    }
  }
}

.gtbtnzone{
	position: fixed;
	left: 0%;
	bottom: 3%;
	height: 44rpx;
	width: 100%;
	
	.gtbtn{
		background: #10476E;
		color: #fff;
	}
}

</style>
