<template>
	<view>
		<uni-section title="实名认证" type="line">
			<view class="paddinglr30">
				<!-- 基础用法，不包含校验规则 -->
				<uni-forms ref="baseForm" :rules="rules" :modelValue="baseFormData">
					<uni-forms-item label="姓名" name="username" required>
						<uni-easyinput v-model="baseFormData.username" placeholder="请输入姓名" />
					</uni-forms-item>
					<uni-forms-item label="身份证号" name="userId" required>
						<uni-easyinput v-model="baseFormData.userId" placeholder="请输入身份证号" />
					</uni-forms-item>
					<uni-file-picker
						v-model="baseFormData.fontimageValue" 
						fileMediatype="image" 
						 
						:image-styles="imageStyles"
						return-type="array"
						file-extname="png,jpg" 
						:limit="1" 
						@select="select" 
						@progress="progress" 
						@success="success" 
						@fail="fail"
						title="身份证正面" />
					
					<uni-file-picker 
						v-model="baseFormData.sideimageValue" 
						fileMediatype="image" 
						 
						:image-styles="imageStyles"
						return-type="array"
						file-extname="png,jpg" 
						:limit="1" 
						@select="select" 
						@progress="progress" 
						@success="success" 
						@fail="fail"
						title="身份证反面" />
			
				</uni-forms>
			</view>
		</uni-section>
		<view class="paddinglr30 margin-top-30 uni-common-mb">
			<button type="primary" @click="submit('baseForm')">确认</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseFormData: {
					invoicetitle: '',
					userId: '',
					fontimageValue:[],
					sideimageValue:[],
				},
				// 校验规则
				rules: {
					username: {
						rules: [{
							required: true,
							errorMessage: '姓名不能为空'
						}]
					},
					userId: {
						rules: [{
							required: true,
							errorMessage: '身份证号不能为空'
						}, {
							format: 'number',
							errorMessage: '身份证号只能输入数字'
						}]
					},
				},
				imageStyles: {
					width: 300,
					height: 200,
					// 线条样式
					borderStyle: {
						width: 1,
						color: 'blue',
						style: 'dashed',
						radius: 2
					}
				},

			}

		},
		methods: {
			// 获取上传状态
			select(e) {
				console.log('选择文件：', e)
			},
			// 获取上传进度
			progress(e) {
				console.log('上传进度：', e)
			},

			// 上传成功
			success(e) {
				console.log('上传成功')
			},

			// 上传失败
			fail(e) {
				console.log('上传失败：', e)
			},
			
			// 提交
			submit(ref) {
				this.$refs[ref].validate().then(res => {
					console.log('success', res);
					uni.showToast({
						title: `校验通过`
					})
				}).catch(err => {
					console.log('err', err);
				})
			}
		}
	}
</script>

<style lang="scss">

</style>
