<template>
	<view class="content flex flex_column">
		<view>
			<view class="p-header" @click="jumpPage('/pages/sales/chooseShelf?customerSn=' + (targetSn ? targetSn : ''))">
				<text>{{ curCustomerName || '全部客户' }}</text>
				<u-icon name="arrow-right"></u-icon>
			</view>
			<u-tabs :list="tabsList" :is-scroll="false" :current="current" @change="change"></u-tabs>
		</view>
		<view class="p-content">
			<view  v-if="billList && billList.length > 0">
				<view class="list" @click="jumpPage('/pages/sales/billHistoryDetail?billId=' + item.verifySn)" v-for="(item, i) in billList" :key="i">
					<view class="list_t u-flex u-row-between">
						<view class="u-line-1">{{ item.customer.customerName }}</view>
						<view>¥{{ toThousands(item.settleAmount || 0, 2) }}</view>
					</view>
					<view class="list_b u-flex u-row-between">
						<view>{{ item.createDate }}</view>
						<u-tag size="mini" :text="item.billStatus == 'UNSETTLE'?'未付款':'已结清'" :type="item.billStatus == 'UNSETTLE'?'info':'success'" />
					</view>
				</view>
			</view>
			<view v-if="billList && billList.length == 0">
				<u-empty
					v-if="status != 'loading'"
					:src="`/static/${$config('themePath')}/def_no_data@3x.png`"
					icon-size="180"
					:text="noDataText"
					mode="list"
					:margin-top="50"
				></u-empty>
			</view>
			<view style="padding: 20upx;" v-else><u-loadmore :status="status" v-if="status == 'loading'" /></view>
		</view>
	</view>
</template>

<script>
import { queryPage } from '@/api/verify.js';
import { toThousands } from '@/libs/tools.js';
export default {
	data() {
		return {
			toThousands,
			wordColor: this.$config('infoColor'),
			curCustomerName: '',
			pageNo: 1,
			pageSize: 10,
			totalNum: 0,
			status: 'loadmore',
			noDataText: '暂无数据',
			billList: [],
			targetSn: undefined,
			tabsList: [
				{
					id: 1,
					billStatus:'',
					name: '全部'
				},
				{
					id: 2,
					billStatus:'UNSETTLE',
					name: '未付款'
				},
				{
					id: 3,
					billStatus:'SETTLED',
					name: '已结清'
				}
			],
			current: 0
		};
	},
	onLoad() {
		uni.$on('chooseShelfOk', data => {
			this.pageNo = 1;
			this.targetSn = data.customerSn ? data.customerSn : undefined;
			this.curCustomerName = data.customerName;
			this.getList();
		});
	},
	onReady() {
		setTimeout(() => {
			this.getList();
		}, 500);
	},
	methods: {
		change(index) {
			this.current = index;
			 this.pageNo = 1
			this.getList()
		},
		jumpPage(url) {
			uni.navigateTo({
				url
			});
		},
		getList() {
			let params = { targetSn: this.targetSn,billStatus:this.tabsList[this.current].billStatus, pageNo: this.pageNo, pageSize: this.pageSize };
			this.status = 'loading';
			queryPage(params).then(res => {
				if (res.status == 200) {
					if (this.pageNo > 1) {
						this.billList = this.billList.concat(res.data.list || []);
					} else {
						this.billList = res.data.list || [];
					}
					this.totalNum = res.data.count || 0;
				} else {
					this.billList = [];
					this.totalNum = 0;
					this.noDataText = res.message;
				}
				this.status = 'loadmore';
			});
		}
	},
	onReachBottom() {
		if (this.billList.length < this.totalNum) {
			this.pageNo += 1;
			this.getList();
		} else {
			this.status = 'nomore';
		}
	},
	onUnload() {
		uni.$off('chooseShelfOk');
	}
};
</script>

<style lang="scss" scoped>
.content {
	height: 100vh;
	width: 100%;
	.p-header {
		background-color: #fff;
		text-align: center;
		padding-bottom: 20rpx;
	}
	.p-content {
		flex-grow: 1;
		padding:20rpx 20rpx 0;
		overflow-y: scroll;
		.list {
			width: 100%;
			background: #ffffff;
			padding: 30rpx 20rpx;
			border-radius: 20rpx;
			box-sizing: border-box;
			margin-bottom: 20rpx;
			.list_t {
				margin-bottom: 20rpx;
				view {
					&:first-child {
						width: calc(100% - 200rpx);
					}
					&:last-child {
						color: $uni-color-warning;
					}
				}
			}
			.list_b {
				color: $uni-text-color-grey;
				font-size: $uni-font-size-sm;
				font-weight: 500;
			}
		}
	}
}
</style>