<template>
	<view class="container">
<!-- 		<view class="search-wrapper">
			<u-search :showAction="true" actionText="搜索" :animation="true" v-model="where.keywords" @search="onSearch"></u-search>
		</view> -->
		<view class="user-list">
			<u-list @scrolltolower="scrolltolower">
				<view class="list">
					<u-list-item v-for="(item, index) in list" :key="index">
						<u-cell
							@click="navTo('/pages/article/detail/detail',{id: item.articleId})">
							<u-avatar slot="icon" size="50" :src="item.image ? `https://file.wsdns.cn/thumbnail${item.image}` : item.userAvatar" shape="square"
								customStyle="margin: -3px 5px -3px 0"></u-avatar>
							<view slot="title">{{ item.title }}</view>
						</u-cell>
					</u-list-item>
					<u-empty
							v-if="list.length == 0"
					        mode="search"
					        icon="http://cdn.uviewui.com/uview/empty/search.png"
					>
					</u-empty>
				</view>
			</u-list>
		</view>
	</view>
</template>

<script>
	import * as ArticleApi from '@/api/article.js'

	export default {
		data() {
			return {
				list: [],
				page: 0,
				where: {},
				// 控制onShow事件是否刷新订单列表
				canReset: false,
				disabled: false
			}
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			this.where = options
			this.onRefreshList()
		},

		methods: {
			// 刷新会员列表
			onRefreshList() {
				const app = this
				app.where.page = app.page
				app.where.categoryId = 55
				return new Promise((resolve, reject) => {
					ArticleApi.pageArticle(app.where)
						.then(result => {
							const list = result.data.list
							console.log("list: ",list);
							// 合并新数据
							app.list = app.list.concat(list)
							console.log("app.list: ",app.list);
							if(result.data.count > app.list.length){
								app.canReset = true
							}else{
								app.canReset = false
							}
							resolve(list)
						})
				})
			},
			scrolltolower(e){
				console.log("e: ",e);
			},
			navTo(url,userId){
				this.$push(url,userId)
			},
			onFollow(e){
				console.log("e11: ",e);
			},
			onSearch(){
				this.list = []
				this.where.page = 1
				this.onRefreshList()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 0rpx;
		background-color: #ffffff;
	}

	.search-wrapper {
		display: flex;
		height: 64rpx;
	}
	.user-list{
		margin: 0rpx auto;
	}

	.follow-btn {
		padding: 4rpx 20rpx;
		color: #ffffff;
		font-size: 26rpx;
		border-radius: 50rpx;
		margin-right: 10rpx;
		background: linear-gradient(#47076b, #8d1a50);

		image {
			width: 24rpx;
			height: 66rpx;
			margin-right: 6rpx;
		}
	}

</style>
