<template>
	<view class="commentPageList">
	
		<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 style="font-family: aa;">
						  <view class="comlist" v-for="(cx, ci) in g" :key="ci">
							  <view style="width: 100%;display: flex;flex-direction: row;align-items: center;justify-content: space-between;">
								  <view style="display: flex;flex-direction: row;align-items: center">
									  <u-avatar :src="cx.UserPhotoPath" size="50" ></u-avatar>
									  <text style="font-size: 13px;color: #121212;margin-left: 5px;width: calc(100vw - 165px);
										overflow: hidden;
									    text-overflow: ellipsis;
									    display: -webkit-box;
									    -webkit-line-clamp: 1;
									    -webkit-box-orient: vertical;">{{cx.UserName}}</text>
								  </view>
								  <text style="font-size: 11px;color: #9A9A9A;">{{cx.CreateDate}}</text>
							  </view>
							  <view style="width: 100%;margin-top: 15px;font-size: 11px;color: #121212;">
								  {{cx.Content}}
							  </view>
							  <view class="comment-dao" style="flex-wrap: wrap;margin-top: 5px;" v-if="cx.CommentImgList.length>0">
							  	<image
							  	v-for="(item, index) in cx.CommentImgList" :key="index"
							  	  mode="aspectFill"
							  	  :src="item"
									@click="previewImage2(index,cx.CommentImgList)"
							  	  :style="{'width':san,'height':san}"
							  	/>
							  </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",
				
				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,
					CommentGrade:0,
					ArticleId:0,
				},
				windowWidth:0,
				san:'100px',
				
			};
		},
		
		onLoad(options) {
			this.mainColor = this.$uiConfig.mainColor;
			this.windowWidth = this.$utils.SystemInfo().windowWidth;
			this.san = (this.windowWidth-20)/3+'px';
			console.log(this.san)
			if(options && options.ID){
				this.msg.ArticleId = options.ID;//资讯id
				this.init();
				
			}
			uni.setNavigationBarTitle({
			  title: this.pageTitle,
			});
		},
		mounted() {

		},
		methods: {
			
			init() {
				this.isover = false;
				this.loading = true;
				
				this.request2({
						url: '/api/AppletSchool/GetArticleCommentPageList',
						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";
				}
			},
			//图片预览
			previewImage2(index, images) {
			  uni.previewImage({
				urls: images,
				current: index,
			  });
			},
			
		},
	};
</script>

<style>
	.commentPageList {
		height: 100%;
		background: #fff;
		position: relative;
	}
	.commentPageList .comlist{
		padding: 10px;
		width: 100%;
		
	}
	.commentPageList .comment-dao{
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		
	}
</style>
