<template>
	<view class="order view">
		<view class="status_bar" :style="navHeight"></view>
		<view class="listview">
			<list class="cell-list" v-if="lists.length > 0" :show-scrollbar='false' loadmoreoffset='100'
				@loadmore="scrolltolower">
				<cell @click="handleChecked(item)" v-for="(item,index) in lists" :key='index'>
					<view class="cell-list-block">
						<view class="cell-list-block__content">
							<view class="list-block-item">
								<text class="list-block-item__title1">{{item.bankName}} {{item.accountNumber}}</text>
								<text class="list-block-item__label">开户名：{{item.accountName}}</text>
								<text class="list-block-item__label">pk：{{item.pk}}</text>
							</view>
						</view>
					</view>
				</cell>
				<cell>
					<view class="loading-more" v-if='lists.length>15'>
						<text class="loading-more-text">{{loadingText}}</text>
					</view>
				</cell>
			</list>
			<no-data class="no-data" v-else @retry="loadMore"></no-data>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'

	import {
		apiGetSalesAreaAccountList
	} from '@/servers/breakwords.js'

	import noData from '@/components/nodata.nvue';

	export default {
		components: {
			noData
		},
		data() {
			return {
				loadingText: '加载中...',
				condition: {},
				loadParams: {
					total: 0,
					totalPage: 1,
					isDone: false,
					isRefresh: false
				},
				page: {
					"currentpage": "1",
					"pagesize": "15",
				},
				lists: [],
				selectedSalesAreaAccountInfo: {},
				toPageParams: {
					keywords: '',
				}
			}
		},
		computed: {
			navHeight() {
				return {
					'height': `${this.sysinfo.safeArea.top + 44}px`
				}
			},
			...mapState(['sysinfo'])
		},
		onLoad(option) {
			console.log('select-saleplan', option)
			if (option && option.keywords) {
				const {
					keywords
				} = option
				this.toPageParams.keywords = keywords || ''
			}
		},
		onPullDownRefresh() {
			console.log('refresh');
			this.reset()
			this.getSalesAreaAccountList()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 600);
		},
		created() {
			this.reset()
			this.getSalesAreaAccountList()
		},
		methods: {
			async getSalesAreaAccountList(isRefresh) {
				if (this.loadParams.isDone) {
					return
				}

				uni.showLoading({
					title: '加载中'
				});
				setTimeout(function() {
					uni.hideLoading();
				}, 2000);
				const params = {
					salesAreaCode: this.toPageParams.keywords,
					...this.page
				}
				const res = await apiGetSalesAreaAccountList(params)
				uni.hideLoading();

				const {
					totalNumberOfResults,
					numberOfPages
				} = res.data.pagination
				this.loadParams.total = totalNumberOfResults
				this.loadParams.totalPage = numberOfPages

				if (isRefresh) {
					this.lists = res.data.detail
					this.loadParams.isDone = false
				} else {
					this.lists = this.lists.concat(res.data.detail)
				}
			},
			scrolltolower() {
				console.log('onReachBottom');
				if (this.page.currentpage < this.loadParams.totalPage) {
					this.page.currentpage++
					this.getSalesAreaAccountList()
				} else {
					this.loadParams.isDone = true
					this.loadingText = '-- 到底了 --'
				}
			},
			reset() {
				this.loadParams = {
					total: 0,
					totalPage: 1,
					isDone: false,
					isRefresh: false
				}
				this.page.currentpage = 1
				this.lists = []
				this.loadingText = '加载中'
			},
			handleChecked(item) {
				this.selectedSalesAreaAccountInfo = item
				uni.$emit('selectSalesAreaAccountInfo', {
					selectedSalesAreaAccountInfo: item
				})
				uni.navigateBack()
			},
			loadMore() {
				this.reset()
				this.getSalesAreaAccountList(true)
			}
		}
	}
</script>

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

	/* #ifndef APP-PLUS */
	page {
		width: 100%;
		min-height: 100%;
		display: flex;
		background: #fff;
	}

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

	/* #endif */

	.order {
		flex: 1;
		background: #f0f4f5;
	}

	.listview {
		flex: 1;
		flex-direction: column;
		padding: 16rpx;
		border-radius: 8px;
	}

	.cell-list {
		flex: 1;
		flex-direction: column;
		background: #fff;
		padding: 0 50rpx 40rpx 50rpx;
	}

	.icon-address {
		width: 88rpx;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		background: #fff4f4;
		font-size: 28rpx;
		color: #ff1d32;
		font-weight: 500;
		border-radius: 50%;
		margin-right: 32rpx;
	}

	.cell-list-block__content {
		display: flex;
		flex: 1;
		flex-direction: column;
	}

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

	.list-block-item__title1 {
		color: #333;
		font-weight: 400;
		font-size: 28rpx;
		margin-bottom: 4px;
	}

	.list-block-item__label {
		color: #999999;
		font-size: 24rpx;
		margin-right: 16rpx;
	}

	.list-block-item__value {
		color: #333333;
		font-size: 12px;
	}

	.cell-list-block__desc {
		color: #333;
		font-size: 12px;
	}

	.icon-arrow {
		width: 18rpx;
		height: 22rpx;
		margin-right: 28rpx;
	}

	.list-block-item__desc {
		font-size: 24rpx;
		color: #333;
	}

	.cell-list-block {
		display: flex;
		flex: 1;
		height: 140rpx;
		background: #fff;
		align-items: center;
		border-bottom: 1px solid #f4f5f6;
	}

	.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>
