<template>
	<view class="page-content">
		<Settle :index="2">
			<view class="tip-text">
				<image class="tip-image" mode="widthFix" src="../../static/settle/anquan@3x.png"></image>
				<text>身份证照片、电工证照片、行驶证/驾驶证照片及车辆照片仅用于申请入驻。</text>
			</view>

			<template v-slot:bottom>
				<view class="btn-wrap flex-xc">
					<button class="btn-submit" :disabled="!submitBtnStatus" @click="$u.debounce(submitFileInfo, 500)">
						{{
				                    !submitBtnStatus ? "完成必填项，可提交资料" : "提交"
				                }}
					</button>
				</view>
			</template>



			<view class="base-list">
				<template v-for="(fileItem, index) in formShowList">
					<view class="item item-select flex flex-yc" :key="index" @click="toUploadImg(fileItem, index)">
						<view class="label txt">{{ fileItem.label }}</view>
						<p class="flex1 u-text-right txt" v-show="fileInfo[fileItem.filedName] !== ''">
							{{
	                                    imgObj[fileItem.filedName] && imgObj[fileItem.filedName].length + "张"
	                                }}
						</p>
						<u-icon name="arrow-right" color="#999" size="28"></u-icon>
					</view>
					<view class="tips" :key="index + 't'">
						{{ fileItem.tips }}
					</view>
					<view class="tips id-identity-box" :key="index + 'identity'"
						v-if="fileItem.filedName === 'id_card_front'">
						<view class="txt">请核实识别结果</view>
						<view class="txt">
							身份证姓名：{{ fileInfo.id_card_name}}<span class="red" v-show="
	                                        !fileInfo.id_card_name &&
	                                        fileInfo.id_card_front
	                                    ">识别失败，请重新上传</span>
						</view>
						<view class="txt">
							身份证号码：{{ fileInfo.id_card_number
	                                }}<span class="red" v-show="
	                                        !fileInfo.id_card_name &&
	                                        fileInfo.id_card_front
	                                    ">识别失败，请重新上传</span>
						</view>
					</view>
				</template>
			</view>
			<!-- 		<view class="seat"></view>
		<view class="btn-wrap fixed flex flex-xc">
			<button class="btn-submit" :disabled="!submitBtnStatus" @click="$u.debounce(submitFileInfo, 500)">
				{{
	                            !submitBtnStatus ? "完成必填项，可提交资料" : "提交"
	                        }}
			</button>
		</view> -->
		</Settle>
	</view>
</template>

<script>
	import Settle from '@/components/settle/index.vue'
	export default {
		components: {
			Settle
		},
		data() {
			return {
				fileInfo: {
					id: "",
					id_card_name: "",
					id_card_number: "",
					id_card_front: "",
					id_card_back: "",
					electrician_certificate: "",
					vehicle_photos: "",
					other_certificates: "",
					id_card_back_check: false,
				},
				imgObj: {
					id_card_front: [],
					id_card_back: [],
					electrician_certificate: [],
					vehicle_photos: [],
					other_certificates: []
				},
				formShowList: [{
						filedName: "id_card_front",
						required: true,
						maxImgs: 1,
						label: "身份证人像面",
						tips: "（必选项）拍身份证人像面，证件需清晰可见",
						imgs: [],
					},
					{
						filedName: "id_card_back",
						required: true,
						label: "身份证国徽面",
						maxImgs: 1,
						tips: "（必选项）拍身份证国徽面，证件需清晰可见",
						imgs: [],
					},
					{
						filedName: "electrician_certificate",
						label: "电工证照",
						required: true,
						maxImgs: 1,
						tips: "（必选项）拍电工证照，证件需清晰可见",
						imgs: [],
					},
					{
						filedName: "vehicle_photos",
						label: "车辆照",
						maxImgs: 1,
						tips: "（可选项）45度拍摄车辆照片，车牌清晰可见",
						imgs: [],
					},
					{
						filedName: "other_certificates",
						label: "其他工作证件",
						imgs: [],
						maxImgs: 999,
						tips: "（可选项）可拍多张",
					},
				],
				submitSuccess: false,
				saving: false,
			}
		},
		onLoad(e) {},
		updated() {
			this.updateImgs()
		},
		watch: {
			"fileInfo.id_card_front"() {
				if (this.fileInfo.id_card_front) {
					this.checkIdCard("front");
				} else {
					this.fileInfo.id_card_name = "";
					this.fileInfo.id_card_number = "";
				}
			},
			"fileInfo.id_card_back"() {
				if (this.fileInfo.id_card_front) {
					this.checkIdCard("back");
				} else {
					this.fileInfo.id_card_back_check = true;
				}
			},
		},
		computed: {
			submitBtnStatus() {
				// const baseInfo = this.baseInfo
				const fileInfo = this.fileInfo
				const flag = fileInfo.id_card_front && fileInfo.id_card_back && fileInfo.electrician_certificate
				return flag && !this.saving;
			},
		},
		components: {

		},
		methods: {
			updateImgs() {
				const uploadType = this.uploadType
				const uploadImgs = this.imgObj[uploadType]
				if (uploadImgs.length < 1) {
					return
				}
				if (uploadType === 'other_certificates') {
					const otherImgs = this.imgObj['other_certificates']
					let imgs = []
					otherImgs.map(item => {
						const img = item.key || item.src || ''
						imgs.push(img)
					})
					this.fileInfo[uploadType] = imgs.join(',')
					return
				}
				this.fileInfo[uploadType] = uploadImgs[0].key || uploadImgs[0].src || ''
			},
			toUploadImg(item, index) {
				this.uploadType = item.filedName
				uni.navigateTo({
					url: '/pages/settle/file-upload?uploadType=' + item.filedName
				})
				// this.fileUploadIndex = index;
			},
			gopage(url) {
				uni.navigateTo({
					url,
				});
			},
			async checkIdCard(type) {
				uni.showLoading({
					title: '加载中'
				})
				let request = {
					front: this.$u.api.checkSettleIDCardFront,
					back: this.$u.api.checkSettleIDCardBack,
				};
				let url = {
					front: this.fileInfo.id_card_front,
					back: this.fileInfo.id_card_back,
				};

				const params = {
					["id_card_" + type]: url[type],
					id: this.fileInfo.id || 0,
				}

				const res = await request[type](params);
				if (res.code !== 200) {
					if (type === "front") {
						this.fileInfo.id_card_name = "";
						this.fileInfo.id_card_number = "";
					} else {
						this.fileInfo.id_card_back_check = false;
					}
					return
				}
				uni.hideLoading()
				if (type === "front") {
					this.fileInfo.id_card_name =
						res.data.id_card_name || "";
					this.fileInfo.id_card_number =
						res.data.id_card_number || "";
				} else {
					this.fileInfo.id_card_back_check = true;
				}
			},
			checkFileInfo() {
				let formFlag = true;
				const fileInfo = this.fileInfo;

				let checkFunc = function(item) {
					const value = fileInfo[item.filedName];
					const tips = "请上传您的" + item.label;
					if (!value) {
						uni.showToast({
							title: tips,
							icon: 'none'
						})
						return false;
					}
					return true;
				};
				const flagArr = this.formShowList.some((item) => {
					// 返回验证失败的数组
					let flag = true;
					if (item.required) {
						flag = checkFunc(item);
					}
					return !flag;
				});
				formFlag = !flagArr || flagArr.length > 1;
				if (formFlag) {
					if (!fileInfo.id_card_name) {
						uni.showToast({
							title: '身份证识别不通过，请重新上传',
							icon: 'none'
						})
						formFlag = false;
						return formFlag;
					}
					if (!fileInfo.id_card_back_check) {
						uni.showToast({
							title: '身份证国徽面识别不通过，请重新上传',
							icon: 'none'
						})
						formFlag = false;
					}
				}

				return formFlag;
			},
			async submitFileInfo() {
				if (!this.checkFileInfo()) {
					return;
				}
				const fileInfo = this.fileInfo;
				let submitInfoData = {
					...fileInfo,
					recommender: getApp().globalData.settleRecommend
				}
				uni.showLoading({
					title: '加载中……'
				})
				const res = await this.$u.api.submitSettleFileInfo(submitInfoData)
				uni.hideLoading()
				if (res.code !== 200) {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
					return
				}
				uni.showToast({
					title: '资料提交成功',
				})
				let timer = setTimeout(() => {
					clearTimeout(timer)
					uni.navigateTo({
						url: '/pages/settle/prompt'
					})
				}, 2000)

				this.submitSuccess = true;
				//             this.$u.api.post("@u/v1/h5/settled/submit-info", submitInfoData)
				//                 .then((res) => {
				//                     uni.hideLoading()

				//                     if (res.status != 200) {
				//                         return;
				//                     }
				//                     if (res.data) {
				// 						uni.showToast({
				// 							title:'工作人员2个工作日内审核回复',
				// 							icon:'none'
				// 						})
				//                         this.submitSuccess = true;
				//                     }
				//                 })
				//                 .catch(() => {
				//                     //Indicator.close();
				//                 });
			},
		},
	}
</script>

<style lang="scss" scoped>
	.page-content {
		background-color: #F4F5F7;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.base-list {
		.item {
			display: flex;
			margin-bottom: 58rpx;
			padding: 28rpx 30rpx;
			width: 100%;
			height: 100rpx;
			font-size: 32rpx;
			background-color: #fff;

			.label {
				color: #333;
				font-size: 32rpx;
			}

			.txt {
				line-height: 44rpx;
				color: #333;
				font-size: 32rpx;
			}

			.required {
				margin: 0 6rpx;
				color: red;
				font-size: 32rpx;
			}

			.iconfont {
				color: #999;
			}
		}

		.tips {
			margin-top: 20rpx;
			padding: 0 30rpx;
			line-height: 40rpx;
			font-size: 28rpx;
			color: #666;

			&+.id-identity-box {
				margin-top: -38rpx;
				margin-bottom: 40rpx;
			}
		}

		.id-identity-box {
			.txt {
				padding-top: 8rpx;
				line-height: 40rpx;
				font-size: 28rpx;
				color: #666;

				&:first-child {
					margin-top: -58rpx;
					padding-top: 12rpx;
				}

				.red {
					color: red;
				}
			}

			// &.tips{
			//     margin-bottom:0!important;
			// }

		}

		.item+.tips {
			margin-top: -38rpx;
			margin-bottom: 58rpx;
		}

		/*选择内容*/
		.item-select {
			font-size: 30rpx;
			color: #333;
			font-weight: 500;
			justify-content: space-between;
			border-bottom: 1rpx solid #f5f5f5;
		}

		.flex1 {
			flex: 1 !important;

			&.txt {
				white-space: nowrap;
				// max-width: 450rpx;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}

		.item-input {
			overflow: hidden;

			input {
				text-align: right;
				line-height: 44rpx;
				width: 100%;
				font-size: 30rpx;
				color: #333;
				font-weight: 400;
			}

			.input-readonly {
				font-size: 30rpx;
				color: #999;
				font-weight: 400;
			}

			input::-webkit-input-placeholder {
				font-size: 30rpx;
				color: #999;
				font-weight: 400;
			}

			input:-moz-placeholder {
				font-size: 30rpx;
				color: #999;
				font-weight: 400;
			}

			input:-ms-input-placeholder {
				font-size: 30rpx;
				color: #999;
				font-weight: 400;
			}
		}
	}

	.tip-text {
		background-color: #FFFFFF;
		border-radius: 12rpx;
		padding: 38rpx 30rpx 30rpx 30rpx;
		height: 140rpx;
		margin-bottom: 20rpx;
		font-size: 24rpx;
		color: #000000;
		display: flex;
		align-items: flex-start;
	}

	.tip-image {
		width: 34rpx;
		margin-right: 8rpx;
		margin-top: 2rpx;
	}

	.seat {
		padding-bottom: 144rpx;
	}

	/*提交按钮*/
	.btn-wrap {
		width: 100%;

		.btn-submit {
			width: 600rpx;
			height: 104rpx;
			line-height: 104rpx;
			border-radius: 52rpx;
			background: #2272FF;
			font-size: 32rpx;
			color: #fff;

			&[disabled] {
				background-color: #D1D4D4;
				color: #FFFFFF;
			}
		}
	}

	/* 	.back_view{
		background-color: #FFFFFF;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		display: flex;
		flex-direction: column;
	}
	 */
</style>
