<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 in lists" :key='item.NUMBER'>
					<view class="cell-list-block">
						<text class="icon-address">{{item.NAME_ORG1.slice(0,1)}}</text>
						<view class="cell-list-block__content">
							<view class="list-block-item">
								<text class="list-block-item__title1">{{item.NAME_ORG1}} {{item.TEL_NUMBER}}</text>
							</view>
							<view class="list-block-item">
								<text class="list-block-item__label">单位编号</text>
								<text class="list-block-item__value">{{item.PARTNER}}</text>
							</view>
							<view class="list-block-item">
								<text class="list-block-item__label">单位名称</text>
								<text class="list-block-item__value">{{item.NAME_ORG1}}</text>
							</view>
							<view class="list-block-item">
								<image class="icon-arrow" src="@/static/image/address@3x.png" mode="aspectFit">
								</image>
								<text class="list-block-item__desc">{{item.STREET}}</text>
							</view>
						</view>
					</view>
				</cell>
				<cell>
					<view class="loading-more" v-if='lists.length>7'>
						<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 {
		apiAddressSelect
	} from '@/servers/common.js'

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

	const modeMap = {
		'quotaOrder': 'QUOTA',
		'noQuotaOrder': 'NO_QUOTA',
		'groupOrder': 'GGTG',
		'groupBaseInfo': 'GGTG',
	}


	export default {
		components: {
			noData
		},
		data() {
			return {
				loadingText: '加载中...',
				condition: {
					'PARTNER': '',
					'NAME_ORG1': '',
					'C_O_NAME': '',
				},
				page: {
					"PAGE": "1",
					"PAGESIZE": "7",
				},
				loadParams: {
					total: 0,
					totalPage: 1,
					isDone: false,
					isRefresh: false
				},
				lists: [],
				selectedAddress: {},
				toPageParams: {
					page: '',
					head: ""
				}
			}
		},
		computed: {
			navHeight() {
				return {
					'height': `${this.sysinfo.safeArea.top + 44}px`
				}
			},
			...mapState(['sysinfo', 'userInfo'])
		},
		onLoad(option) {
			console.log('select-saleplan', option)
			if (option && option.from) {
				const {
					from,
					head
				} = option
				this.toPageParams.page = from
				this.toPageParams.head = JSON.parse(head)
			}
		},
		onPullDownRefresh() {
			console.log('refresh');
			this.reset()
			this.getAddress(true)
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 600);
		},
		created() {
			// this.condition.PARTNER = this.userInfo.code
			this.reset()
			this.getAddress(true)
		},
		methods: {
			async getAddress(isRefresh) {
				if (this.loadParams.isDone) {
					return
				}

				const {
					PARTNER,
					NAME_ORG1,
					C_O_NAME
				} = this.condition
				const params = {
					...this.page,
					"MODE": modeMap[this.toPageParams.page],
					"INFO": this.toPageParams.head,
					"INPUT": {
						PARTNER,
						NAME_ORG1,
						C_O_NAME
					}
				}

				uni.showLoading({
					title: '加载中'
				});
				setTimeout(function() {
					uni.hideLoading();
				}, 2000);
				const res = await apiAddressSelect(params)
				uni.hideLoading();

				const {
					DATA,
					TOTAL
				} = res
				this.loadParams.total = TOTAL
				this.loadParams.totalPage = Math.ceil(TOTAL * 1 / this.page.PAGESIZE * 1)

				const dataMap = DATA && DATA.map((item) => {
					item.checked = false
					return item
				})

				if (isRefresh) {
					this.lists = dataMap
					this.loadParams.isDone = false
				} else {
					this.lists = this.lists.concat(dataMap)
				}
			},
			scrolltolower() {
				console.log('onReachBottom');
				if (this.page.PAGE < this.loadParams.totalPage) {
					this.page.PAGE++
					this.getAddress()
				} else {
					this.loadParams.isDone = true
					this.loadingText = '-- 到底了 --'
				}
			},
			reset() {
				this.loadParams = {
					total: 0,
					totalPage: 1,
					isDone: false,
					isRefresh: false
				}
				this.page.PAGE = 1
				this.lists = []
				this.loadingText = '加载中'
			},
			handleChecked(item) {
				this.selectedAddress = item
				uni.$emit('selectedAddress', {
					selectedAddress: item
				})
				uni.navigateBack()
			},
			loadMore() {
				this.reset()
				this.getAddress(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;
	}

	.cell-list {
		flex: 1;
		flex-direction: column;
		background: #f0f4f5;
	}

	.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;
		align-items: center;
		margin-bottom: 16rpx;
	}

	.list-block-item__title1 {
		color: #333;
		font-weight: 500;
		font-size: 32rpx;
	}

	.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;
		margin-bottom: 16rpx;
		background: #fff;
		border-radius: 8px;
		padding: 32rpx 36rpx 32rpx 16rpx;
		align-items: center;
	}

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