<template>
	<view class="settlement-pages">
		<!-- 授信结算 -->
		<view class="sxjs-box" v-if="totalMount">
			<view class="sxjs-head flex flex_column align-center justify_center">
				<view>累计待结算</view>
				<view class="edu">
					<text>￥{{totalMount}}</text>
				</view>
			</view>
		</view>
		<view class="monthSel">
			<u-dropdown>
				<u-dropdown-item @change="changeMonth" v-model="month" :title="mothTitle" :options="monthList"></u-dropdown-item>
			</u-dropdown>
		</view>
		<view class="ds-box">
			<scroll-view style="height: calc(100vh - 370upx);position: relative;" scroll-y @scrolltolower="loadMore">
				 <!-- 列表 -->
				 <view class="ds-list" v-for="item in shelfOrderList" :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 v-if="!item.billSource" :src="item.vehicleLogo" border-radius="30" width="100" height="100" bg-color="#EBEBEB" ></u-image>
							<u-image v-if="item.billSource=='qr_code'" src="/static/qrcode.png" border-radius="30" width="100" height="100" bg-color="#EBEBEB" ></u-image> 
							<u-image v-if="item.billSource=='bar_code'" src="/static/barcode.png" border-radius="30" width="100" height="100" bg-color="#EBEBEB" ></u-image>
							<u-image v-if="item.billSource=='product_code'" src="/static/tag.png" border-radius="30" width="100" height="100" bg-color="#333" ></u-image>
				 		</view>
				 		<view class="carModel">
				 		  {{!item.billSource ? item.vehicleModel : item.shelfOrderDetailList[0].productName}}
				 		</view>
						<view class="price">￥{{item.settleAmount}}</view>
				 	</view>
				 </view>
				 <view style="padding-top: 10%;border:0" v-if="shelfOrderList.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 v-if="(allData.length>=shelfOrderList.length&&shelfOrderList.length)||status=='loading'" :status="status" />
				 </view>
			</scroll-view>
		</view>
		<!-- <view class="footer" v-if="totalMount">
			<u-button :throttle-time="100" @click="toPay" :custom-style="{background:'#066cff',color:'#fff'}" shape="circle" type="success">
				立即支付(￥{{totalMount}})
			</u-button>
		</view> -->
	</view>
</template>

<script>
	import { waitSettleForMonth, findStoreShelfSettleRule } from '@/api/shelf.js'
	export default {
		data() {
			return {
				month: -1,
				info: null,
				monthList: [],
				mothTitle: '全部待结算',
				waitSettleAmount: 0, // 总金额
				curSettleAmount: 0, // 当前总金额
				shelfOrderList: [],
				pageNo:1,
				pageSize:10,
				baseData: [],
				allData: [],
				status: 'loading'
			}
		},
		computed: {
			totalMount() {
				let tm = 0
				this.shelfOrderList.map(item => {
					tm = tm + item.settleAmount
				})
				return tm.toFixed(2) 
			},
			shelfOrderSnList(){
				let tm = []
				this.shelfOrderList.map(item => {
					tm.push(item.shelfOrderSn)
				})
				return tm
			}
		},
		onLoad(opts) {
			// this.info =  JSON.parse(decodeURIComponent(opts.data.replace(/%/g, '%25')))
			this.getDetail()
			this.month = opts.month
			this.mothTitle = (opts.month!=-1?(opts.month+'月'):'全部') + '待结算'
			this.monthList = [
				{
					label: '全部',
					value: -1
				}
			]
		},
		methods: {
			// 查询详情
			getDetail(){
				findStoreShelfSettleRule().then(res => {
					console.log(res)
					if(res.status == 200){
						this.info = res.data
						this.waitSettleAmount = this.info.waitSettleAmount
						this.getAyDjsList()
					}
				})
			},
			// 去支付
			toPay(){
				this.info.shelfOrderSnList = this.shelfOrderSnList
				this.info.waitSettleAmount = this.totalMount
				uni.navigateTo({
					url:'/pages/pay/settlementPay/settlementPay?data='+encodeURIComponent(JSON.stringify(this.info))
				})
			},
			// 获取待结算列表
			getAyDjsList(){
				waitSettleForMonth().then(res => {
					console.log(res)
					const list = res.data || []
					list.map(item => {
						this.monthList.push({label:item.month,value:item.month})
					})
					this.baseData = list
					// 分页格式化数据
					this.formatData()
				})
			},
			formatData(){
				// 全部
				if(this.month == -1){
					let all = []
					this.baseData.map(item => {
						all = all.concat(item.shelfOrderList)
					})
					this.allData = all
					this.curSettleAmount = this.waitSettleAmount
				}else{
					// 某一月
					const curRow = this.baseData.find(item => item.month == this.month)
					this.allData = curRow.shelfOrderList
					this.curSettleAmount = curRow.settleAmount
				}
				// 默认显示第一页
				const allTotal = this.allData.length
				this.shelfOrderList = this.allData.slice(0,allTotal<=this.pageSize?allTotal:this.pageSize)
				this.status = allTotal>=this.shelfOrderList.length ? "nomore" : 'loadmore'
			},
			changeMonth(e){
				console.log(e)
				this.mothTitle = (e!=-1?(e+'月'):'全部') + '待结算'
				this.pageNo = 1
				this.status = "loading"
				this.formatData()
			},
			loadMore(event){
				console.log(event,'滚动到底部')
				const curCount = this.shelfOrderList.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.shelfOrderList = this.allData.slice(0,end)
						this.status = total>=this.shelfOrderList.length ? "nomore" : 'loadmore'
					},500)
				}else{
					this.status = "nomore"
				}
			}
		}
	}
</script>

<style lang="less">
.settlement-pages{
	width: 100%;
	height: 100vh;
	display: flex;
	flex-direction: column;
	> view{
		padding: 30rpx 50rpx;
	}
	.monthSel{
		padding: 0;
		margin-top: -20rpx;
		> view{
			.u-dropdown__menu{
				width: 40%;
			}
		}
	}
	.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;
				}
			}
		}
	}
	.ds-box{
		flex-grow: 1;
		padding: 0 50rpx;
		overflow: auto;
		.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: 24rpx;
					flex-grow: 1;
					width: 60%;
				}
			}
		}
	}
}
</style>
