<template>
	<view class="sales-list-component">
		<scroll-view class="sales-list-con" :style="{height: scrollH+'px'}" 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 align_center flex justify_between">
						<view class="buyer flex ellipsis-one">
							{{item.orderBillNo||'--'}}
						</view>
						<view>
							<text :style="{color:item.billState=='CLOSE'?'#ff0000':'#00aa00'}">{{item.billStateDictValue}}</text> 
						</view>
					</view>
					<view class="list-item-stit align_center flex justify_between">
						<view class="flex">
							{{item.shelfName||'--'}}
						</view>
					</view>
					<view class="detail-list">
						<view 
						class="flex align_center justify_between" 
						v-for="de in item.orderBillDetailApiEntityList"
						:key="de.id"
						>
							<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>{{de.productName}}</view>
								<view class="pname">{{de.productCode}}</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>
								合计：<text class="amount">￥{{item.settleAmount}}</text>
							</view>
						</view>
					</view>
				</view>
				<view v-if="listData && listData.length == 0 && status!='loading'">
					<u-empty :src="`/static/${$config('themePath')}/def_no_data@3x.png`" icon-size="150" :text="noDataText" mode="list" :margin-top="50"></u-empty>
				</view>
				<view style="padding-bottom: 20upx;" v-if="listData.length">
					<u-loadmore :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){
				console.log(a,b)
				const sys = uni.getSystemInfoSync()
				console.log(sys.windowHeight)
				if(sys.platform == 'android'){
					this.scrollH = sys.windowHeight - sys.statusBarHeight - a
				}else{
					if(sys.safeArea.top){
						this.scrollH = sys.windowHeight - a + sys.statusBarHeight - 34
					}else{
						this.scrollH = sys.windowHeight - a - 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
						if (this.listData.length == this.totalNum ) {
							this.status = 'nomore'
						} else {
							this.status = 'loadmore'
						}
					} else {
						this.listData = []
						this.totalNum = 0
						this.noDataText = res.message
						this.status = 'nomore'
					}
				})
			},
			// 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;
		}
		.amount{
			font-weight: bold;
		}
		.sales-list-con{
			.sales-list-main{
				.sales-list-item{
					background: #ffffff;
					padding: 10upx 20upx;
					margin: 25upx 0;
					border-radius: 20upx;
					box-shadow: 1px 1px 3px #EEEEEE;
					&:active{
						opacity: 0.6;
					}
					.list-item-tit{
						padding: 10rpx 0 0;
						.buyer{
							flex-grow: 1;
							font-weight: bold;
							color: #666;
						}
						>view{
							&:last-child{
								text-align: right;
								font-size: 24upx;
							}
						}
					}
					.list-item-stit{
						padding: 10rpx 0 15rpx;
						border-bottom: 1px solid #eee;
						color: #666;
					}
					.detail-list{
						> view{
							padding: 20upx 0;
							border-bottom: 1rpx solid #f8f8f8;
						}
						.pinfo{
							padding: 0 20rpx;
							width: 50%;
							flex-grow: 1;
							.pname{
								margin-top: 6rpx;
								font-weight: bold;
								color: #666;
							}
						}
						.prices{
							padding-left: 10rpx;
							text{
								font-size: 20rpx;
								color: #999;
								margin-right: 6rpx;
							}
							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>
