<template>
	<view class="content">
		<form class="diff-from" @submit="onDiff">
			<label>补差价金额(元)</label>
			<input placeholder="输入补差价金额" name="price" type="digit" />
			<button form-type="submit">确认补差价</button>
		</form>
		<view class="diff-list">
			<view class="diff-title">补差价记录</view>
			<view class="diff-item" v-for="(item, index) in diffArr" :key="index">
				<view class="diff-info">
					<view class="diff-info-item">
						<label>差价金额：</label>
						<view class="nowrap">{{item.price}}</view>
					</view>
					<view class="diff-info-item">
						<label>订单状态：</label>
						<view class="nowrap">{{item.status.text}}</view>
					</view>
					<view class="diff-info-item">
						<label>创建时间：</label>
						<view class="nowrap">{{item.created_at}}</view>
					</view>
				</view>
				<view class="diff-state border-solid" v-if="item.can.pay_status != 5 && item.can.pay_status != 7">
					<view class="diff-btn" v-if="item.can.cancel" @click="onCancel(item.synthesis_diff_price_id, index)">取消订单</view>
					<view class="diff-btn in" @click="onListPay(item)" :class="{'hide': item.can.pay_status == 2 || item.can.pay_status == 4}">
						<text v-if="item.can.pay_status == 1">立即支付</text>
						<text v-if="item.can.pay_status == 2 || item.can.pay_status == 4">审核中</text>
						<text v-if="item.can.pay_status == 3 || item.can.pay_status == 6">被驳回</text>
					</view>
				</view>
			</view>
			<!-- 分页 -->
			<u-loadmore v-if="pagesShow" :status="status" />
		</view>
	</view>
</template>

<script>
	import { orderDiff, orderDiffList, orderDiffCancel, orderDiffInfo } from '@/apis/interfaces/synthesisOrder'
	export default {
		data() {
			return {
				orderId		: '',	// 支付ID
				orderType	: '',	// 支付类型
				price		: '',	// 支付价格
				diffArr		: [],	// 支付记录
				page		: {},	// 分页信息
				pagesShow	: false,// 是否显示分页
				status   	: ''	// 分页状态
			};
		},
		onShow() {
			this.getList()
		},
		methods: {
			// 获取补差价列表
			getList(){
				uni.showLoading({
					title: '加载中...',
					mask : true
				})
				// 初始化分页
				this.page = {
					current: 1
				}
				// 获取补差价列表
				let { orderId, ordertype } = this.$Route.query
				orderDiffList(orderId, ordertype.replace(/\-/g, '\\'), this.page.current).then(res => {
					let { data, page } = res
					this.diffArr 	= page.current == 1 ? data: this.diffArr.concat(data)
					this.page	 	= page
					this.pagesShow 	= !page.has_more
					this.status	   	= page.has_more ? 'loading' : 'nomore'
					uni.hideLoading()
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon : 'none'
					})
				}).finally(() => {
					uni.hideLoading()
				})
			},
			// 创建补差价订单
			onDiff(e){
				let { price } = e.detail.value
				let { orderId, ordertype } = this.$Route.query
				if( price == '' || price <= 0 ){
					uni.showToast({
						title: '金额需大于0元并不能为空',
						icon : 'none'
					})
					return
				}
				uni.showLoading({
					title: '加载中...',
					mask : true
				})
				orderDiff(ordertype.replace(/\-/g, '\\'), orderId, price ).then(res => {
					let { synthesis_diff_price_id, order_type, can, price } = res;
					this.onPay( synthesis_diff_price_id, order_type, can, price )
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon : 'none'
					})
				}).finally(() => {
					uni.hideLoading()
				})
			},
			// 取消补差价
			onCancel(id, index){
				uni.showModal({
					title		: '提示',
					content		: '确认取消当前补差价订单吗？',
					success		: res => {
						if(res.confirm){
							uni.showLoading({
								title: '加载中...',
								mask : true
							})
							orderDiffCancel(id).then(res => {
								uni.showToast({
									title: res,
									icon : 'none'
								})
								this.diffArr.splice(index, 1)
							}).catch(err => {
								uni.showToast({
									title: err.message,
									icon : 'none'
								})
							})
						}
					}
				})
			},
			// 列表补差价
			onListPay(obj){
				let { synthesis_diff_price_id, order_type, can, price, remark, offline_pays } = obj
				if(can.pay_status == 2 || can.pay_status == 4){
					uni.showToast({
						title: '补差价信息正在审核中',
						icon : 'none'
					})
					return
				}
				if(can.pay_status == 3 || can.pay_status == 6){
					uni.showModal({
						title		: '提示',
						content		: '驳回原因：' + remark,
						showCancel	: false,
						success		: res => {
							if(res.confirm && can.pay_status == 3){
								this.$Router.push({
									name: 'BankPay',
									params: {
										payId		: payId,
										orderId		: offline_pays.offline_pay_id,
										orderType	: order_type.replace(/\\/g, '-'),
										price		: price,
										type		: 'edit'
									},
								})
							}
						}
					})
					return
				}
				
				this.onPay(synthesis_diff_price_id, order_type, can, price)
			},
			// 差价支付
			onPay(id, type, can, price){
				this.orderId   = id
				this.orderType = type
				this.price	   = price
				// 仅支持线下打款
				if(!can.online){
					this.onToBankPay()
					return
				}
				// 选择线上、下支付方式
				uni.showActionSheet({
				    itemList: ['线上支付', '线下支付'],
				    success: sheetRes => {
						if(sheetRes.tapIndex == 0){
							this.$Router.push({
								name: 'Pay',
								params: {
									paytype		: 'synthesize',
									orderId		: id,
									orderType	: type.replace(/\\/g, '-')
								},
							})
							return
						}
						this.onToBankPay()
				    }
				})
			},
			// 去线下打款
			onToBankPay(){
				this.$Router.push({
					name: 'BankPay',
					params: {
						orderId		: this.orderId,
						orderType	: this.orderType.replace(/\\/g, '-'),
						price		: this.price
					},
				})
			}
		},
		onReachBottom() {
			this.pagesShow = true;
			if(this.page.has_more){
				this.page.current++
				this.getList()
				return
			}
		}
	}
</script>

<style lang="scss">
	.content{
		background: #f8f8f8;
		min-height: 100vh;
		padding: 1rpx 0;
		box-sizing: border-box;
	}
	// 差价列表
	.diff-list{
		padding: 0 30rpx;
		.diff-title{ font-size: 30rpx; color: gray; line-height: 60rpx; margin-bottom: 20rpx; }
		.diff-item{
			background-color: white;
			border-radius: 20rpx;
			margin-bottom: 30rpx;
			.diff-info{
				padding: 30rpx;
				.diff-info-item{
					display: flex;
					justify-content: space-between;
					line-height: 60rpx;
					font-size: 30rpx;
					label{ color: gray; width: 200rpx; }
					view{ text-align: right; width: calc(100% - 200rpx); }
				 }
			}
			.diff-state{
				padding: 20rpx 30rpx;
				display: flex;
				flex-wrap: wrap;
				justify-content: flex-end;
				&::after{ top: 0; }
				.diff-btn{ 
					border:solid 1rpx $main-color;
					color: $main-color;
					font-size: 30rpx;
					line-height: 70rpx;
					padding: 0 30rpx;
					border-radius: 36rpx;
					margin-left: 30rpx;
					&.in{
						background: $main-color;
						color: white;
					}
					&.hide{
						opacity: .7;
					}
				}
			}
		}
	}
	// 创建补差价
	.diff-from{
		background: white;
		border-radius: 20rpx;
		margin: 30rpx;
		padding: 50rpx;
		display: block;
		label{ line-height: 70rpx; text-align: center; font-weight: bold; font-size: 30rpx; display: block; }
		input{ text-align: center; font-size: 40rpx; height: 100rpx; @extend .border-solid; margin: 30rpx 0 50rpx; }
		button{ background-color: $main-color; color: white; font-size: 32rpx; height: 90rpx; line-height: 90rpx; border-radius: 10rpx; }
	}
</style>
