<template>
	<view class="settlement-pages">
		<!-- 授信结算 -->
		<view class="sxjs-box" v-if="info">
			<view class="sxjs-head flex justify_between">
				<view class="flex flex_column align_start justify_center">
					<view>已结算</view>
					<view class="edu">
						￥<text>{{info.settleAmount}}</text>
					</view>
				</view>
				<view class="flex flex_column align_end justify_center">
					<view>支付方式</view>
					<view class="pay">
						{{info.payTypeVal}}
					</view>
				</view>
			</view>
		</view>
		<view class="ds-box" v-if="info">
			<view>
				<view class="titls">使用记录</view>
				<scroll-view style="height: calc(100vh - 370upx);position: relative;" scroll-y @scrolltolower="onreachBottom">
					 <!-- 列表 -->
					 <view class="ds-list" v-for="item in list" :key="item.id" @click="viewDetail(item)">
					 	<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">
					 			<u-image :src="item.vehicleLogo" border-radius="30" width="100" height="100" bg-color="#EBEBEB" ></u-image> 
					 		</view>
					 		<view style="flex-grow: 1;">
								<!-- <view class="flex" v-if="item.vehicleNumber">
									<carNo color="#0055ff" :val="item.vehicleNumber"></carNo>
								</view> -->
					 		  <view class="carModel flex align_center">
					 			  {{item.vehicleModel}}
								  <view class="price">
								  	￥{{item.settleAmount}}
								  </view>
					 		  </view>
							  <view class="carVin flex">
								  <view>VIN码：{{item.vin||'暂无'}}</view>
								  <text v-if="item.vin" @click.stop="copyVin(item.vin)">复制</text>
							  </view>
					 		</view>
					 	</view>
					 </view>
					 <view style="padding: 20upx;">
						<u-empty :src="`/static/nodata.png`" icon-size="180" :text="noDataText" img-width="120" v-if="list.length==0 && status!='loading'" mode="list"></u-empty>
					 	<u-loadmore v-if="(total>=list.length&&list.length)||status=='loading'" :status="status" />
					 </view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import carNo from '@/components/carNo.vue'
	import uniIcons from '@/components/uni-icons/uni-icons.vue';
	import { getShelfOrderList } from "@/api/shelf.js"
	export default {
		components: {
			uniIcons,
			carNo
		},
		data() {
			return {
				 info: null,
				 allData: [],
				 list: [],
				 pageSize: 20,
				 pageNo: 1,
				 status: 'loading',
				 total: 0,
			}
		},
		onReady() {
		},
		onLoad() {
			this.info = this.$store.state.vuex_settleRecordDetail
			// 获取使用记录
			this.getUseRecord()
		},
		methods: {
			// 复制
			copyVin(vin){
				uni.setClipboardData({
					data: vin||'',
				})
			},
			getUseRecord(pageNo){
				let _this = this
				if (pageNo) {
				  this.pageNo = pageNo
				}
				let params = {
				  pageNo: this.pageNo,
				  pageSize: this.pageSize,
				  settleBillSn: this.info.settleBillSn
				}
				console.log(params)
				this.status = "loading"
				getShelfOrderList(params).then(res => {
					console.log(res)
					if (res.code == 200 || res.status == 204 || res.status == 200) {
					  if(_this.pageNo>1){
						  _this.list = _this.list.concat(res.data.list || [])
					  }else{
						  _this.list = res.data.list || []
					  }
					  _this.total = res.data.count || 0
					} else {
					  _this.list = []
					  _this.total = 0
					  _this.noDataText = res.message
					}
					 if(this.swiperCurrent == 0){
						 this.tabList[0].count = _this.total<=99?_this.total:'99+'
					 }
					_this.status = _this.total>=_this.list.length ? "nomore" : 'loadmore'
				})
			},
			// scroll-view到底部加载更多
			onreachBottom() {
				console.log(this.list.length, this.total)
				if(this.list.length < this.total){
					this.pageNo += 1
					this.getUseRecord()
				}else{
					this.status = "nomore"
				}
			},
			viewDetail(item){
				item.payDate = this.info.payDate
				this.$u.vuex('vuex_settleOrderDetail', item)
				uni.navigateTo({
					url: "/pages/digitalShelf/settlementRecord/orderPartDetail"
				})
			}
		}
	}
</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;
			> view{
				width: 50%;
				> .edu{
					color: #29AD46;
					padding: 10rpx 0;
					font-size: 36rpx;
					text{
						font-size: 46rpx;
						font-style: italic;
						font-weight: 900;
					}
				}
				.pay{
					padding: 10rpx 0;
					font-size: 36rpx;
					color: #222222;
				}
			}
		}
	}
	.ds-box{
		flex-grow: 1;
		padding: 0 50rpx;
		overflow: auto;
		> view{
			background-color: #fff;
			border-radius: 25rpx;
			padding: 30rpx;
			.titls{
				font-weight: bold;
			}
		}
		.ds-list{
			background-color: #fff;
			min-height: 100rpx;
			padding: 20rpx 0;
			color: #666;
			border-bottom: 2rpx solid #f5f5f5;
			> view{
				padding: 10rpx;
				font-size: 28rpx;
				&:first-child{
					justify-content: space-between;
				}
				.time{
					color: #666E75;
					font-size: 24rpx;
				}
				.price{
					color: #FB1E1E;
					font-size: 32rpx;
					padding-left: 20rpx;
				}
				.carImage{
					padding-right: 20rpx;
				}
				.carModel{
					color: #222;
					font-size: 28rpx;
					margin-bottom: 10rpx;
				}
				.orderNo{
					color: #666E75;
					font-size: 28rpx;
				}
				.carVin{
					color: #666E75;
					font-size: 24upx;
					> view{
						word-break:break-all;
					}
					text{
						background-color: #EBEBEB;
						border-radius: 100rpx;
						padding: 0 20rpx;
						color: #033692;
						font-size: 20rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-left: 10rpx;
						height: 40rpx;
					}
				}
			}
		}
	}
}
</style>
