<template>
	<view class="sales-list-component">
		<scroll-view class="sales-list-con" :scroll-top="scrollTop" :style="{ height: scrollH + 'px' }" scroll-y @scrolltolower="onreachBottom">
			<view class="customer-list" v-for="(item, i) in listData" :key="i" @click="getDetail(item)">
				<view class="u-line-1">{{ item.customer.customerName }}</view>
				<view class="customer-b u-flex">
					<view class="customer-box">
						<text>欠款：</text>
						<text>￥{{ Number(item.settleAmount)?Number(item.settleAmount).toFixed(2):'0.00' }}</text>
					</view>
					<view class="customer-box">收款方式：{{ item.customer.settleStyleSnDictValue || '--' }}</view>
				</view>
			</view>
			<view v-if="listData && listData.length == 0"><u-empty :src="`/static/${$config('themePath')}/def_no_data@3x.png`" icon-size="150" :text="noDataText" mode="list" :margin-top="100"></u-empty></view>
			<view style="padding:20upx 0;"><u-loadmore v-if="totalNum > listData.length || status == 'loading'" :status="status" /></view>
		</scroll-view>
	</view>
</template>

<script>
import { queryCustomerPage } from '@/api/verify.js';
export default {
	props: {
		height: {
			// 滚动区域高度   upx
			type: [String, Number],
			default: 300
		},
		params: {
			// 列表查询条件
			type: Object,
			default: () => {
				return {};
			}
		}
	},
	data() {
		return {
			listData: [],
			pageNo: 1,
			pageSize: 15,
			totalNum: 0,
			status: 'loadmore',
			noDataText: '暂无数据',
			dataInfo: null,
			scrollH: 300,
			scrollTop:0
		};
	},
	watch: {
		height(a, b) {
			const sys = uni.getSystemInfoSync();
			if (sys.platform == 'android') {
				this.scrollH = sys.windowHeight - a;
			} else {
				if (sys.safeArea.top) {
					this.scrollH = sys.windowHeight - a + sys.statusBarHeight - 34;
				} else {
					this.scrollH = sys.windowHeight - a - 14;
				}
			}
		}
	},
	methods: {
		refash() {
			this.listData = [];
			this.totalNum = 0;
			this.getList(1);
		},
		// 列表
		getList(pageNo) {
			const _this = this;
			if (pageNo) {
				this.pageNo = pageNo;
			}
			let params = Object.assign(this.params, { pageNo: this.pageNo, pageSize: this.pageSize });
			this.status = 'loading';
			uni.showLoading({
				title:'加载中',
				mask:true
			})
			queryCustomerPage(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 == res.data.count) {
						this.status = 'nomore'
					} else {
						this.status = 'loadmore'
					}
				} else {
					this.status = 'loadmore'
					this.listData = []
					this.totalNum = 0
					this.noDataText = res.message ? res.message : '网络似乎出错了，请稍后再试'
				}
				uni.hideLoading();
				this.noDataText = '暂无客户'
				this.scrollTop = 0;
			});
		},
		// scroll-view到底部加载更多
		onreachBottom() {
			if (this.listData.length < this.totalNum) {
				this.pageNo += 1;
				this.getList();
			}else{
				this.status = "nomore"
			}
		},
		getDetail(data) {
			if(uni.getStorageSync('curTab')){
				uni.$emit('customerInfo',data.customer);
				uni.navigateBack();
			}else{
				uni.navigateTo({
					url: '/pages/sales/bill?data=' + encodeURIComponent(JSON.stringify(data.customer))
				})
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.sales-list-component {
	.sales-list-con {
		.customer-list {
			padding: 20rpx;
			border-bottom: 1rpx solid #f8f8f8;
		}
		.customer-b {
			margin-top: 10rpx;
			color: #666;
			font-size: 26rpx;
			.customer-box {
				width: 46%;
				text {
					&:last-child {
						color: $uni-color-warning;
					}
				}
			}
		}
	}
}
</style>
