<template>
	<view class="commentList" :style="{ height: contentHeight }">
		<u-tabs name="name" :list="list" :is-scroll="false" :current="current" @change="change" :active-color="mainColor"></u-tabs>
		<u-empty v-if="g.length == 0" text="暂无评论" mode="list"></u-empty>
		<view v-if="g.length > 0" style="
        height: calc(100vh - 50px);
        width: calc(100vw);
        overflow: hidden;">
			<scroll-view :scroll-y="true" :enable-back-to-top="true" :enable-flex="true" @scrolltolower="lower" :style="{ height: '100%' }">
				<view class="comment u-skeleton-rect">
					<view class="content" v-for="(item, index) in g" :key='index'>
					  <view class="u-box">
					    <view class="user">
					      <u-avatar :src="item.UserPhotoPath" :size="50"></u-avatar>
					      <text style="margin:0 10px;overflow: hidden; white-space: nowrap;max-width: 200rpx;text-overflow: ellipsis;margin-bottom: 2px;">{{ item.UserName }}</text>
							  <u-rate
							    :current="item.CommentScore"
							    active-color="#FFC86D"
							    inactive-color="#b2b2b2"
							    active-icon="star"
							    inactive-icon="star-o"
							    size="26"
							  	:disabled="true"
							  ></u-rate>
					    </view>
					    <view class="timer">{{ item.CreateDate }}</view>
					  </view>
					  <view class="ucontent" style="line-height: 22px;">{{ item.Content }}</view>
					  <view class="plimg">
							<image v-for="(x, j) in item.CommentImgList" :key="j" class="plimg-item" mode="aspectFill" :src="x"
							   @click="previewImage2(j,item.CommentImgList)" :style="{'width':san,'height':san}" />
						  
					  </view>
					  <view class="reply" v-if="item.Reply && item.Reply!=''">
						  <view style="font-size: 12px;color: #121212;">回复:</view>
						  <view style="font-size: 12px;color: #9A9A9A;margin-top: 3px;">{{item.Reply}}</view>
					  </view>
					</view>
				</view>
				<u-loadmore :status="status" :load-text="loadText" :font-size="24" :margin-top="20" :margin-bottom="20" bg-color="#f3f4f6" />
			</scroll-view>
		</view>
		<!-- 加载中 -->
		<view class="loading" v-if="loading">
			<u-loading mode="flower" size="48">></u-loading>
			<Text style="color: #fff; margin-top: 10rpx;">加载中...</Text>
		</view>
		<!-- 取消提示 -->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageTitle: "评论",
				current: 0,
				list: [
				],
				msg: {
					pageIndex: 1,
					pageSize: 10,
					CommentGrade: 0,
					GoodsId: 0,
					StoreId:0,
					ServicePersonalId:0,
				},
				mainColor: "",
				secondary: '',
				contentHeight: 0,
				page: 1,
				page_count: 1,
				g: [],
				loading: false,
				san: '100px',
				status: "loadmore",
				loadText: {
					loadmore: "轻轻上拉，加载更多",
					loading: "努力加载中",
					nomore: "没有更多了",
				},
			};
		},
		created() {
			this.contentHeight = this.$utils.calcContentHeight(-40) + "px";
			this.mainColor = this.$uiConfig.mainColor;
			this.secondary = this.$uiConfig.secondary;
		},
		mounted() {
			uni.setNavigationBarTitle({
				title: this.pageTitle,
			});
			let that = this
			uni.getSystemInfo({
				success(res) {
					that.san = (res.windowWidth - 30 - 9) / 3 + 'px'
				}
			})
		},
		onLoad(options) {
			if (options ) {
				if(options.GoodsId){
					this.msg.GoodsId = options.GoodsId;
				}
				if(options.StoreId){
					this.msg.StoreId = options.StoreId;
				}
				if(options.ServicePersonalId){
					this.msg.ServicePersonalId = options.ServicePersonalId;
				}
				this.getAppletGoodsCommentStatistics(); //获取商品评论数
			}
		},
		methods: {
			
			//图片预览
			previewImage2(index, images) {
				uni.previewImage({
					urls: images,
					current: index,
				});
			},
			change(index) {
				this.current = index;
				this.msg.CommentGrade = this.list[index].Id
				this.msg.pageIndex = 1;
				this.g = [];
				this.loading = true;
				this.init();
			},
		
			init() {
				this.loading = true;
				this.request2({
						url: '/api/AppletStores/GetAppletGoodsCommentPageList',
						data: this.msg
					},
					res => {
						if (res.resultCode == 1) {
							this.loading = false;
							this.g = this.g.concat(res.data.pageData);
							this.page_count = res.data.pageCount;
							if (this.page_count == 1) {
								this.status = "nomore";
							}
						}
					}
				);
			},
			getAppletGoodsCommentStatistics() {
				this.request2({
						url: "/api/AppletStores/GetAppletGoodsCommentStatistics",
						data: {
							GoodsId: this.msg.GoodsId,
							StoreId:this.msg.GoodsId==0 && this.msg.ServicePersonalId==0?this.msg.StoreId:0,
							ServicepersonalId:this.msg.ServicePersonalId,
						},
					},
					(res) => {
						let data = res.data.List
						data.forEach(x => {
							x.name = x.Name + '(' + x.Count + ')'
						})
						data.unshift({
							name: '全部',
							Id: 0
						})
						this.list = data
						this.msg.CommentGrade = data[0].Id
						this.init();
					}
				);
			},
			lower(e) {
				if (this.msg.pageIndex < this.page_count) {
					this.msg.pageIndex++;
					this.status = "loading";
					this.init();
				} else {
					this.status = "nomore";
				}
			},
		},
	};
</script>
<style>
	.commentList {
		width: 100%;
		height: 100%;
		background: #f3f4f6;
	}

	.commentList .loading {
		width: 200rpx;
		height: 200rpx;
		background: #000000;
		opacity: 0.7;
		border-radius: 10rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: fixed;
		left: 50%;
		top: 30%;
		margin-left: -100rpx;
		z-index: 999;
	}

	.commentList .interDList {
		width: 100%;
		padding: 20px 15px;
		display: flex;
		flex-direction: column;
		background: #fff;
		margin-top: 10px;
	}
	.commentList .comment {
	  background: #fff;
	  font-family: aa;
	    padding: 15px;
	}
	.commentList .comment .content {
	  display: flex;
	  flex-direction: column;
	  
	  margin-bottom: 15px;
	}
	.commentList .comment .content .u-box {
	  display: flex;
	  margin-bottom: 10px;
	  align-items: center;
	}
	.commentList .comment .content .u-box .user {
	  flex: 1;
	  font-size: 13px;
	  color: #111111;
	  font-weight: bold;
	  align-items: center;
	  display: flex;
	}
	.commentList .comment .content .u-box .timer {
	  font-size: 12px;
	  color: #999999;
	  text-align: right;
	  
	}
	.commentList .comment .content .u-box .ucontent {
	  font-size: 11px;
	  color: #000;
	  margin-top: 10px;
	}
	.commentList .comment .content .u-box .plimg{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		margin-top: 10px;
	}
	.commentList  .plimg-item{
		margin-right: 3px;
		/* margin-bottom: 3px; */
	}
	.commentList .reply{
		width: 100%;
		padding: 10px;
		background: #F5F6F7;
		border-radius: 3px;
		margin-top: 10px;
		
	}

</style>