<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"></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"></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"></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"></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"></image>
					<image src="../../static/not-dealer.png" v-else mode="aspectFill" style="width: 300rpx;height: 200rpx" @click="chooseImage(5)"></image>
				</u-form-item>
			</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 '@/websoft/api/upload.js'
	import {
		pageOrder,
		removeOrder,
		receiptOrder,
		getOrder
	} from '@/websoft/api/order.js'
	import { fileUrl } from '@/config.js';
	
	export default {
		data() {
			return {
				order: {},
				orderSourceData: [],
				// 按钮禁用
				disabled: false,
				submitText: '证件已上传并确认收货',
			}
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			const app = this
			app.orderId = options.orderId
		},
		onShow() {
			this.getData()	
		},

		methods: {
			// 加载订单
			getData(){
				const app = this
				const { orderId } = this
				getOrder(orderId).then(res => {
					console.log("res: ",res);
					app.order = res.data
					if(res.data.orderSourceData.length > 0){
						app.orderSourceData = JSON.parse(res.data.orderSourceData)
					}
				})
			},
			// 重置
			resetting(){
				const app = this
				const { orderId } = app
				receiptOrder({
					orderId,
					orderSourceData: ''
				}).then(result => {
					app.$success("重置成功")
					app.orderSourceData = []
					// 刷新订单列表
					app.getData()
				})
			},
			// 表单提交
			handleSubmit() {
				const app = this
				this.$navTo('pages/order/index')
			},
			
			// 上传图片
			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 => {
							console.log("res: ", res);
							app.orderSourceData.push(fileUrl + res.data.path)
							receiptOrder({
								orderId,
								orderSourceData: JSON.stringify(app.orderSourceData)
							}).then(result => {
								app.$success("上传成功")
								// 刷新订单列表
								app.getData()
							})
						})
						
					}
				});
			},

			
		}
	}
</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;
	}
</style>
