<template>
	<view class="settlement-pages">
		<!-- 授信结算 -->
		<view class="sxjs-box" v-if="info">
			<view class="sxjs-head flex flex_column align-center justify_center">
				<view>已用额度</view>
				<view class="edu">
					￥<text>{{info.usedAmount}}</text>
				</view>
			</view>
			<view class="sxjs-head-grid flex align-center justify_between">
				<view :class="tabIndex==0?'active':''" @click="tabChange(0)">
					<view>待结算</view>
					<view class="edu">￥<text>{{info.waitSettleAmount}}</text></view>
					<view class="line"></view>
				</view>
				<view :class="tabIndex==1?'active':''" @click="tabChange(1)">
					<view>已冻结</view>
					<view class="edu">￥<text>{{info.freezeAmount}}</text></view>
					<view class="line"></view>
				</view>
			</view>
		</view>
		<view class="ds-box">
			<scroll-view style="height: calc(100vh - 370upx);position: relative;" scroll-y @scrolltolower="loadMore">
				 <view class="notes-msg" v-if="tabIndex==1">
				 	已冻结金额是指状态为“待取货”的取货单结算金额合计暂时无需支付，但是会占用授信额度，请尽快处理
				 </view>
				 <!-- 列表 -->
				 <view class="ds-list" v-for="item in list" :key="item.id">
				 	<view class="flex align_center">
						<view class="orderNo">{{item.shelfOrderNo}}</view>
				 		<view class="time">{{item.createDate}}</view>
				 	</view>
				 	<view class="flex align_center">
				 		<view class="carImage flex flex_column justify_center">
				 			<u-image :src="item.vehicleLogo" border-radius="30" width="100" height="100" bg-color="#EBEBEB" ></u-image> 
				 		</view>
				 		<view class="carModel">
				 			{{item.vehicleModel}}
				 		</view>
						<view class="price">￥{{item.settleAmount}}</view>
				 	</view>
				 </view>
				 <view style="padding-top: 10%;border:0" v-if="list.length==0 && status!='loading'">
				 	<u-empty :src="`/static/nodata.png`" icon-size="180" text="暂无记录" img-width="180" mode="list"></u-empty>
				 </view>
				 <view style="padding: 20upx;">
				 	<u-loadmore load-text="正在加载..." v-if="(allData.length>=list.length&&list.length)||status=='loading'" :status="status" />
				 </view>
			</scroll-view>
		</view>
		<view class="footer" v-if="tabIndex==0&&info.waitSettleAmount>0">
			<u-button @click="toPay" :throttle-time="100" :style="{background:'#1283d4',color:'#fff'}" shape="circle" type="success">
				立即支付(￥{{info.waitSettleAmount}})
			</u-button>
		</view>
	</view>
</template>

<script>
	import uniIcons from '@/components/uni-icons/uni-icons.vue';
	import { waitSettleForSx,shelfSettleBillToPay } from '@/api/shelf.js'
	export default {
		components: {
			uniIcons
		},
		data() {
			return {
				tabIndex: 0,
				pageNo: 1,
				pageSize:10,
				list: [],
				allData: [],
				info:null,
				status: 'loading',
				shelfOrderSnList:[]
			}
		},
		onReady() {
		},
		onLoad(option) {
			this.info =  JSON.parse(decodeURIComponent(option.data.replace(/%/g, '%25')))
			this.getwaitSettleForSx()
		},
		methods: {
			// 去支付
			toPay(){
				this.info.shelfOrderSnList = this.shelfOrderSnList
				uni.navigateTo({
					url:'/pages/pay/settlementPay/settlementPay?data='+encodeURIComponent(JSON.stringify(this.info))
				})
			},
			waitSettleAmount() {
				let ret = 0
				this.allData.map(item => {
					ret = ret + item.settleAmount
				})
				this.info.waitSettleAmount = ret.toFixed(2)
			},
			// 获取详细列表
			getwaitSettleForSx(){
				const state = ["WAIT","FREEZE","FINISH"]
				waitSettleForSx({shelfOrderState: state[this.tabIndex]}).then(res => {
					this.allData = res.data || []
					console.log(this.allData)
					// 默认显示第一页
					const allTotal = this.allData.length
					this.list = this.allData.slice(0,allTotal<=this.pageSize?allTotal:this.pageSize)
					this.status = allTotal>=this.list.length ? "nomore" : 'loadmore'
					if(this.tabIndex==0){
						// 获取所有sn
						this.allData.map(item => {
							this.shelfOrderSnList.push(item.shelfOrderSn)
						})
						this.waitSettleAmount()
					}
				})
			},
			tabChange(i){
				this.tabIndex = i
				this.pageNo = 1
				this.status = "loading"
				this.allData = []
				this.list = []
				this.shelfOrderSnList = []
				this.getwaitSettleForSx()
			},
			loadMore(event){
				console.log(event,'滚动到底部')
				const curCount = this.list.length
				const total = this.allData.length
				if(curCount<total){
					// 下页
					this.pageNo = this.pageNo + 1
					this.status = "loading"
					setTimeout(()=>{
						const end = this.pageNo * this.pageSize
						this.list = this.allData.slice(0,end)
						this.status = total>=this.list.length ? "nomore" : 'loadmore'
					},500)
				}else{
					this.status = "nomore"
				}
			}
		}
	}
</script>

<style lang="less">
.settlement-pages{
	height: 100vh;
	display: flex;
	flex-direction: column;
	> view{
		padding: 30rpx 50rpx;
	}
	.sxjs-box{
		> view{
			background-color: #fff;
			border-radius: 25rpx;
			min-height: 100rpx;
			padding: 30rpx;
			color: #666;
		}
		.sxjs-head{
			width: 100%;
			text-align: center;
			font-size: 30rpx;
			margin-bottom: 0;
			> .edu{
				color: #FA3534;
				padding: 10rpx 0;
				font-size: 36rpx;
				text{
					font-size: 46rpx;
					font-style: italic;
					font-weight: 900;
				}
			}
		}
		.sxjs-head-grid{
			margin-top: -40rpx;
			padding-bottom: 20rpx;
			> view{
				width: 50%;
				border-right: 2rpx solid #eee;
				text-align: center;
				color: #999;
				position: relative;
				.edu{
					text{
						font-size: 40rpx;
					}
				}
				&:last-child{
					border: 0;
				}
				.line{
					width: 60%;
					position: absolute;
					left: 20%;
					bottom: -20rpx;
				}
			}
			.active{
				color: #666;
				.edu{
					text{
						color: #222;
					}
				}
				.line{
					border-bottom: 6rpx solid #0485F6;
				}
			}
		}
	}
	.ds-box{
		flex-grow: 1;
		padding: 0 50rpx;
		overflow: auto;
		.notes-msg{
			background-color: #F8ECD9;
			border-radius: 25rpx;
			margin-bottom: 20rpx;
			min-height: 100rpx;
			padding: 30rpx;
			color: #666E75;
			font-size: 28rpx;
		}
		.ds-list{
			background-color: #fff;
			border-radius: 25rpx;
			margin-bottom: 20rpx;
			min-height: 100rpx;
			padding: 10rpx;
			color: #666;
			> view{
				padding: 10rpx;
				font-size: 28rpx;
				&:first-child{
					justify-content: space-between;
				}
				.time{
					color: #666E75;
					font-size: 24rpx;
				}
				.price{
					color: #FA3534;
					font-size: 32rpx;
					padding-left: 20rpx;
				}
				.carImage{
					padding-right: 20rpx;
				}
				.carModel{
					color: #222;
					font-size: 28rpx;
					flex-grow: 1;
				}
				.orderNo{
					font-size: 28rpx;
				}
			}
		}
	}
}
</style>
