<template>
	<view class="articleList">
	
		<view v-if="g.length > 0" style="
        height: calc(100vh);
        width: 100%;
        overflow: hidden;
      ">
			<scroll-view :scroll-y="true" @scrolltolower="lower" :enable-back-to-top="true" :enable-flex="true" 
			  style="height: 100%; padding-bottom: 10px;">
				<view class="school-list">
					  <view class="good" v-for="(cx, ci) in g" :key="ci" @click="clickHandler(cx)">
						  
						  <view class="good-r" :style="{'width': (windowWidth -15 - 125 -26)+'px'}">
							  <view class="good-name">
							    {{ cx.Name }}
							  </view>
							  <view class="good-r-b">
								  <text>浏览数{{cx.BrowseNum+cx.FictitiousBrowseNum}}</text>
								  <text style="margin-left: 10px;">{{cx.CommentNum}}留言</text>
							  </view>
						  </view>
						  <view class="good-img">
						    <image mode="aspectFill" :src="cx.ArticlePic" style="width: 100%; height: 100%;border-radius: 4px;" ></image>
						  </view>
					  </view>
				</view>
				<u-loadmore v-if="showLoading" :status="status" :load-text="loadText" :font-size="24" :margin-top="20"
				 :margin-bottom="20" bg-color="#FFF" /> 
				
			</scroll-view>
			
		</view>
		<view v-if="!loading && g.length== 0 " style="
		  height: calc(100vh);
		  width: calc(100vw - 20px);
		  padding-top: 10px;
		">
			<u-empty text="没有找到资讯" font-size="36" mode="list" ></u-empty>
		</view>
		
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				pageTitle:'教育资讯',
				status: "loadmore",
				sortStatus: 1,
				mainColor: "",
				isover: false,
				loading: true,
				page: 1,
				page_count: 1,
				g: [],
				loadText: {
					loadmore: "轻轻上拉，加载更多",
					loading: "努力加载中",
					nomore: "没有更多资讯了",
				},
				showLoading: true,
				sortShowType: 1,
				coupon_id: 0,
				msg: {
					pageIndex: 1,
					pageSize: 10,
				},
				windowWidth:0,
				
			};
		},
		
		onLoad(option) {
			this.mainColor = this.$uiConfig.mainColor;
			this.windowWidth = this.$utils.SystemInfo().windowWidth;
			uni.setNavigationBarTitle({
			  title: this.pageTitle,
			});
		},
		mounted() {
			this.init();
		},
		methods: {
			
			init() {
				this.isover = false;
				this.loading = true;
				
				this.request2({
						url: '/api/AppletSchool/GetArticlePageList',
						data: this.msg
					},
					res => {
						this.loading = false;
						this.isloading = false;
						if (res.resultCode == 1) {
							
							this.g = this.g.concat(res.data.pageData);
							this.page_count = res.data.pageCount;
							if (this.page_count == 1) {
								this.isover = true;
								this.status = "nomore";
							} else {
								this.status = "loadmore";
							}
						}

						uni.hideNavigationBarLoading();
					}
				);
			
			},
			lower(e) {
				if (this.msg.pageIndex < this.page_count) {
					this.status = "loading";
					this.msg.pageIndex++;
					this.init();
				} else {
					this.isover = true;
					this.status = "nomore";
				}
			},
			clickHandler(item){
				uni.navigateTo({ url: "/pages/school/articleDetails?ID=" + item.ID });
			}
			
		},
	};
</script>

<style>
	.articleList {
		height: 100%;
		background: #fff;
		position: relative;
	}

	.articleList .quick {
		right: 50rpx;
		bottom: 50rpx;
		position: absolute;
	}

	.articleList .quick .item {
		background: #fff;
		border: 1px solid #aaa;
		height: 90rpx;
		width: 90rpx;
		color: #333;
		border-radius: 90rpx;
		margin-top: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.articleList .sortbox {
		display: flex;
		background: #fff;
	}

	.articleList .sortbox .item {
		height: 40px;
		line-height: 40px;
		flex: 1;
		text-align: center;
	}
	.school-list  .good{
		background: #fff;
		padding: 10px 13px;
		display: flex;
		flex-direction: row;
		font-family: aa;
		justify-content: space-between;
		
	}
	.school-list .good-img{
		width: 125px;
		height: 70px;
		border-radius: 4px;
		box-shadow:0 4px 10px 1px #D2D2D2;
	}
	.school-list .good-r{
		
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 3px;
	}
	.school-list .good .good-name {
	  /* height: 37px; */
	  overflow: hidden;
	  text-overflow: ellipsis;
	  display: -webkit-box;
	  -webkit-line-clamp: 2;
	  -webkit-box-orient: vertical;
	  margin-bottom: 3px;
	  font-size: 14px;
	  color: #1B1D1E;
	  
	}
	.school-list .good-r-b{
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: 11px;color: #9A9A9A;
		
		
	}
</style>
