<template>
	<view class="comment-list">
		<u-tabs name="name" :list="list" :is-scroll="false" :is-wrap="true" :active-color="mc" :current="current"
			:activeItemStyle="activeItemStyle" :height="60" @change="tabsChange"></u-tabs>
		<view class="comment-details" style="heigh: calc(100% - 40px);" v-if="comments.length>0">
			<scroll-view :scroll-y="true" @scrolltolower="lower" :enable-back-to-top="true" :enable-flex="true"
				style="height: 100%; padding-bottom: 0px;">
				<view class="comment">
					<view class="content" v-for="(x, i) in comments" :key="i">
						<view class="u-box">
							<view class="user">
								<u-avatar :src="x.UserPhotoPath" :size="50"></u-avatar>
								<text
									style="margin:0 10px; overflow: hidden;white-space: nowrap;text-overflow: ellipsis;max-width: 130px;">{{ x.UserName }}</text>
								<u-rate :current="x.CommentScore" active-color="#FA3534" inactive-color="#b2b2b2"
									active-icon="star" inactive-icon="star-o" size="20" :disabled="true"></u-rate>
							</view>
							<view class="timer">{{ x.CreateDate }}</view>
						</view>
						<view class="ucontent">{{ x.Content }}</view>
						<view class="imagebox" v-for="(y, yi) in x.formatPic" :key="yi">
							<view class="item" v-for="(z, zi) in y" :key="zi"
								:style="{ 'max-width': yi == 0 ? 'unset' : '31.9%' }">
								<view class="scal" @click="previewImage(zi,yi,x.CommentImgList)">
									<image :src="z" mode="aspectFill" class="image" />
									<view class="more" v-if="
                      x.pic_url.length > 4 &&
                      (yi + 1) * (zi + 1) == x.pic_url.length
                    ">
										<view style="width: 100%;">
											<view class="big">5图</view>\n\r
											<view class="small">查看全部</view>
										</view>
									</view>
								</view>
							</view>
						</view>

						<view class="reply" v-if="x.Reply!=''">
							<view style="font-size: 12px;color: #121212;">回复:</view>
							<view style="font-size: 12px;color: #9A9A9A;margin-top: 3px;">{{x.Reply}}</view>
						</view>
					</view>
				</view>
				<u-loadmore :status="status" :load-text="loadText" :font-size="24" :margin-top="20" :margin-bottom="20"
					bg-color="#fff" />
			</scroll-view>
		</view>
		<u-empty text="没有找到相关评论" mode="news" v-else></u-empty>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				page: 1,
				pageCount: 0,
				id: 0,
				comments: [],
				commentCount: [],
				loading: false,
				mc: "",
				pageTitle: "全部评论",
				status: "loadmore",
				isover: false,
				list: [],
				loadText: {
					loadmore: "轻轻上拉，加载更多",
					loading: "努力加载中",
					nomore: "没有更多评论了",
				},
				msg: {
					pageIndex: 1,
					pageSize: 20,
					GoodsId: 0,
					CommentGrade: 0,
					CommentLabelId: 0,

				},
				activeItemStyle:{
					'flex-wrap': 'wrap',
					'font-weight': '500'
				}
			};
		},
		onLoad(option) {
			uni.showNavigationBarLoading();
			this.id = option.id || 46942;
			this.mc = this.$uiConfig.mainColor;

			this.initPage();
			this.getCommentStatistics()
		},
		methods: {
			previewImage(i, i2, images) {
				let current = (i2) * 3 + i
				uni.previewImage({
					urls: images,
					current: current,
					longPressActions: {
						itemList: ["发送给朋友", "保存图片", "收藏"],
						success: function(data) {
							console.log(
								"选中了第" +
								(data.tapIndex + 1) +
								"个按钮,第" +
								(data.index + 1) +
								"张图片"
							);
						},
						fail: function(err) {
							console.log(err.errMsg);
						},
					},
				});
			},
			initPage() {
				let currentPages = getCurrentPages();
				let u = "/" + currentPages[currentPages.length - 1].route;
				let pages = uni.getStorageSync("basedata") ?
					uni.getStorageSync("basedata").bar_title : [];
				pages.forEach((x) => {
					if (x.value == u) {
						this.pageTitle = x.new_name ? x.new_name : x.name;
					}
				});
				uni.setNavigationBarTitle({
					title: this.pageTitle,
				});
			},
			getCommentStatistics() {
				this.request2({
						url: "/api/AppletOrder/GetAppletGoodsCommentStatistics",
						data: {
							GoodsId: this.id
						},
					},
					(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.msg.CommentLabelId = 0
						this.init();
					}
				);
			},
			init() {
				this.isover = false;
				this.loading = true;
				this.showLoading = this.page != 1;
				this.msg.GoodsId = this.id;
				this.request2({
						url: "/api/AppletOrder/GetAppletGoodsCommentPageList",
						data: this.msg,
					},
					(res) => {
						this.comments = res.data.pageData;
						this.comments.forEach((x) => {
							x.formatPic = this.formatPic(x.CommentImgList);
						});
						//TODO 缺陷待处理
						// this.commentCount = res.data.comment_count;
						this.commentCount = res.data.pageData;
						this.pageCount = Math.ceil(
							// parseFloat(this.commentCount[0].count) / 10.0
							parseFloat(res.data.count) / 10.0

						);
						this.commentCount.forEach((x) => {
							x.name = x.UserName + "(" + x.Content + ")";
						});
						this.showLoading = true;
						if (this.pageCount == 1) {
							this.isover = true;
							this.status = "nomore";
						} else {
							this.status = "loadmore";
						}
						this.loading = false;
						uni.hideNavigationBarLoading();
					}
				);
			},
			formatPic(pics) {
				let arr = [];
				let temp = [];
				pics.forEach((x, i) => {
					temp.push(x);
					if (i == 2) {
						arr.push(temp);
						temp = [];
					} else if (i == 5) {
						arr.push(temp);
						temp = [];
					} else if (i == pics.length - 1) {
						arr.push(temp);
					}
				});
				return arr;
			},
			tabsChange(index) {
				this.current = index;
				this.msg.pageIndex = 1;
				if (this.list[index].Type == 1) {
					this.msg.CommentGrade = this.list[index].Id
					this.msg.CommentLabelId = 0

				} else if (this.list[index].Type == 2) {
					this.msg.CommentLabelId = this.list[index].Id
					this.msg.CommentGrade = 0
				}

				this.init()
				this.page = 1
			},
			lower(e) {
				if (this.page < this.pageCount) {
					if (!this.loading) {
						this.status = "loading";
						this.page++;
						this.init();
					}
				} else {
					this.isover = true;
					this.status = "nomore";
				}
			},
		},
	};
</script>
<style>
	.comment-list {
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		font-family: aa;
	}
	
	.comment-list .comment-details {
		height: calc(100% - 40px);
		padding: 10px 0 0 0;
	}

	.comment-list .comment-details .comment {
		/* margin: 10px 0;
  background: #fff;

  padding: 10px; */
	}

	.comment-list .comment-details .comment .chead {
		padding-bottom: 10px;
		border-bottom: 1px solid #f1f1f1;
	}

	.comment-list .comment-details .comment .content {
		display: flex;
		flex-direction: column;
		margin-bottom: 10px;
		padding: 10px;
		background: #fff;
	}

	.comment-list .comment-details .comment .content .u-box {
		display: flex;
		margin-bottom: 10px;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;

	}

	.comment-list .comment-details .comment .content .u-box .user {
		flex: 1;
		font-size: 12px;
		color: gray;
		align-items: center;
		display: flex;
	}

	.comment-list .comment-details .comment .content .u-box .timer {
		font-size: 12px;
		color: gray;
		text-align: right;
		flex: 1;
	}

	.comment-list .comment-details .comment .content .u-box .ucontent {
		font-size: 12px;
		color: #000;
		margin-top: 10px;
	}

	.comment-list .comment-details .comment .content .imagebox {
		display: flex;
		/* justify-content:space-evenly; */
		margin-right: -5px;
		margin-bottom: -5px;
		margin-top: 5px;
		/* flex-wrap: wrap; */
	}

	.comment-list .comment-details .comment .content .imagebox .item {
		flex: 1;
		max-width: 70vw;
		margin-right: 5px;
		margin-bottom: 5px;
		min-width: 31.9%;
	}

	.comment-list .comment-details .comment .content .imagebox .item .scal {
		width: 100%;
		padding-bottom: 100%;
		height: 0;
		position: relative;
		overflow: hidden;
	}

	.comment-list .comment-details .comment .content .imagebox .item .scal .image {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 1;
		height: 100%;
	}

	.comment-list .comment-details .comment .content .imagebox .item:first-child .scal {
		border-top-left-radius: 5px;
		border-bottom-left-radius: 5px;
	}

	.comment-list .comment-details .comment .content .imagebox .item:last-child .scal {
		border-top-right-radius: 5px;
		border-bottom-right-radius: 5px;
	}

	.comment-list .comment-details .comment .content .imagebox .item .scal .more {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 2;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		color: #fff;
		display: flex;
		align-items: center;
	}

	.comment-list .comment-details .comment .content .imagebox .item .scal .more .big {
		font-size: 18px;
		font-weight: 500;
		text-align: center;
		margin-bottom: 5px;
	}

	.comment-list .comment-details .comment .content .imagebox .item .scal .more .small {
		font-size: 14px;
		text-align: center;
	}

	.comment-list .reply {
		width: 100%;
		padding: 10px;
		background: #F5F6F7;
		border-radius: 3px;
		margin-top: 10px;

	}

	/deep/ .comment-list .u-tab-item {
		margin: 5px;
		padding: 5px 10px !important;
		  background-color: #f5f5f5;
		 /* border: 1px solid #ddd; */
		  border-radius: 42px;
		  font-size: 12px !important;
		  color: #666;
		  height:auto !important;
		  flex: unset !important;
	}
	/deep/ .comment-list .u-tabs-scorll-flex{
		justify-content: unset !important;
		padding: 5px 10px !important;
	}
</style>