<template>
	<view class="container">
		<!-- #ifdef APP -->
		<view class="top">
			<text class="iconfont icon-youjiantou zuojiantou" @click="goBack()"></text>
			<text>申请加盟</text>
		</view>
		<!-- #endif -->
		
		<view class="page">
			<text class="num actived pass">1</text>
			<text class="line line_pass"></text>
			<text class="num actived">2</text>
			<text class="line"></text>
			<text class="num">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>
		</view>
		<view class="wrapper">
			<view class="title">
				<view>
					<text class="line"></text>个人证件资料
				</view>
				<text class="page_mark">2/7</text>
			</view>
			<view class="content" style="padding-bottom: 150rpx;">
				<view class="content_wrapper">
					<view class="photo" v-if="!cardForm.idFrontPageOssPath" @click="upLoadPhoto('front')">
						<image v-if="cardForm.idType == '身份证'" src="../../static/front.png" alt="身份证正面" mode="widthFix"></image>
						<text class="iconfont icon-weibiaoti553"></text>
						<view v-if="cardForm.idType == '身份证'" class="choseBtn">点击添加{{cardForm.idType}}正面</view>
						<view v-else class="choseBtn">点击添加({{cardForm.idType}})图1</view>
					</view>
					<!-- <view class="content_w" v-if="cardForm.idFrontPageOssPath"> -->
						<image class="picImg" v-if="cardForm.idFrontPageOssPath" :src="cardForm.idFrontPageOssPath" @click="upLoadPhoto('front')" mode="widthFix"></image>
					<!-- </view> -->
					<view class="tips">
						<view v-if="cardForm.idType == '身份证'">（正确示例：{{cardForm.idType}}正面，字体清晰）</view>
						<view v-else >（正确示例：{{cardForm.idType}}图1，字体清晰）</view>
						<view>（jpg,png 文件大小不大于1mb）</view>
					</view>
				</view>
				<view class="content_wrapper" style="margin-top: 25px;">
					<view class="photo" v-if="!cardForm.idBackPageOssPath" @click="upLoadPhoto('back')">
						<image v-if="cardForm.idType == '身份证'" src="../../static/back.png" alt="身份证反面" mode="widthFix"></image>
						<text class="iconfont icon-weibiaoti553"></text>
						<view v-if="cardForm.idType == '身份证'" class="choseBtn">点击添加{{cardForm.idType}}反面</view>
						<view v-else class="choseBtn">点击添加({{cardForm.idType}})图2</view>
					</view>
					<!-- <view class="content_w" v-if="cardForm.idBackPageOssPath"> -->
						<image class="picImg" v-if="cardForm.idBackPageOssPath" :src="cardForm.idBackPageOssPath" @click="upLoadPhoto('back')" mode="widthFix"></image>
					<!-- </view> -->
					<view class="tips">
						<view v-if="cardForm.idType == '身份证'">（正确示例：{{cardForm.idType}}反面，字体清晰）</view>
						<view v-else >（正确示例：{{cardForm.idType}}图2，字体清晰）</view>
						<view>（jpg,png 文件大小不大于1mb）</view>
					</view>
				</view>
			</view>
		</view>
		<view class="fixed" @click="saveInfo()">
			{{(this.cardForm.approvalStatus== 0 || this.cardForm.approvalStatus == 2)?'保存并下一步':'下一步'}}
		</view>
	</view>
</template>

<script>
	import {
		CommonUpload
	} from '@/util/uploaderFile';
	import api from '../../api/api';
	export default {
		data() {
			return {
				cardForm: {
					idFrontPageOssPath: '',
					idBackPageOssPath: '',
					approvalStatus: ''
				},
				applyParam: {},
				shareId: null,
				dataForm: {
					loginId: uni.getStorageSync('cffp_userId'),
					targetType: "5",
					targetId: '',
					// uni.getStorageSync('cffp_userId')
					targetNo: "",
					targetUseFor: "12",
					targetSeq: "0"
				},
			}
		},
		components: {},
		onLoad(options) {
			// this.shareId = options.shareId
			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'))
			}
		},
		onShow() {
			if(uni.getStorageSync('cardForm')){
				this.cardForm = uni.getStorageSync('cardForm')
			}
			// if(uni.getStorageSync('Refresh_query')){
			// 	this.queryById(null, uni.getStorageSync('cffp_userId'))
			// }
			uni.$on("ckqueryById", res => {
				if (res == true) {
					this.queryById(null, uni.getStorageSync('cffp_userId'))
				}
			});
		},
		onUnload() {
			// 移除监听事件  
			uni.$off('ckqueryById');
		},
		methods: {
			goBack() {
				uni.navigateBack({
					delta: 1  
				});
			},
			queryById(id, userId) {
				uni.showLoading({
					title: '加载中...'
				});
				api.queryById({
					id: id,
					userId: userId
				}).then((res) => {
					if (res['success']) {
						this.applyParam = res['data']['data'];
						if(uni.getStorageSync('cardForm')){
							this.cardForm = uni.getStorageSync('cardForm')
						}else {
							this.cardForm.idFrontPageOssPath = this.applyParam.idFrontPageOssPath
							this.cardForm.idBackPageOssPath = this.applyParam.idBackPageOssPath
						}
						this.cardForm.approvalStatus = this.applyParam.approvalStatus
						this.cardForm.id = this.applyParam.id
						this.cardForm.idType = this.applyParam.idType
						uni.setStorageSync('cardForm',this.cardForm)
					}
					
					uni.hideLoading()
				})
			},
			upLoadPhoto(type) {
				if (this.cardForm.approvalStatus == 0 || this.cardForm.approvalStatus == 2) {
					if (type == 'front') {
						this.dataForm.targetNo = 2;
					}
					if (type == 'back') {
						this.dataForm.targetNo = 3;
					}
					this.dataForm.targetId = this.cardForm.id
					CommonUpload(this.dataForm).then(res => {
						if (type == 'front') {
							this.cardForm.idFrontPageOssPath = res.data.filePath;
						}
						if (type == 'back') {
							this.cardForm.idBackPageOssPath = res.data.filePath;
						}
						uni.setStorageSync('cardForm',this.cardForm)
					})
				}
			},
			saveInfo() {
				uni.showLoading({
					title: '加载中...'
				});
				if (this.cardForm.approvalStatus == 0 || this.cardForm.approvalStatus == 2) {
					if (!this.cardForm.idFrontPageOssPath) {
						uni.showToast({
							title: `请上传${this.cardForm.idType}正面照片`,
							duration: 2000,
							icon: 'none'
						})
						return;
					}
					if (!this.cardForm.idBackPageOssPath) {
						uni.showToast({
							title:  `请上传${this.cardForm.idType}反面照片`,
							duration: 2000,
							icon: 'none'
						})
						return;
					}
					this.applyParam.idFrontPageOssPath = this.cardForm.idFrontPageOssPath
					this.applyParam.idBackPageOssPath = this.cardForm.idBackPageOssPath
					this.applyParam.approvalStatus = this.cardForm.approvalStatus
					this.applyParam = {
						...this.applyParam,
						operatStep: 3,
					}
					uni.setStorageSync('cardForm',this.cardForm)
					api.saveApplyInfo(this.applyParam).then((res) => {
						if (res['success']) {
							// this.queryById(null, uni.getStorageSync('cffp_userId'))
							// uni.navigateTo({
							// 	url: `education`
							// });	
							uni.navigateTo({
								// url:`bank-card?id=${res['data']['id']}`
								url: `bank-card`
							});
						} else {
							uni.showToast({
								title: res['message'],
								duration: 2000,
								icon: 'none'
							})
							return;
						}
						uni.hideLoading()
					})
				} else {
					uni.hideLoading()
					// uni.navigateTo({
					// 	url: `education`
					// });
					uni.navigateTo({
						url: `bank-card`
					});
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import 'applyCommon.scss';
	
	.content_wrapper {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		margin-top: 10px;
		overflow: auto;

		.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%;
			height: 400rpx;
			background-size: contain;
			background-repeat: no-repeat;
			position: relative;

			.icon-weibiaoti553 {
				position: absolute;
			}

			.choseBtn {
				position: absolute;
				font-size: 13px;
				bottom: 19%;
			}
		}
		.picImg {
			width: 60%!important;
		}
	}

	
</style>
