<template>
	<view class="productEvaluation">
		<div class="productEvaluationHeader">
			<u-search placeholder="搜索评价内容、昵称等..." v-model="field" @search="search" :showAction="false"></u-search>
			<div class="searchBoxW">
				<view class="searchBox" @click="isShowStartTime = true">
					<!-- <input type="text" :disabled="true" placeholder="开始时间-结束时间"
						:value="(beginTime && endTime)?(beginTime +' - ' +endTime):''" /> -->
					<view class="txt">{{(beginTime && endTime)?(beginTime +' - ' +endTime):'开始时间-结束时间'}}</view>
				</view>
				<text @click="reset">重置</text>
				<text @click="search">筛选</text>
			</div>
		</div>


		<div class="userReviews">
			<div class="userReviewsTitle">
				<image class="userContentIcon" src="/static/userContentIcon.png" mode=""></image>
				<text>用户评价({{total}})</text>
			</div>

			<div class="userReviewsList">
				<div class="userReviewsItem" @click="goPage(item)" v-for="(item,index) in dataList" :key="index">
					<div class="userReviewsItemHeader">
						<image class="avatar" :src="item.avatarUrl" mode=""></image>
						<div class="userReviewsItemHeaderR">
							<div class="name">
								{{item.nickName}}
							</div>
							<div class="time">
								{{item.createTime}}
							</div>
						</div>
					</div>

					<div class="content">
						{{item.commentContent}}
					</div>

					<div class="imgList">
						<image @click.stop="previewImage(item.commentImageList,ite)"
							v-for="(ite,ind) in item.commentImageList" :key="ind" :src="ite" mode=""></image>
					</div>

					<div class="replyBox" style="border-radius: 8rpx 8rpx 8rpx 8rpx;" v-if="item.replyListList.length">
						<div v-for="(it,i) in item.replyListList" :key="i">
							<view style="font-size: 24rpx;color: #999999;margin-bottom: 10rpx;">我的回复({{it.createTime}})
							</view>
							<view style="font-size: 24rpx;color: #666666;">{{it.commentContent}}</view>
						</div>
					</div>

					<div class="replyBox" v-else>
						<input disabled type="text" :placeholder="':回复'+(item.nickName?item.nickName:'')" />
					</div>
				</div>
			</div>
		</div>

		<u-datetime-picker v-model="currenTime" title="选择开始时间" @close="closeIsShow" @cancel="closeIsShow" @confirm="confirmStart"
			ref="datetimePicker" :show="isShowStartTime" :maxDate="minDate" mode="date"
			:formatter="formatter"></u-datetime-picker>
		<u-datetime-picker v-model="currenTime" title="选择结束时间" @close="closeIsShow" @cancel="closeIsShow" @confirm="confirmEnd"
			ref="datetimePicker" :show="isShowEndTime" :maxDate="minDate" mode="date"
			:formatter="formatter"></u-datetime-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				field: '',
				id: '',
				beginTime: "",
				endTime: "",
				dataList: [],
				pageNum: 1,
				total: 0,
				isShowStartTime: false,
				isShowEndTime: false,
				minDate: Number(new Date()),
				currenTime:Number(new Date())
			}
		},

		onLoad(op) {
			this.id = op.id
			this.getcommentList();
		},

		onShow() {
			this.pageNum = 1
			this.getcommentList();
		},

		onReachBottom() {
			if (this.total > this.dataList.length) {
				this.pageNum = this.pageNum + 1
				this.getcommentList(true)
			} else {
				wx.showToast({
					title: '没有更多啦！',
					icon: 'none'
				})
			}
		},

		methods: {
			
			reset(){
				this.field = ''
				this.beginTime = ''
				this.endTime = ''
				this.pageNum = 1
				this.getcommentList()
			},
			
			search() {
				this.pageNum = 1
				this.getcommentList()
			},
			//评价列表
			getcommentList(flag) {
				this.$http.post('/api/store/goodsComment/commentList', {
					goodsId: this.id,
					pageNum: this.pageNum,
					pageSize: '20',
					beginTime: this.beginTime,
					endTime: this.endTime,
					field: this.field
				}).then(res => {
					if (res.code == 200) {
						console.log(res.data.rows)
						this.dataList = !flag ? res.data.rows : this.dataList.concat(res.data.rows)
						this.total = res.data.total
					}


				})
			},

			//预览图片
			previewImage(urls, current) {
				console.log(urls, current);
				uni.previewImage({
					urls,
					current
				})
			},

			goPage(item) {
				uni.navigateTo({
					url: '/pages/evaluationDetails/evaluationDetails?id=' + item.id
				})
			},
			closeIsShow() {
				this.isShowStartTime = false
				this.isShowEndTime = false
			},

			confirmStart(e) {
				this.beginTime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
				this.isShowStartTime = false
				this.isShowEndTime = true
				// this.closeIsShow()
			},
			confirmEnd(e) {
				this.endTime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
				this.closeIsShow()
			},
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				if (type === 'hour') {
					return `${value}时`
				}
				if (type === 'minute') {
					return `${value}分`
				}
				return value
			},


		}
	}
</script>

<style lang="less">
	page {
		background: #FAF7F6;
	}

	.productEvaluationHeader {
		background: #FFFFFF;
		padding: 20rpx 24rpx;
		box-sizing: border-box;
		margin-bottom: 20rpx;

		.searchBoxW {
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.searchBox {
				width: 550rpx;
				height: 72rpx;
				background: #FAF7F6;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				box-sizing: border-box;
				padding: 0 20rpx;
				display: flex;
				align-items: center;

				.txt {
					font-size: 28rpx;
					color: #999999;
				}
			}

			text {
				font-size: 28rpx;
				color: #FF4502;
			}
		}

	}

	.userReviews {
		padding: 40rpx 25rpx;
		box-sizing: border-box;
		background: #FFFFFF;

		.userReviewsTitle {
			display: flex;
			align-items: center;

			.userContentIcon {
				width: 30rpx;
				height: 30rpx;
				margin-right: 18rpx;
			}

			text {
				font-size: 28rpx;
				color: #333333;
			}
		}

		.userReviewsList {


			.userReviewsItem {
				margin-top: 30rpx;

				.userReviewsItemHeader {
					display: flex;
					align-items: center;
					margin-bottom: 15rpx;

					.avatar {
						width: 66rpx;
						height: 66rpx;
						border-radius: 50%;
						margin-right: 10rpx;
					}

					.userReviewsItemHeaderR {
						.name {
							font-size: 26rpx;
							color: #333333;
							margin-bottom: 10rpx;
						}

						.time {
							font-size: 24rpx;
							color: #999999;
						}
					}
				}

				.content {
					font-size: 26rpx;
					color: #333333;
					margin-bottom: 15rpx;
					display: -webkit-box;
					/* 让容器使用伸缩布局 */
					-webkit-box-orient: vertical;
					/* 设置伸缩容器的布局方向为垂直方向 */
					-webkit-line-clamp: 2;
					/* 限制为 2 行 */
					overflow: hidden;
					/* 超出内容隐藏 */
					text-overflow: ellipsis;
				}

				.imgList {
					display: flex;
					flex-wrap: wrap;

					image {
						width: 156rpx;
						height: 156rpx;
						background: #FFECEC;
						margin-right: 26rpx;
						margin-bottom: 15rpx;

						&:nth-child(4n) {
							margin-right: 0;
						}
					}
				}

				.replyBox {
					width: 702rpx;
					min-height: 70rpx;
					background: #FAF7F6;
					border-radius: 41rpx 41rpx 41rpx 41rpx;
					padding: 20rpx 40rpx;
					box-sizing: border-box;

					input {
						font-size: 24rpx;
					}
				}
			}
		}
	}
</style>