<template>
	<view class="sales-list-component">
		<scroll-view class="sales-list-con" :style="{height: scrollH+'upx'}" scroll-y @scrolltolower="onreachBottom">
			<view class="sales-list-main">
				<view class="sales-list-item" v-for="(item, index) in listData" :key="item.id" @click="getDetail(item)">
					<view class="list-item-tit flex align_center justify_between">
						<view class="u-line" :style="{background: $config('primaryColor')}"></view>
						<view class="buyer">{{item.shelfName||'--'}}</view>
						<view>{{item.billStateDictValue}} <u-icon name="arrow-right" color="#969da3" size="28"></u-icon></view>
					</view>
					<view class="detail-list">
						<view class="flex align_center justify_between" v-for="de in item.orderBillDetailApiEntityList">
							<view class="limgs">
								<u-image :src="de.images?de.images:`../../static/${$config('themePath')}/def_img@2x.png`" width="128" height="128" border-radius="10"></u-image>
							</view>
							<view class="pinfo">
								<view class="pname">{{de.productCode}}</view>
								<view>{{de.productName}}</view>
							</view>
							<view class="prices">
								<view>¥{{de.settlePrice}}</view>
								<view><text>X</text>{{de.totalQty}}{{de.unit}}</view>
							</view>
						</view>
					</view>
					<view class="list-item-con">
						<view class="list-item-line flex align_center justify_between">
							<view class="color_6 font_13">{{item.createDate || '--'}}</view>
							<view>
								合计:¥{{item.settleAmount}}
							</view>
						</view>
					</view>
				</view>
				<view v-if="listData && listData.length == 0 && status!='loading'">
					<u-empty :text="noDataText" mode="list" :img-width="200" :margin-top="30"></u-empty>
				</view>
				<view style="padding-bottom: 20upx;">
					<u-loadmore v-if="totalNum>listData.length || status=='loading'" :status="status" />
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import { toThousands } from '@/libs/tools'
	import { orderBillQueryPage } from '@/api/shelf'
	export default{
		components: {},
		props: {
			height: {  // 非滚动区域高度   upx
				type: [String ,Number],
				default: 300
			},
			params: {  // 列表查询条件
				type: Object,
				default: () => {
					return {}
				}
			}
		},
		data(){
			return{
				listData: [],
				pageNo: 1,
				pageSize: 10,
				totalNum: 0,
				status: 'loadmore',
				noDataText: '暂无数据',
				toThousands,
				dataInfo: null,
				scrollH: 300,
			}
		},
		watch:{
			height(a,b){
				const sys = uni.getSystemInfoSync()
				if(sys.platform == 'android'){
					this.scrollH = (sys.windowHeight - sys.statusBarHeight - a) * 2
				}else{
					if(sys.safeArea.top){
						this.scrollH = (sys.windowHeight - a) * 2 + sys.statusBarHeight - 34
					}else{
						this.scrollH = (sys.windowHeight - a) * 2 - 14
					}
				}
			},
		},
		mounted() {
			this.getList()
		},
		methods:{
			refash(){
				this.listData = []
				this.totalNum = 0
				this.getList(1)
			},
			// 列表
			getList(pageNo){
				const _this = this
				if (pageNo) {
					this.pageNo = pageNo
				}
				let params = {
					pageNo: this.pageNo,
					pageSize: this.pageSize
				}
				this.status = "loading"
				console.log(Object.assign(params, this.params))
				orderBillQueryPage(Object.assign(params, this.params)).then(res => {
					if (res.status == 200) {
						if(this.pageNo>1){
							this.listData = this.listData.concat(res.data.list || [])
						}else{
							this.listData = res.data.list || []
						}
						this.totalNum = res.data.count || 0
					} else {
						this.listData = []
						this.totalNum = 0
						this.noDataText = res.message
					}
					this.status = "loadmore"
				})
			},
			// scroll-view到底部加载更多
			onreachBottom() {
				if(this.listData.length < this.totalNum){
					this.pageNo += 1
					this.getList()
				}
			},
			// 查看详情
			getDetail(data){
				uni.navigateTo({ url: '/pages/shelfOrder/orderDetail?pageType=detail&orderBillSn='+data.orderBillSn })
			},
		}
	}
</script>

<style lang="less">
	.sales-list-component{
		.color_6{
			color: #666;
		}
		.font_13{
			font-size: 26upx;
		}
		.sales-list-con{
			.sales-list-main{
				.sales-list-item{
					background: #ffffff;
					padding: 20upx;
					margin: 25upx 0;
					border-radius: 25upx;
					box-shadow: 1px 1px 3px #EEEEEE;
					.list-item-tit{
						padding-bottom: 18upx;
						padding-top: 10upx;
						border-bottom: 1px solid #e4e7ed;
						.u-line{
							display: inline-block;
							width: 6upx;
							height: 28upx;
							vertical-align: bottom;
							margin: 0 10upx;
							border-radius: 5upx;
						}
						.buyer{
							flex-grow: 1;
							font-size: 28upx;
							font-weight: bold;
						}
						>view{
							&:last-child{
								width: 150upx;
								text-align: right;
								color: #666;
								font-size: 26upx;
							}
						}
					}
					.detail-list{
						> view{
							padding: 20upx 0;
							border-bottom: 1rpx solid #f8f8f8;
						}
						.pinfo{
							padding: 0 15rpx;
							.pname{
								font-weight: bold;
								margin-bottom: 6rpx;
							}
						}
						.prices{
							width: 20%;
							text{
								font-size: 20rpx;
								color: #999;
								margin-right: 20rpx;
							}
							text-align: right;
							> view{
								&:first-child{
									margin-bottom: 10rpx;
								}
								&:last-child{
									font-size: 24rpx;
								}
							}
						}
					}
					.list-item-con{
						padding: 10upx 0;
						.list-item-line{
							padding: 8upx 0;
						}
						text{
							color: #666;
						}
					}
				}
			}
		}
	}
</style>