<template>
	<view class="container" :style="appThemeStyle">
		<view class="reject" v-if="form.apply_status == 10">
			<u-alert-tips type="error" title="申请已提交:" description="请耐心等待工作人员的审核"></u-alert-tips>
		</view>
		<view class="reject" v-else-if="form.apply_status == 30">
			<u-alert-tips type="error" title="您的申请已被驳回:" :description="form.reject_reason"></u-alert-tips>
		</view>
		<u-form :model="form" ref="uForm" label-width="140rpx">
			<!-- 标题 -->
			<view class="page-title">身份证信息</view>
			<view class="form-wrapper">
				<u-form-item label="正面" prop="img1">
					<image :src="orderSourceData[0]" v-if="orderSourceData[0]" mode="aspectFill" style="width: 300rpx;height: 200rpx" @click="chooseImage(1)"></image>
					<image src="../../static/not-dealer.png" v-else mode="aspectFill" style="width: 300rpx;height: 200rpx" @click="chooseImage(1)"></image>
				</u-form-item>
				<u-form-item label="反面" prop="img2">
					<image :src="orderSourceData[1]" v-if="orderSourceData[1]" mode="aspectFill" style="width: 300rpx;height: 200rpx" @click="chooseImage(2)"></image>
					<image src="../../static/not-dealer.png" v-else mode="aspectFill" style="width: 300rpx;height: 200rpx" @click="chooseImage(2)"></image>
				</u-form-item>
			</view>
			<!-- 标题 -->
			<view class="page-title">其他</view>
			<!-- 表单组件 -->
			<view class="form-wrapper">
				<u-form-item label="人车合照" prop="img3">
					<image :src="orderSourceData[2]" v-if="orderSourceData[2]" mode="aspectFill" style="width: 300rpx;height: 200rpx" @click="chooseImage(3)"></image>
					<image src="../../static/not-dealer.png" v-else mode="aspectFill" style="width: 300rpx;height: 200rpx" @click="chooseImage(3)"></image>
				</u-form-item>
				<u-form-item label="车子照片" prop="img4">
					<image :src="orderSourceData[3]" v-if="orderSourceData[3]" mode="aspectFill" style="width: 300rpx;height: 200rpx" @click="chooseImage(4)"></image>
					<image src="../../static/not-dealer.png" v-else mode="aspectFill" style="width: 300rpx;height: 200rpx" @click="chooseImage(4)"></image>
				</u-form-item>
				<u-form-item label="安装照片" prop="img5">
					<image :src="orderSourceData[4]" v-if="orderSourceData[4]" mode="aspectFill" style="width: 300rpx;height: 200rpx" @click="chooseImage(5)"></image>
					<image src="../../static/not-dealer.png" v-else mode="aspectFill" style="width: 300rpx;height: 200rpx" @click="chooseImage(5)"></image>
				</u-form-item>
			</view>
			
			<view class="form-wrapper">
				<u-input type="number" v-model="receiptPhone" placeholder="请输入收货人手机号" />
				<view class="captcha-item">
					<u-input type="text" placeholder="请输入验证码" v-model="captcha" placeholder-class="captcha_input" />
					<u-button class="yanzhengma" @click="getCaptcha">{{time}} {{text}}</u-button>
				</view>
				
				<u-input type="text" v-model="emergentUser" placeholder="请输入紧急联系人" />
				<u-input type="text" v-model="officeAddress" placeholder="请输入单位地址" />
				<u-input type="text" v-model="homeAddress" placeholder="请输入家庭地址" />
			</view>
		</u-form>
		<view class="btn">
			<u-button type="primary" shape="circle" @click="handleSubmit()">
				{{ submitText }}
			</u-button>
		</view>
		<!-- <view class="btn">
			<u-button shape="circle" @click="resetting">
				重置
			</u-button>
		</view> -->
		<view class="btn"></view>
	</view>
</template>

<script>
	import {
		uploadFile
	} from '@/api/upload'
	import {
		http
	} from '@/websoft/api/index.js'
	import {
		pageOrder,
		removeOrder,
		receiptOrder,
		getOrder
	} from '@/websoft/api/order.js'
	import { sendSmsCaptcha } from '@/websoft/api/captcha.js'
	import { fileUrl } from '@/config.js'
	import { isMobile } from '@/utils/verify'
	
	
	// 表单验证规则
	const rules = {
	  receiptPhone: [{
		required: true,
		message: '请输入手机号',
		trigger: ['blur', 'change']
	  }, {
		// 自定义验证函数
		validator: (rule, value, callback) => {
		  // 返回true表示校验通过，返回false表示不通过
		  return isMobile(value)
		},
		message: '手机号码不正确',
		// 触发器可以同时用blur和change
		trigger: ['blur'],
	  }],
	  captcha: [{
		required: true,
		message: '请输入验证码',
		trigger: ['blur', 'change']
	  }],
	  emergentUser: [{
		required: true,
		message: '请输入紧急联系人',
		trigger: ['blur', 'change']
	  }],
	  officeAddress: [{
		required: true,
		message: '请输入单位地址',
		trigger: ['blur', 'change']
	  }],
	  homeAddress: [{
		required: true,
		message: '请输入家庭地址',
		trigger: ['blur', 'change']
	  }],
	}
	
	export default {
		data() {
			return {
				form: {},
				order: {},
				orderSourceData: [],
				// 验证码（主要代码，直接复制使用即可）
				time: '',
				text: '获取验证码',
				receiptPhone: '',
				captcha: '',
				emergentUser: '',
				officeAddress: '',
				homeAddress: '',
				// 按钮禁用
				// disabled: false,
				submitText: '证件已上传并确认收货',
			}
		},

		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules)
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			const app = this
			app.orderId = options.orderId
		},
		onShow() {
			this.getData()	
		},

		methods: {
			// 加载订单
			getData() {
				const app = this
				const { orderId } = this
				getOrder(orderId).then(res => {
					app.order = res.data
					if(res.data.orderSourceData.length > 0){
						app.orderSourceData = JSON.parse(res.data.orderSourceData)
					}
				})
			},
			//获取验证码（主要代码，直接复制使用即可）
			getCaptcha() {
				if(this.disabled){
					uni.showToast({
						title: '请耐心等待',
						icon: 'none'
					})
					return
				}
				var that = this;
				
				if (!that.receiptPhone) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
					return
				}
				
				sendSmsCaptcha({
					phone: that.receiptPhone,
					type: 'RECEIPT'
				}).then(function (result) {
					if(result){
						if(result.code == 0) {
							that.$success("发送短信验证码成功")
							that.disabled = true
							that.setInterValFunc()
						} else {
							that.$toast(result.message)
						}
					}
				}).catch(err => {
					console.log('err: ',err);
					that.$toast(err.message)
				})
			},
			
			setInterValFunc() {
				this.time = 60;
				this.text = '秒';
				this.setTime = setInterval(() => {
					if (this.time - 1 == 0) {
						this.time = '';
						this.text = '重新获取';
						this.code = '';
						this.disabled = false;
						clearInterval(this.setTime);
					} else {
						this.disabled = true;
						this.time--;
					}
				}, 1000);
			},
					
			// 重置
			/* resetting(){
				const app = this
				const { orderId } = app
				receipt({
					orderId: orderId,
					orderSourceData: '',
				}).then(result => {
					app.$success("重置成功")
					app.orderSourceData = []
					receiptPhone = ''
					captcha = ''
					emergentUser = ''
					officeAddress = ''
					homeAddress = ''
					time = ''
					text = '获取验证码'
					app.getData()
				})
			}, */
			// 表单提交
			handleSubmit() {
				// if(orderSourceData.length < 5) {
				// 	return
				// }
				const that = this
				const app = this
				const { orderId,orderSourceData,captcha,receiptPhone,emergentUser,officeAddress, homeAddress } = app
				
				
				receiptOrder({
					orderId: orderId,
					orderSourceData: JSON.stringify(orderSourceData),
					captcha: captcha,
					receiptPhone: receiptPhone,
					emergentUser: emergentUser,
					officeAddress: officeAddress,
					homeAddress: homeAddress
				}).then(result => {
					if(result.code == 0) {
						that.$success("确认收货成功！")
						// uni.navigateBack()
						setTimeout(()=>{
							that.$navTo('pages/order/index',{}, 'redirectTo')
						}, 1000)
					} else {
						that.$toast(result.message)
					}
				}).catch(err => {
					that.$toast(err.message)
				})
			},
			
			// 上传图片
			chooseImage(id) {
				const app = this
				const { orderId } = this
				const type = 'photo' + id
				// 选择图片
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					success(chooseImageRes) {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						
						uploadFile({
							filePath: tempFilePaths[0],
							fileType: 'image',
							name: 'file'
						}).then(res => {
							// app.orderSourceData.push(res.data.url)
							if(app.orderSourceData[id-1]){
								app.orderSourceData.splice(id-1, 1, res.data.url)
							} else {
								app.orderSourceData.push(res.data.url)
							}
							
						})
						
					}
				});
			},

			
		}
	}
</script>

<style>
	page {
		background: #f7f8fa;
	}
</style>
<style lang="scss" scoped>
	.page-title {
		width: 94%;
		margin: 0 auto;
		padding-top: 40rpx;
		font-size: 28rpx;
		color: rgba(69, 90, 100, 0.6);
	}

	.form-wrapper {
		margin: 20rpx auto 20rpx auto;
		padding: 0 40rpx;
		width: 94%;
		box-shadow: 0 1rpx 5rpx 0px rgba(0, 0, 0, 0.05);
		border-radius: 16rpx;
		background: #fff;
	}

	/* 底部操作栏 */

	.footer {
		margin-top: 80rpx;

		.btn-wrapper {
			height: 100%;
			// display: flex;
			// align-items: center;
			padding: 0 20rpx;
		}

		.btn-item {
			flex: 1;
			font-size: 28rpx;
			height: 86rpx;
			color: #fff;
			border-radius: 50rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.btn-item-wechat {
			background: #0ba90b;
			margin-bottom: 26rpx;
		}

		.btn-item-main {
			background: linear-gradient(to right, $main-bg, $main-bg2);

			// 禁用按钮
			/* &.disabled {
				opacity: 0.6;
			} */
		}

	}

	// 上传凭证
	.row-voucher {
		padding: 24rpx 20rpx;

		.image-list {
			padding: 0 20rpx;
			margin-top: 20rpx;
			margin-bottom: -20rpx;

			&:after {
				clear: both;
				content: " ";
				display: table;
			}

			.image {
				display: block;
				width: 100%;
				height: 100%;
			}

			.image-picker,
			.image-preview {
				width: 184rpx;
				height: 184rpx;
				margin-right: 30rpx;
				margin-bottom: 30rpx;
				float: left;

				&:nth-child(3n+0) {
					margin-right: 0;
				}
			}

			.image-picker {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				border: 1rpx dashed #ccc;
				color: #ccc;

				.choose-icon {
					font-size: 48rpx;
					margin-bottom: 6rpx;
				}

				.choose-text {
					font-size: 24rpx;
				}
			}

			.image-preview {
				position: relative;

				.image-delete {
					position: absolute;
					top: -15rpx;
					right: -15rpx;
					height: 42rpx;
					width: 42rpx;
					background: rgba(0, 0, 0, 0.64);
					border-radius: 50%;
					color: #fff;
					font-weight: bolder;
					font-size: 22rpx;
					z-index: 10;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}
	}

	.form-license {
		padding: 20rpx;
	}

	.pops-content {
		padding: 20rpx;
	}

	.sfz,
	.sfz1,
	.sfz2,
	.yyzz {
		width: 140rpx;
		padding-top: 20rpx;
		padding-right: 10rpx;
	}

	.btn {
		width: 700rpx;
		margin: 20rpx auto;
		height: 100rpx;
	}

	.reject {
		width: 700rpx;
		margin: 20rpx auto;
	}
	
	.captcha_input {
		font-size: 28rpx;
		font-weight: 400;
		color: #CACACA;
	}
	
	.yanzhengma {
		position: absolute;
		right: 0;
		top: -8rpx;
		bottom: 0;
		width: 140rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		background: #00BD87;
		border-radius: 30rpx;
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}
	
	.captcha-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10rpx;
		border-bottom: 3rpx solid #DDDDDD;
		margin-bottom: 25rpx;
		position: relative;
	}

	
</style>
