<template>
	<view class="salesRecord-box flex flex_column">
		<view class="sales-productInfo" v-if="baseData">
			<view>产品名称：{{ baseData.productName }}</view>
			<view>产品编码：{{ baseData.productCode }}</view>
		</view>
		<view class="product-list">
			<view class="search-box">
				<!-- <u-cell-group>
					<u-cell-item value="去选择" @click="toChooseCust">
						<view slot="title">
							选择客户：
							<u-tag v-if="queryparams.buyerName" :text="queryparams.buyerName" closeable :show="show" @close="tagClick" shape="circle" />
							<u-tag v-else :text="'全部'" shape="circle" />
						</view>
					</u-cell-item>
				</u-cell-group> -->
				<u-search placeholder="输入客户名称搜索" v-model="queryparams.buyerName" @change="changeInput" @clear="tagClick" @search="getList(1)" @custom="getList(1)"></u-search>
			</view>
			<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">
						<view class="list-item-tit flex align_center">
							<!-- <view class="u-line" :style="{background: $config('primaryColor')}"></view> -->
							<view class="buyer">{{item.salesBillEntity.buyerName}}</view>
						</view>
						<view class="list-item-con">
							<view class="list-item-line flex align_center justify_between">
								<view>销售时间：<text>{{item.salesBillEntity.createDate}}</text></view>
							</view>
							<view class="list-item-line flex align_center justify_between">
								<view>销售数量：<text>{{toThousands(item.qty||0)}}</text></view>
								<view>销售价：<text>￥{{toThousands(item.price||0, 2)}}</text></view>
							</view>
						</view>
					</view>
					<view v-if="listData && listData.length == 0 && status!='loading'">
						<u-empty :text="noDataText" mode="list" :img-width="200" :margin-top="150"></u-empty>
					</view>
					<view style="padding: 60upx;">
						<u-loadmore v-if="totalNum>listData.length || status=='loading'" :status="status" />
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {salesRecordlList} from "@/api/sales.js"
	import { toThousands } from '@/libs/tools'
	export default {
		data() {
			return {
				listData: [],
				pageNo: 1,
				pageSize: 10,
				totalNum: 0,
				status: 'loadmore',
				noDataText: '暂无销售记录',
				scrollH: 300,
				queryparams: {
					buyerName:'',
					buyerSn: undefined,
					productSn: undefined
				},
				baseData: null,
				show:false
			}
		},
		onLoad(opts) {
			this.queryparams.productSn = opts ? opts.productSn : undefined
			this.baseData ={productName:opts.productName,productCode:opts.productCode}
			uni.$on("searchSalesRecord",(data)=>{
				// this.queryparams.buyerSn = data.customerSn
				this.queryparams.buyerName = data.customerName
				this.show = true
				this.getList(1)
			})
		},
		onUnload() {
			uni.$off("searchSalesRecord")
		},
		onReady() {
			const sys = uni.getSystemInfoSync()
			if(sys.platform == 'android'){
				this.scrollH = (sys.windowHeight - sys.statusBarHeight - 120) * 2
			}else{
				if(sys.safeArea.top){
					this.scrollH = (sys.windowHeight - 120) * 2 + sys.statusBarHeight - 34
				}else{
					this.scrollH = (sys.windowHeight - 120) * 2 - 14
				}
			}
			this.getList()
		},
		methods: {
			toThousands:toThousands,
			toChooseCust(){
				uni.navigateTo({
					url:"/pages/sales/chooseCustomer?backPage=salesRecord"
				})
			},
			tagClick(){
				this.show = false
				this.queryparams.buyerName = undefined
				this.queryparams.buyerSn = undefined
				this.getList(1)
			},
			changeInput(v){
				if(v.length==0){
					this.tagClick()
				}
			},
			// 列表
			getList(pageNo){
				const _this = this
				if (pageNo) {
					if(pageNo==1){
						this.listData = []
					}
					this.pageNo = pageNo
				}
				let params = {
					pageNo: this.pageNo,
					pageSize: this.pageSize
				}
				this.status = "loading"
				salesRecordlList(Object.assign(params, this.queryparams)).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()
				}
			},
		}
	}
</script>

<style lang="less">
.salesRecord-box{
	width: 100%;
	height: 100vh;
	.sales-productInfo{
		padding: 20upx 30upx;
		background: #fff;
		> view{
			padding: 5upx 0;
		}
	}
	.product-list{
		flex-grow: 1;
		.search-box{
			padding: 0 20upx 20upx;
			background: #fff;
		}
		.sales-list-con{
			height: 100%;
			.sales-list-main{
				height: 100%;
				.sales-list-item{
					background: #ffffff;
					padding: 20upx;
					margin: 25upx;
					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: 30upx;
							vertical-align: bottom;
							margin: 0 10upx;
							border-radius: 5upx;
						}
						.buyer{
							flex-grow: 1;
							font-size: 30upx;
							font-weight: bold;
						}
						>view{
							&:last-child{
								width: 150upx;
								color: #666;
							}
						}
					}
					.list-item-con{
						padding: 10upx 0;
						.list-item-line{
							padding: 8upx 0;
						}
						text{
							color: #666;
						}
					}
				}
			}
		}
	}
}
</style>
