<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.zcode'>
					<view class="cell-list-block">
						<view class="cell-list-block__content">
							<view class="list-block-item">
								<text class="list-block-item__title1">{{item.zzfld000098}}</text>
							</view>
						</view>
					</view>
				</cell>
				<cell>
					<view class="loading-more" v-if='lists.length>14'>
						<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 {
		apiGetPengmaInfo
	} from '@/servers/groupOrder.js'

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

	export default {
		components: {
			noData
		},
		data() {
			return {
				loadingText: '加载中...',
				condition: {},
				loadParams: {
					total: 0,
					totalPage: 1,
					isDone: false,
					isRefresh: false
				},
				lists: [],
				selectedPaintDesign: {},
				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.getPengmaInfo()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 600);
		},
		created() {
			this.getPengmaInfo()
		},
		methods: {
			async getPengmaInfo(isRefresh) {

				uni.showLoading({
					title: '加载中'
				});
				setTimeout(function() {
					uni.hideLoading();
				}, 2000);
				const res = await apiGetPengmaInfo()
				uni.hideLoading();
				this.lists = res.info

				this.loadingText = '-- 到底了 --'

			},
			scrolltolower() {

			},
			handleChecked(item) {
				this.selectedPaintDesign = item
				uni.$emit('selectedPaintDesign', {
					selectedPaintDesign: item
				})
				uni.navigateBack()
			},
			loadMore() {
				// this.getPengmaInfo()
			}
		}
	}
</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;
		align-items: center;
	}

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

	.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: 100rpx;
		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>
