<template>
	<view class="container">
		<view class="title">
		   <view>
				<text class="line"></text>个人证件资料
			</view>
		   <text class="page_mark">3/8</text>
		 </view>
		 <view class="content">
		     <view class="content_wrapper">
		         <view class="photo" v-if="!applyParam.idFrontPageOssPath" @click="upLoadPhoto('front')">
		           <image src="../../static/front.png" alt="身份证正面" mode="widthFix"></image>
		           <text class="iconfont icon-weibiaoti553" ></text>
		           <view class="choseBtn" >点击添加身份证正面</view>
		         </view>
		         <view class="showimage" v-if="applyParam.idFrontPageOssPath">
		         	<image :src="applyParam.idFrontPageOssPath" mode="widthFix"></image>
		         </view>
		         <view class="tips">
		           <view>（正确示例：身份证正面，字体清晰）</view>
		           <view>（jpg,png 文件大小不大于1mb）</view>
		         </view>
		     </view>
		     <view class="content_wrapper" style="margin-top: 25px;">
		         <view class="photo" v-if="!applyParam.idBackPageOssPath" @click="upLoadPhoto('back')">
		           <image src="../../static/back.png" alt="身份证反面面" mode="widthFix"></image>
		           <text class="iconfont icon-weibiaoti553" ></text>
		           <view class="choseBtn" >点击添加身份证反面</view>
		         </view>
		         <view class="showimage" v-if="applyParam.idBackPageOssPath">
					 <image :src="applyParam.idBackPageOssPath" mode="widthFix"></image>
				 </view>
		         <view class="tips">
		           <view>（正确示例：身份证反面，字体清晰）</view>
		           <view>（jpg,png 文件大小不大于1mb）</view>
		         </view>
		     </view>
		   </view>
		 <view class="fixed" @click="saveInfo()">
		   保存并下一步
		 </view>
	</view>
</template>

<script>
	import { CommonUpload } from '@/util/uploaderFile';
	import api from '../../api/api';
	export default{
		data(){
			return {
				applyParam:{
					idFrontPageOssPath:'',
					idBackPageOssPath:''
				},
				dataForm:{
					loginId: uni.getStorageSync('cffp_userId'),
					targetType: "5",
					targetId: uni.getStorageSync('cffp_userId'),
					targetNo: "",
					targetUseFor: "12",
					targetSeq: "0"
				},
			}
		},
		components:{},
		onLoad(){
			
		},
		methods:{
			upLoadPhoto(type){
				if(type == 'front'){
					this.dataForm.targetNo = 2;
				}
				if(type == 'back'){
					this.dataForm.targetNo = 3;
				}
				CommonUpload(that.dataForm).then(res => {
					if(type == 'front'){
						this.applyParam.idFrontPageOssPath = res.data.filePath;
					}
					if(type == 'back'){
						this.applyParam.idBackPageOssPath = res.data.filePath;
					}
				})
			},
			saveInfo(){
				if(!this.applyParam.idFrontPageOssPath){
					uni.showToast({
						title: '请上传身份证正面照片',
						duration: 2000,
						icon: 'none'
					})
					return;
				}
				if(!this.applyParam.idBackPageOssPath){
					uni.showToast({
						title: '请上传身份证反面照片',
						duration: 2000,
						icon: 'none'
					})
					return;
				}
				this.applyParam = {
						...this.applyParam,
						applyType:2,
						operatStep:3,
						// userId:uni.getStorageSync('cffp_userId'),
						userId:42,
						id:17,
				}
				api.saveApplyInfo(this.applyParam).then(()=>{
					if(res['success']){
						uni.navigateTo({
							// url:`id-card?id=${res['data']['id']}`
							url:`education`
						});
					}else{
						uni.showToast({
							title: res['message'],
							duration: 2000,
							icon: 'none'
						})
						return;
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	@import 'applyCommon.scss';
	.content_wrapper{
	    display: flex;
	    justify-content: center;
	    flex-wrap: wrap;
	    margin-top: 10px;
	    overflow: hidden;
	    .photo{
	        text-align: center;
	        border: 1px #8D8D8D dashed;
	        border-radius: 4px;
	        display: flex;
	        justify-content: center;
	        align-items: center;
	        flex-direction: column;
	        font-size: 12px;
	        color: #333;
	        width: 75%;
	        background-size:contain;
	        background-repeat: no-repeat;
	        position: relative;
	       .icon-weibiaoti553{
	           position: absolute;
	       }
	        .choseBtn{
	            position: absolute;
	            font-size: 13px;
	            bottom: 19%;
	        }
	    }
	    .showImg{
	                max-width: 429px;
	                max-height: 276px;
	            }
	}
	
</style>