<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'>
					<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">开票方名称</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>2'>
							<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: [{
					BILLTO_BP: '--',
					BILLTO_NAME: '',
					GOODS_AMOUNT: '',
					FORWARD_AMOUNT: '',
					DEALING_AMOUNT: '',
				}]
			}
		},
		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'])
		},
		created() {
			this.accountInquiry();
		},
		methods: {
			async accountInquiry() {
				let CUSTOMER = []
				if (this.userInfo.role !== 'WLY001') {
					CUSTOMER = [{
						SIGN: 'I',
						OPTION: 'EQ',
						LOW: this.userInfo.code,
						HIGH: ''
					}]
				}
				const params = {
					'USER_BP': this.userInfo.code,
					ROLE: 'WLY001',
					CUSTOMER,
				}
				const res = await apiAccountInquiry(params)

				this.lists = res.DATA
			}
		}
	}
</script>

<style lang="scss" scoped>
	.view {
		flex-direction: column;
	}

	.header-bg {
		height: 284rpx;
		margin-top: -88rpx;
	}

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

	.lists {
		position: relative;
		flex-direction: column;
		background: #f0f4f5;
		overflow: hidden;
	}

	.main {
		position: relative;
		flex-direction: column;
		margin-top: -164rpx;
		padding: 0 16rpx;
		// overflow-y: scroll;
	}

	.list-wrapper {
		display: flex;
		flex-direction: column;
	}

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

	.order {
		display: flex;
		padding: 0 16rpx;
		background: #f0f4f5;
	}

	.list-cell {
		padding-bottom: 26rpx;
	}

	.listview {
		flex: 1;
		flex-direction: column;
	}

	.empty-block {
		height: 14px;
		background: #f0f4f5;
	}

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

	.date {
		font-size: 28rpx;
		color: #999999;
		font-size: 28rpx;
		text-align: center;
		margin-bottom: 24rpx;
	}

	.icon-address {
		width: 44rpx;
		height: 44rpx;
		margin-right: 16rpx;
	}

	.cell-list-block__content {
		display: flex;
		flex: 1;
		flex-direction: column;
		margin-bottom: 40rpx;
	}

	.cell-list-block__title {
		color: #333;
		font-size: 30rpx;
		flex: 1;
		align-items: center;
		margin-bottom: 4rpx;
	}

	.cell-list-block {
		overflow: hidden;
		display: flex;
		flex-direction: column;
		background: #fff;
		padding: 20rpx 24rpx;
		border-radius: 20rpx;
		margin-bottom: 56rpx;
	}

	.list-block-title {
		display: flex;
		align-items: center;
		margin-bottom: 16rpx;
	}

	.list-block-title__text {
		color: #999999;
		font-size: 26rpx;
	}

	.planout-block-item {
		flex: 1;
		padding: 40rpx 32rpx;
		background-color: #fff;
		border-radius: 16rpx 100rpx 16rpx 16rpx;
	}

	.item-block {
		overflow: hidden;
		background-color: #fff;
		padding: 0 16rpx;
	}

	.item-block-label {
		font-size: 24rpx;
		color: #333;
	}

	.item-block__label {
		flex: 1;
		text-align: left;
		font-size: 32rpx;
		color: #333;
		font-weight: 500;
		// white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.item-block-code {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.item-block-name {
		margin-top: 32rpx;
		margin-bottom: 8rpx;
	}

	.item-block-date {
		margin-top: 12rpx;
		margin-bottom: 48rpx;
	}

	.item-block-label-des {
		flex: 1;
		text-align: left;
		font-size: 28rpx;
		color: #333;
	}

	.block-detal {
		display: flex;
		flex-direction: column;
		background: #f8f8f8;
		border-radius: 20rpx;
		padding: 28rpx 32rpx;
		margin-bottom: 52rpx;
	}

	.block-detal-last {
		margin-bottom: 32rpx;
	}

	.block-detal-item {
		display: flex;
		margin-bottom: 32rpx;
		justify-content: space-between;
	}

	.block-detal-item-last {
		margin-bottom: 0;
	}

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

	.detal-item-value {
		color: #333;
		font-size: 28rpx;
	}

	.loading-more {
		flex: 1;
		align-items: center;
		justify-content: center;
		padding-top: 14px;
		padding-bottom: 14px;
		text-align: center;
	}

	.loading-more-text {
		font-size: 12px;
		color: #999;
	}
</style>
