<template>
	<view>
		<view class="top">
			<image src="@/static/用户协议.png" mode="" style="width: 44rpx;height: 44rpx;"></image>
			<view class="topwz">订单信息</view>
		</view>
		<view class="boxdd">
			<view class="boxddrow"><text>发货地</text> <text class="rightwz1">{{formdata.deliver_address}}</text> </view>
			<view class="boxddrow"><text>收货地</text> <text class="rightwz1">{{formdata.receiving_address}}</text> </view>
			<view class="boxddrow"><text>载货量</text> <text class="rightwz1">{{formdata.loading_capacity}}</text> </view>
			<view class="boxddrow"><text>所需车型</text> <text class="rightwz">{{formdata.car_type}}</text> </view>
			<view class="boxddrow"><text>运输价格</text> <text class="rightwz">{{formdata.freight}}</text> </view>
			<view class="boxddrow"><text>装货时间</text> <text
					class="rightwz">{{formdata.loading_start_time}}至{{formdata.loading_end_time}}</text> </view>
			<view class="boxddrow"><text>联系方式</text> <text class="rightwz">{{formdata.mobile}}</text> </view>
			<view class="boxddrow"><text>运输时间</text> <text class="rightwzys">{{formdata.transport_time}}</text> </view>
		</view>
		<view class="top">
			<image src="@/static/车辆信息.png" mode="" style="width: 44rpx;height: 44rpx;"></image>
			<view class="topwz">车辆信息</view>
		</view>
		<view class="boxcl">
			<view class="boxddrow"><text>司机姓名</text> <text class="rightwz1cl">{{formdata.member_name}}</text> </view>
			<view class="boxddrow"><text>司机电话</text> <text class="rightwz1cl">{{formdata.member_mobile}}</text> </view>
			<view class="boxddrow"><text>车型</text> <text class="rightwz1">{{formdata.car_type}}</text> </view>
		</view>
		<view class="top">
			<image src="@/static/回执单.png" mode="" style="width: 44rpx;height: 44rpx;"></image>
			<view class="topwz">提交回执单</view>
		</view>
		<view class="hzd">
			<image :src="item" mode="" v-for="(item,index) in form.fileList" :key="index"
				style="width: 200rpx;height: 130rpx;margin-right: 30rpx;"></image>
		</view>
		<view class="subbox">
			<image src="@/static/shangchuan.png" mode=""
				style="width: 44rpx;height: 44rpx;margin-left: 50rpx;margin-top: 43rpx;" @click="uploadFile"></image>
			<button class="qxbtn" @click="cancelTask">取消订单</button>
			<button class="subbtn" @click="taskReceiptFile">提交回执单</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				huzstu: false,
				formdata: {},
				list: [],
				form: {
					file_ids: [],
					fileList: []
				}
			}
		},
		onShow() {
			console.log(1234);
			this.duringTask(1, 1)
		},
		methods: {
			taskReceiptFile() {
				if (this.huzstu) {
					let form = {
						task_id: this.formdata.id,
						file_ids: this.form.file_ids.join(',')
					}
					this.$api.taskReceiptFile(form).then(res => {
						if (res.code == 200) {
							uni.switchTab({
								url: "/pages/user/index"
							})
						}
					})
				}else{
					uni.showToast({
						icon: "none",
						title:'回执单未上传成功',
						duration: 3000
					});
				}

			},
			cancelTask() {
				this.$api.cancelTask({
					task_id: this.formdata.id
				}).then(res => {
					if (res.code == 200) {
						uni.switchTab({
							url: "/pages/user/index"
						})
					}
				})
			},
			duringTask() {
				this.$api.duringTask().then(res => {
					console.log(878, res);
					this.formdata = res.data
				})
			},
			uploadFile() {
				var that = this
				let totalCount = 0; // 总文件数
				let uploadedCount = 0; // 已上传文件数
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						totalCount = chooseImageRes.tempFilePaths.length;
						console.log('tempFilePaths', chooseImageRes);
						tempFilePaths.forEach(el => {
							uni.uploadFile({
								url: 'https://logistics.njrenzhou.cn/api/uploadFile', //接口地址
								filePath: el,
								name: 'file',
								formData: {
									'user': 'test'
								},
								success: (uploadFileRes) => {
									uploadedCount++;
									if (uploadedCount >= totalCount) {
										console.log('所有文件上传完成');
										this.huzstu=true
										// 这里执行全部上传完成后的操作
									}
									that.form.file_ids.push(JSON.parse(uploadFileRes.data)
										.data.id)
									that.form.fileList.push(JSON.parse(uploadFileRes.data)
										.data.url)
									console.log('this.form.file_ids', that.form.file_ids);
								}
							});
						})
					}
				});

			}
		}
	}
</script>

<style scoped>
	.subbox {
		display: flex;
		width: 750rpx;
		height: 130rpx;
		background: #FFFFFF;
	}

	.qxbtn {
		width: 280rpx;
		height: 90rpx;
		background: rgba(13, 93, 201, 0);
		border-radius: 45rpx;
		border: 1px solid #0D5DC9;
		margin-top: 20rpx;
		font-size: 30rpx;
		color: #0D5DC9;
		margin-left: 50rpx;
		line-height: 90rpx;
	}

	.subbtn {
		width: 280rpx;
		height: 90rpx;
		background: #0D5DC9;
		border-radius: 45rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		font-size: 30rpx;
		color: #FFFFFF;
		margin-left: 30rpx;
		margin-top: 20rpx;
		line-height: 90rpx;
	}

	.boxcl {
		background: #fff;
		margin: 0 auto;
		width: 702rpx;
	}

	.rightwz1cl {
		margin-left: 43rpx;
	}

	.rightwzys {
		display: inline-block;
		text-align: center;
		width: 110rpx;
		height: 56rpx;
		background: #F9F3EB;
		border-radius: 10rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		font-size: 24rpx;
		color: #FA9512;
		margin-left: 69rpx;
		line-height: 56rpx
	}

	.boxddrow {
		padding: 29rpx;
		border-bottom: 1px solid #EAEAEA;
	}

	.rightwz1 {
		margin-left: 105rpx;
	}

	.rightwz {
		margin-left: 69rpx;
	}

	.boxdd {
		margin: 0 auto;
		width: 702rpx;
		/* height: 619rpx; */
		background: #FFFFFF;
		border-radius: 20rpx;
		margin-top: 23rpx;
	}

	.topwz {
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		font-size: 34rpx;
		color: #222222;
	}

	.top {
		display: flex;
		padding: 17rpx;
	}
</style>