<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 class="image-list">
          <view class="image-preview">
            <text class="image-delete iconfont icon-shanchu" @click="deleteImage(index, imageIndex)"></text>
            <image class="image" mode="aspectFill" ></image>
          </view>
          <view  class="image-picker" >
            <text class="choose-icon iconfont icon-camera"></text>
            <text class="choose-text">上传图片</text>
          </view>
        </view> -->
		
		

		
		</view>
		<view class="gtbtnzone">
			<button class="gtbtn" @click="chkst">下一步</button>
		</view>
	</view>
</template>

<script>
	import * as UploadApi from '@/api/upload'
	import * as Verify from '@/utils/verify'
	import store from '@/store'
	import * as UserApi from '@/api/user'
	import { checkLogin, showError } from '@/core/app'
	
	// 最大图片数量
	const maxImageLength = 2
	
	export default {
		data() {
			return {
				//姓名
				rname:"",
				// 身份证
				rid:"",
				// 图片列表
				imageList: [],
				//用户信息
				userInfo:[]
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			// 系统初始化
			init(){
				if(checkLogin()==true){
					this.isLogin = true
					this.getUserInfo()
				}else{
					this.isLogin= false
					showError("请登录后再操作",this.gotologin())
				}
			},
			gotologin(){
				this.$navTo("pages/login/index")
			},
			// 获取当前用户信息
			getUserInfo() {
			  const app = this
			  return new Promise((resolve, reject) => {
			    !app.isLogin ? resolve(null) : UserApi.info({}, { load: app.isFirstload })
			      .then(result => {
			        app.userInfo = result.data.userInfo
					if(app.userInfo.real_name!="" && app.userInfo.id_no!=""){
						this.$navTo("pages/home")
					}
			        resolve(app.userInfo)
			      })
			      .catch(err => {
			        if (err.result && err.result.status == 401) {
			          app.isLogin = false
			          resolve(null)
			        } else {
			          reject(err)
			        }
			      })
			  })
			},
			// 提交认证信息
			chkst() {
			  const app = this
			  if (!app.isLoading && app.formValidationName(app.rname) && app.formValidationId(app.rid)) {
			 //    if(app.submitVerify()){
				// 	// 跳转到选择设备
				// 	//this.$navTo("pages/verfiy/choosedev");
				// }
				app.submitVerify();

			  }
			},
			
			// 提交认证信息
			submitVerify(){
				const app = this
				let data = {real_name:app.rname,id_no:app.rid}
				UserApi.verifyname({form:data}).then(res=>{
					// console.log(res)
					this.$navTo("pages/verfiy/choosedev");
					//return true
				}).catch(err=>{
					// console.log(err)
					return false
				})
			},

			//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
				}
				// 校验正则
				let regIdNo = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
				if(!regIdNo.test(str)){ 
				  this.$toast('身份证号填写错误'); 
				  return false; 
				} 
				if(str.length<18 || str.length>18){
					this.$toast("手机号持有人身份证号异常")
					return false
				}
				return true
			},	
				
			  // 选择图片
			  chooseImage(index) {
				const app = this
				const oldImageList = app.imageList
				// 选择图片
				uni.chooseImage({
				  count: maxImageLength - oldImageList.length,
				  sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
				  sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
				  success({ tempFiles }) {
					// tempFiles = [{path:'xxx', size:100}]
					app.imageList = oldImageList.concat(tempFiles)
				  }
				});
			  },
		
			  // 删除图片
			  deleteImage(index, imageIndex) {
				this.imageList.splice(imageIndex, 1)
			  },
			  // 统计图片数量
			  getImagesLength() {
				const { formData } = this
				let imagesLength = 0
				formData.forEach(item => {
				  if (item.content.trim()) {
					imagesLength += item.imageList.length
				  }
				})
				return imagesLength
			  },
			  
			// 上传图片
			uploadFile() {
			  const app = this
			  const { formData } = app
			  // 整理上传文件路径
			  const files = []
			  formData.forEach((item, index) => {
				if (item.content.trim() && item.imageList.length) {
				  const images = item.imageList.map(image => image)
				  files.push({ formDataIndex: index, images })
				}
			  })
			  // 批量上传
			  return new Promise((resolve, reject) => {
				Promise.all(files.map((file, index) => {
					return new Promise((resolve, reject) => {
					  UploadApi.image(file.images)
						.then(fileIds => {
						  app.uploaded = fileIds
						  resolve(fileIds)
						})
						.catch(reject)
					})
				  }))
				  .then(resolve, reject)
			  })
			}
		}
	}
</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;
    }
	
	    .image-list {
	      padding: 0 20rpx;
	      margin-top: 20rpx;
	      margin-bottom: -20rpx;
	
	      &:after {
	        clear: both;
	        content: " ";
	        display: table;
	      }
	
	      .image {
	        display: block;
	        width: 100%;
	        height: 100%;
	      }
	
	      .image-picker,
	      .image-preview {
	        width: 184rpx;
	        height: 184rpx;
	        margin-right: 30rpx;
	        margin-bottom: 30rpx;
	        float: left;
	
	        &:nth-child(3n+0) {
	          margin-right: 0;
	        }
	      }
	
	      .image-picker {
	        display: flex;
	        flex-direction: column;
	        justify-content: center;
	        align-items: center;
	        border: 1rpx dashed #ccc;
	        color: #ccc;
	
	        .choose-icon {
	          font-size: 48rpx;
	          margin-bottom: 6rpx;
	        }
	
	        .choose-text {
	          font-size: 24rpx;
	        }
	      }
	
	      .image-preview {
	        position: relative;
	
	        .image-delete {
	          position: absolute;
	          top: -15rpx;
	          right: -15rpx;
	          height: 42rpx;
	          width: 42rpx;
	          line-height: 42rpx;
	          background: rgba(0, 0, 0, 0.64);
	          border-radius: 50%;
	          color: #fff;
	          font-weight: bolder;
	          font-size: 22rpx;
	          z-index: 10;
	          text-align: center;
	        }
	      }
	    }
 
  }
}

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

</style>
