<template>
	<view class="guidercarCommentList" :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="interDList" v-for="(x, i) in g" :key="i">
					<view class="comment-dao" style="justify-content: space-between;">
						<view style="display: flex;flex-direction: row;align-items: center;">
							<u-avatar :src="x.UserPhotoPath" :size="50"></u-avatar>
							<span style='font-size: 14px;color: #000000;width: 200rpx; margin-left: 10px;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						font-weight: bold;'>
								{{x.UserName}}
							</span>
						</view>
						<span style='font-size: 12px;color: #AAAAAA;'>{{x.CommentList[0].CreateDate}}</span>
					</view>
					<view class="comment-dao">
						<u-rate :current="x.CommentList[0].CommentScore" active-color="#FF4442" inactive-color="#b2b2b2" active-icon="star"
						 inactive-icon="star-o" size="20" :disabled="true"></u-rate>
						<span style='font-size: 11px;color: #565656;margin-left: 15px;'>导游:{{x.CommentList[1].GuideName}}</span>
					</view>
					<view class="comment-dao" style="padding: 10px 0;">
						<span>{{x.CommentList[1].Content}}</span>
					</view>
					<view class="comment-dao" style="flex-wrap: wrap;">
						<image v-for="(item, index) in x.CommentList[1].CommentImgList" :key="index" mode="aspectFill" :src="item" @click="previewImage(index,x.CommentList[1].CommentImgList)"
						 :style="{'width':san,'height':san}" />
					</view>
					<view style="width: 100%;height: 1px;background: rgba(0, 0, 0, 0.1);margin: 10px 0;"></view>
					<view class="comment-dao">
						<u-rate :current="x.CommentList[0].CommentScore" active-color="#FF4442" inactive-color="#b2b2b2" active-icon="star"
						 inactive-icon="star-o" size="20" :disabled="true"></u-rate>
						<span style='font-size: 11px;color: #565656;margin-left: 15px;'>{{x.CommentList[0].CarBrandName}},{{x.CommentList[0].CarColorName}}</span>
					</view>
					<view class="comment-dao" style="padding: 10px 0;">
						<span>{{x.CommentList[0].Content}}</span>
					</view>
					<view class="comment-dao" style="flex-wrap: wrap;">
						<image v-for="(item, index) in x.CommentList[0].CommentImgList" :key="index" mode="aspectFill" :src="item" @click="previewImage(index,x.CommentList[0].CommentImgList)"
						 :style="{'width':san,'height':san}" />
					</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: {
					GoodsId: 0,
					pageIndex: 1,
					pageSize: 10,
					CommentGrade: 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) / 3 + 'px'
				}
			})
		},
		onLoad(options) {
			if (options && options.GoodsId) {
				this.msg.GoodsId = options.GoodsId;
				this.getAppletGoodsCommentStatistics(); //获取商品评论数
			}
		},
		methods: {
			change(index) {
				this.current = index;
				this.msg.CommentGrade = this.list[index].Id
				this.msg.pageIndex = 1;
				this.g = [];
				this.loading = true;
				this.init();
			},
			previewImage(index, images) {
				uni.previewImage({
					urls: images,
					current: index,
				});
			},
			init() {
				this.loading = true;
				this.request2({
						url: '/api/AppletGuideCar/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/AppletGuideCar/GetAppletGoodsCommentStatistics",
						data: {
							GoodsId: this.msg.GoodsId
						},
					},
					(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>
	.guidercarCommentList {
		width: 100%;
		height: 100%;
		background: #f3f4f6;
	}

	.guidercarCommentList .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;
	}

	.guidercarCommentList .interDList {
		width: 100%;
		padding: 20px 15px;
		display: flex;
		flex-direction: column;
		background: #fff;
		margin-top: 10px;
	}

	.guidercarCommentList .comment-dao {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
</style>