<template>
	<view class="container">
		<uni-list class="custom-uni-list">
			<uni-list-item :height="55" :title="$t('deposit.order.sum')"
				:rightText="'¥' + orderMarginInfo.totalAmount"></uni-list-item>
			<!-- <uni-list-item title="定金支付总额" :rightText="'¥' + orderMarginInfo.totalAmount"></uni-list-item> -->
			<uni-list-item :height="55" :title="$t('deposit.order.pay')"
				:rightText="'¥' + orderMarginInfo.payedMargin"></uni-list-item>
			<uni-list-item :height="55" :title="$t('deposit.order.money.leave')"
				:rightText="'¥' + orderMarginInfo.surplusMargin"></uni-list-item>
			<uni-list-item :height="55" :title="$t('deposit.order.money.rate')"
				:rightText="orderMarginInfo.marginRate + '%'"></uni-list-item>
			<uni-list-item :height="55" :title="$t('deposit.order.money.now.sum')">
				<template v-slot:footer>
					<input class="deposit-value" v-model="marginAmount" type="digit"
						:placeholder="$t('index.enter')+$t('deposit.order.money.now')" />
				</template>
			</uni-list-item>
			<uni-list-item :height="55" :title="$t('deposit.order.money.time')">
				<template v-slot:footer>
					<uni-datetime-picker v-model="datetimesingle" style="flex: auto">
						<view class="deposit-value">{{payTime}}</view>
					</uni-datetime-picker>
				</template>
			</uni-list-item>
		</uni-list>
		<view class="upload-box">
			<view class="upload-title">{{$t('deposit.order.file')}}</view>
			<view class="upload">
				<uni-file-picker limit="3" mode="grid" file-mediatype="image" @select="select" @progress="progress"
					@success="success">
				</uni-file-picker>
			</view>
		</view>

		<view class="btn-box">
			<button class="btn" @click="submit">{{$t('index.sure')}}</button>
		</view>
	</view>
</template>

<script>
	import {
		getOrderMarginInfo,
		uploadFile,
		PayDeposit
	} from '@/config/api.js'
	import {
		Moment
	} from '@/utils/moment.js'
	let orderId = null;
	export default {
		name: 'deposit',
		data() {
			return {
				fileIds: [],
				marginAmount: '',
				datetimesingle: '',
				orderMarginInfo: {}
			}
		},
		computed: {
			payTime() {
				return new Moment(this.datetimesingle).format('YYYY-MM-DD HH:mm:ss')
			}
		},
		methods: {
			getOrderMarginInfo() {
				getOrderMarginInfo({
					id: orderId
				}).then(({
					content
				}) => {
					this.orderMarginInfo = content
					this.marginAmount = content.surplusMargin > 0 ? content.surplusMargin : ''
				})
			},
			// 获取上传状态
			select(e) {
				let serveList = []
				e.tempFilePaths.forEach(url => {
					serveList.push(this.uploadImage(url))
				})
				Promise.all(serveList).then(data => {
					setTimeout(() => {
						uni.showToast({
							title: this.$t('deposit.order.file.done'),
							icon: 'none'
						});
					}, 30)
					this.fileIds = data.map(item => item.id)
				}).catch(err => {
					setTimeout(() => {
						uni.showToast({
							title: this.$t('deposit.order.file.err'),
							icon: 'none'
						});
					}, 30)
				})
				// uploadFile({
				// 	filePath: e.tempFilePaths[0],
				// 	name: 'file',
				// 	formData: {                                  //其他需要携带的参数
				// 		'modelType': 'default'
				// 	}
				// }).then(({content})=>{
				// 	this.fileIds = content.id
				// })
			},
			uploadImage(path) {
				return new Promise((resolve, reject) => {
					uploadFile({
						filePath: path,
						name: 'file',
						formData: { //其他需要携带的参数
							'modelType': 'default'
						}
					}).then(({
						content
					}) => {
						resolve(content)
					}).catch(err => {
						reject(err)
					})
				})
			},
			submit() {
				if (!this.marginAmount) {
					uni.showToast({
						title: this.$t('index.enter') + this.$t('deposit.order.money.now.sum'),
						icon: 'none'
					});
					return
				}
				if (this.marginAmount <= 0) {
					uni.showToast({
						title: this.$t('deposit.msg.money'),
						icon: 'none'
					});
					return
				}
				if (!this.fileIds.length) {
					uni.showToast({
						title: this.$t('deposit.msg.file'),
						icon: 'none'
					});
					return
				}
				const userInfo = JSON.parse(uni.getStorageSync('userInfo'))
				PayDeposit({
					businessId: orderId,
					customerCode: userInfo.customerCode,
					customerName: userInfo.customerName,
					fileIds: this.fileIds.join(','),
					marginAmount: this.marginAmount,
					payTime: this.payTime
				}).then(res => {
					uni.redirectTo({
						url: `/pages/paymentStatus/index?type=deposit&price=${this.marginAmount}`
					})
				}).catch(err => {
					uni.redirectTo({
						url: '/pages/paymentStatus/index?type=deposit'
					})
				})
			}
		},
		onLoad(options) {
			orderId = options.id
			this.datetimesingle = new Moment().format('YYYY-MM-DD HH:mm:ss')
			this.getOrderMarginInfo()
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		background-color: #FFFFFF;

		/deep/ .file-picker__progress {
			display: none;
		}
	}

	.deposit-value {
		flex: auto;
		min-width: 300rpx;
		text-align: right;
	}

	.upload-box {
		padding: 12px 15px 0;

		.upload-title {
			font-size: 14px;
			color: #B60001;
			;
		}

		.upload {
			margin-top: 12px;
		}
	}

	.btn-box {
		margin-top: 100rpx;
		padding: 0 30rpx;

		.btn {
			background-color: #B60001;
			font-size: 15px;
			font-weight: 500;
			color: #FFFFFF;
			height: 94rpx;
			line-height: 94rpx;

			&::after {
				border-radius: 0;
				border: 0;
			}
		}
	}
</style>