<template>
	<view>
		<view class="block">
			<view class="content">
				<view class="orderinfo">
					<view class="nominal">订单信息:</view>
					<view class="order-info" v-for="row in rdata.shop_db" v-bind:key="rdata.id">
						<view class="left">
							<image :src="row.picurl"></image>
						</view>
						<view class="right">
							<view class="name">
								{{row.full_title}}
							</view>
							<!-- <view class="spec">{{row.spec}}</view> -->
							<view class="price-number">
								￥<view class="price">{{row._price}}</view>
								x<view class="number">{{row._num}}</view>
							</view>
						</view>

					</view>
					<view class="row">
						<view class="nominal">订单金额:</view>
						<view class="text">{{rdata.totalmoney}}元</view>
					</view>
				</view>
				<view class="row">
					<view class="nominal">汇款信息:</view>
					<view class="nominal">请通过电汇的方式支付货款，将汇款凭证拍照上传</view>
					<view class="text">
						账户名称: 中国建材检验认证集团股份有限公司
					</view>
					<view class="text">
						开户行: 工商银行北京管庄支行
					</view>
					<view class="text">
						账号:0200006809014437256
					</view>
				</view>
			</view>
		</view>
		<view class="block">
			<view class="title">
				汇款图片
			</view>
			<view>
				<uni-file-picker v-model="imageValue" file-mediatype="image" mode="grid" file-extname="png,jpg"
					:limit="5" ref="files" :auto-upload="false" @select="select" />
			</view>
		</view>
		<view class="pay">
			<view class="btn" @tap="upImg()">提交</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				amount: 0,
				orderName: '',
				paytype: 'alipay', //支付类型
				imageValue: [],
				rdata: {},
				count: 1,
				name: 'file',
				url: '',
				filepath: [],
				rpath:[]
			};
		},
		onLoad(e) {
			// this.amount = parseFloat(e.amount).toFixed(2);

			uni.getStorage({
				key: 'paymentOrder',
				success: (e) => {
					// if(e.data.shop_db.length>1){
					// 	this.orderName = '多商品合并支付'
					// }else{
					// 	this.orderName = e.data.shop_db[0].title;
					// }
					this.rdata = e.data
					this.url = this.vuex_host +
						'index.php/index/attachment/upload?dir=images&from=base64&module=index'
				}
			})
		},
		methods: {
			doDeposit() {
				//模板模拟支付，实际应用请调起微信/支付宝
				uni.showLoading({
					title: '支付中...'
				});
				setTimeout(() => {
					uni.hideLoading();
					uni.showToast({
						title: '支付成功'
					});
					setTimeout(() => {
						uni.redirectTo({
							url: '../../pay/success/success?amount=' + this.amount
						});
					}, 300);
				}, 700)
			},
			select(e) {
				this.filepath = e.tempFilePaths
			},
			async upImg() {
				var that = this
				if (that.filepath.length>0) {
					uni.showLoading({
						title: '上传中'
					})
					
					for(var i=0;i<that.filepath.length;i++){
						let base64 = 'data:image/jpeg;base64,' + uni.getFileSystemManager().readFileSync(that.filepath[i],
							'base64')
						let res;
						try{
						res = await that.$u.api.upFile({imgBase64:base64})
						}
						catch(e){
							if(e.data.code==1){
								that.rpath.push(e.data.path)
							}
						}
						
						
					}
					try{
						let payload = {
							id: that.rdata.id,
							voucher_url: that.rpath.join(',')
						}
						let res = await that.$u.api.tjfk(payload)
						uni.hideLoading()
						uni.showToast({
							title:'提交成功'
						})
						uni.navigateBack()
					}catch(e){
						uni.hideLoading()
						uni.showToast({
							title:'提交失败',
							icon:'none'
						})
					}
					// that.$u.api.upFile({
					// 	imgBase64: base64
					// }).then(res => {

					// }).catch(e => {
					// 	let data = e.data
					// 	if (data.code == 1) {
					// 		let payload = {
					// 			id: that.rdata.id,
					// 			voucher_url: data.path
					// 		}
					// 		console.log(payload)
					// 		that.$u.api.tjfk(payload).then(res => {
					// 			uni.hideLoading()
					// 			uni.showToast({
					// 				title: '提交成功'
					// 			})
					// 			uni.navigateBack({

					// 			})
					// 		})
					// 	}
					// })

					// uni.uploadFile({
					//             url: this.url, //仅为示例，非真实的接口地址
					//             filePath: this.filepath,
					//             name: 'imgBase64',
					//             formData: {
					//                 'token': this.vuex_token
					//             },
					// 			header:{ 
					// 			   "Content-Type": "multipart/form-data"
					// 			},
					//             success: (e) => {
					// 				uni.hideLoading()
					// 				let data = JSON.parse(e.data)
					//             },
					// 			fail() {
					// 				uni.hideLoading()
					// 			}
					//         });
				}
			},
		}
	}
</script>

<style lang="scss">
	.block {
		width: 94%;
		padding: 0 3% 40upx 3%;

		.title {
			width: 100%;
			font-size: 34upx;
		}

		.content {
			.nominal {
				color: gray;
			}

			.orderinfo {
				width: 100%;
				border-bottom: solid 1upx #eee;

				.order-info {
					width: 100%;
					display: flex;
					margin-top: 4upx;

					.left {
						flex-shrink: 0;
						width: 25vw;
						height: 20vw;

						image {
							width: 25vw;
							height: 20vw;
							border-radius: 10upx;
						}
					}

					.right {
						width: 100%;
						margin-left: 10upx;
						position: relative;

						.name {
							width: 100%;
							font-size: 28upx;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							overflow: hidden;
						}

						.spec {
							color: #a7a7a7;
							font-size: 22upx;

						}

						.price-number {
							position: absolute;
							bottom: 0;
							width: 100%;
							display: flex;
							justify-content: flex-end;
							font-size: 22upx;
							color: #333;
							display: flex;
							align-items: flex-end;

							.price {
								font-size: 24upx;
								margin-right: 5upx;
							}

						}
					}
				}
			}

			.pay-list {
				width: 100%;
				border-bottom: solid 1upx #eee;

				.row {
					width: 100%;
					height: 120upx;
					display: flex;
					align-items: center;

					.left {
						width: 100upx;
						flex-shrink: 0;
						display: flex;
						align-items: center;

						image {
							width: 80upx;
							height: 80upx;
						}
					}

					.center {
						width: 100%;
						font-size: 30upx;
					}

					.right {
						width: 100upx;
						flex-shrink: 0;
						display: flex;
						justify-content: flex-end;
					}
				}
			}
		}
	}

	.pay {
		margin-top: 20upx;
		width: 100%;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;

		.btn {
			width: 70%;
			height: 80upx;
			border-radius: 80upx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
			background-color: #f06c7a;
			box-shadow: 0upx 5upx 10upx rgba(0, 0, 0, 0.2);
		}

		.tis {
			margin-top: 10upx;
			width: 100%;
			font-size: 24upx;
			display: flex;
			justify-content: center;
			align-items: baseline;
			color: #999;

			.terms {
				color: #5a9ef7;
			}
		}
	}
</style>
