<template>
	<view class="lists">
		<view class="status_bar" :style="navHeight"></view>
		<view class="header-bg">
			<image class="header-bg-img" src="@/static/image/nav_bg@3x.png" mode="scaleToFill"></image>
		</view>
		<view class="main">
			<view class="list-wrapper" :style="scrollHeight">
				<list class="list" scrollable loadmoreoffset='1' show-scrollbar='false' @loadmore="scrolltolower">
					<cell class="list-cell" v-for="(item,index) in lists" :key="index">
						<view class="listview">
							<view class="cell-list">
								<view class="middle view planout-block-item">
									<view class="item-block item-block-code">
										<text class="item-block-label">开票方编号：{{item.billto_bp}}</text>
									</view>
									<view class="item-block item-block-name">
										<text class="item-block-label item-block__label">{{item.billto_name}}</text>
									</view>
									<view class="item-block item-block-date">
										<text class="detal-item-label">发生日期：{{item.posting_date}}</text>
									</view>

									<view class="block-detal block-detal-last">
										<view class="block-detal-item">
											<text class="detal-item-label">货款金额</text>
											<text class="detal-item-value">{{item.goods_amount}}</text>
										</view>
										<view class="block-detal-item">
											<text class="detal-item-label">随货保证金</text>
											<text class="detal-item-value">{{item.forward_amount}}</text>
										</view>
										<view class="block-detal-item block-detal-item-last">
											<text class="detal-item-label">经销商保证金</text>
											<text class="detal-item-value">{{item.dealing_amount}}</text>
										</view>
									</view>

								</view>
							</view>
						</view>
						<view class="empty-block">
						</view>
					</cell>
					<cell>
						<view class="loading-more" v-if='lists.length>0'>
							<text class="loading-more-text">-- 到底了 --</text>
						</view>
						<view class="loading-more" v-else>
							<text class="loading-more-text">暂无数据</text>
						</view>
					</cell>
				</list>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'

	import {
		apiAccountInquiry
	} from '@/servers/billingInvoice.js'

	export default {
		data() {
			return {
				itemHead: {},
				lists: [],
				condition: {
					customer: []
				},
				page: {
					page: 1,
					pagesize: 50,
					totalCount: 0
				}
			}
		},
		computed: {
			navHeight() {
				return {
					'height': `${this.sysinfo.safeArea.top + 44}px`
				}
			},
			mainHeight() {
				return {
					'height': `${this.sysinfo.safeArea.height }px`,
				}
			},
			scrollHeight() {
				return {
					'height': `${this.sysinfo.safeArea.height  -58}px`,
				}
			},
			...mapState(['sysinfo', 'userInfo', 'userBpData'])
		},
		created() {
			this.accountInquiry(1);
		},
		methods: {
			scrolltolower() {
				if (this.lists.length >= this.page.totalCount && this.page.totalCount > 0) {
					return;
				}
				this.page.page++;
				this.accountInquiry(this.page.page);
			},
			async accountInquiry(pageNo = 1) {
				// 处理客户条件，转换为SAP格式（属性名小写，与PC端保持一致）
				const customer = (this.condition.customer || []).map(v => ({
					sign: v.sign || v.SIGN || 'I',
					option: v.option || v.OPTION || 'EQ',
					low: v.low || v.LOW || '',
					high: v.high || v.HIGH || ''
				}))
				
				// 构建查询条件对象，与PC端格式保持一致
				const allConditions = {}
				if (customer.length > 0) {
					allConditions.customer = customer
				}
				
				// 获取用户编号和角色信息，参考 ticket-order.nvue 的方式
				const userCode = this.userInfo?.code || ''
				// 从 userBpData 获取第一个角色的 ROLE_ID
				const roleId = this.userBpData?.ROLES && this.userBpData.ROLES.length > 0 
					? this.userBpData.ROLES[0].ROLE_ID 
					: ''
				let params = {
					user_bp: userCode,
					role: roleId,
					...allConditions,
					page: pageNo,
					pagesize: this.page.pagesize,
					totalCount: this.page.totalCount,
					is_result: 1,
					sort: []
				}
				uni.showLoading({
					title: '加载中'
				});
				const res = await apiAccountInquiry(params);
				uni.hideLoading();
				if (res) {
					if (pageNo === 1) {
						this.lists = res.data || [];
					} else {
						this.lists = this.lists.concat(res.data || []);
					}
					this.page.totalCount = res?.TOTALCOUNT || res?.totalCount || res?.Total || this.page.totalCount;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* #ifndef APP-PLUS */
	page {
		width: 100%;
		min-height: 100%;
		display: flex;
		background: #F2F3F5;
	}

	.status_bar {
		height: var(--status-bar-height);
	}

	/* #endif */

	.lists {
		flex: 1;
		background: #F2F3F5;
	}

	.header-bg {
		position: absolute;
		left: 0;
		right: 0;
		height: 382rpx;
	}

	.header-bg-img {
		width: 750rpx;
		height: 382rpx;
	}

	.main {
		flex: 1;
		padding: 0 32rpx;
		margin-top: 100rpx;
	}

	.list-wrapper {
		flex: 1;
	}

	.list {
		flex: 1;
	}

	.listview {
		flex-direction: column;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		margin-bottom: 24rpx;
		padding: 24rpx;
	}

	.cell-list {
		flex-direction: column;
	}

	.planout-block-item {
		flex-direction: column;
	}

	.item-block {
		flex-direction: row;
		align-items: center;
		margin-bottom: 16rpx;
	}

	.item-block-code {
		justify-content: space-between;
	}

	.item-block-label {
		font-size: 28rpx;
		color: #333333;
	}

	.item-block__label {
		font-weight: bold;
		font-size: 32rpx;
	}

	.item-block-date {
		margin-bottom: 24rpx;
	}

	.detal-item-label {
		font-size: 24rpx;
		color: #999999;
	}

	.block-detal {
		flex-direction: row;
		background-color: #F8F8F8;
		padding: 24rpx;
		border-radius: 8rpx;
	}

	.block-detal-item {
		flex: 1;
		align-items: center;
	}

	.detal-item-value {
		font-size: 28rpx;
		color: #333333;
		margin-top: 8rpx;
		font-weight: bold;
	}

	.loading-more {
		align-items: center;
		justify-content: center;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
	}

	.loading-more-text {
		font-size: 28rpx;
		color: #999;
	}
	
	.empty-block {
		height: 24rpx;
	}
</style>

