<template>
	<view class="container">
		<view class="page">
			<text class="num actived pass">1</text>
			<text class="line line_pass"></text>
			<text class="num actived pass">2</text>
			<text class="line line_pass"></text>
			<text class="num actived">3</text>
			<text class="line"></text>
			<text class="num">4</text>
			<text class="line"></text>
			<text class="num">5</text>
			<text class="line"></text>
			<text class="num">6</text>
			<text class="line"></text>
			<text class="num">7</text>
			<text class="line"></text>
			<text class="num">8</text>
		</view>
		<view class="wrapper">
			<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>
			        <image :src="applyParam.idFrontPageOssPath" mode="widthFix" v-if="applyParam.idFrontPageOssPath"
					 @click="upLoadPhoto('front')"></image>
			         <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>
					<image :src="applyParam.idBackPageOssPath" mode="widthFix" v-if="applyParam.idBackPageOssPath"
					 @click="upLoadPhoto('front')"></image>
			         <view class="tips">
			           <view>（正确示例：身份证反面，字体清晰）</view>
			           <view>（jpg,png 文件大小不大于1mb）</view>
			         </view>
			     </view>
			</view>
		</view>
		<view class="fixed" @click="saveInfo()">
		   {{(this.applyParam.approvalStatus== 0 || this.applyParam.approvalStatus == 2)?'保存并下一步':'下一步'}}
		</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(options){
			if(uni.getStorageSync('applyId')){
				this.queryById(uni.getStorageSync('applyId'),null)
			}else if(options.shareId){
				this.queryById(options.shareId,null)
			}else{
				this.queryById(null,uni.getStorageSync('cffp_userId'))
			}
		},
		methods:{
			queryById(id,userId){
				api.queryById({id:id,userId:userId}).then((res)=>{
					console.log(res)
					if(res['success']){
						this.applyParam = res['data']['data'];
					}
				})
			},
			upLoadPhoto(type){
				if(this.applyParam.approvalStatus== 0 || this.applyParam.approvalStatus == 2){
					if(type == 'front'){
						this.dataForm.targetNo = 2;
					}
					if(type == 'back'){
						this.dataForm.targetNo = 3;
					}
					CommonUpload(this.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.approvalStatus== 0 || this.applyParam.approvalStatus == 2){
					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'),
					}
					api.saveApplyInfo(this.applyParam).then((res)=>{
						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;
						}
					})
				}else{
					uni.navigateTo({
						// url:`id-card?id=${res['data']['id']}`
						url:`education`
					});
				}
			}
		}
	}
</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%;
	        }
	    }
	}
	
</style>