<template>
	<view>
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="content">
				更多评价
			</block>
		</cu-custom>
		<view class="" style="padding: 30rpx;">
			<view class="flex align-start" style="z-index: 10; padding-bottom: 40rpx;"
				v-for="(item,index) in commentList" :key="index">
				<image mode="aspectFill" :src="item.avatar" v-if="item.avatar && item.isAnonymous ==0"
					style="width: 60rpx;height: 60rpx; margin-top: 31rpx;border-radius: 50%;"></image>
				<image mode="aspectFill" src="../../static/avatar_icon.png" v-else
					style="width: 60rpx;height: 60rpx; margin-top: 31rpx;border-radius: 50%;"></image>
				<view style="margin-top: 40rpx;margin-left: 18rpx;flex: 1;">
					<view class="flex align-center justify-between">
						<text
							style="font-size: 30rpx;font-weight: bold;color: #111111;">{{item.isAnonymous ==1?"匿名评价":$formatPhone( item.phone)}}</text>
						<text
							style="font-size: 24rpx;font-weight: 500;color: #999;">{{item.createTime.substring(0,item.createTime.length-3)}}</text>
					</view>
					<view class="flex align-center" style="margin-top: 22rpx;">
						<text style="font-weight: 500;font-size: 24rpx;color: #FC6035;">评分</text>
						<text
							style="font-weight: bold;font-size: 24rpx;color: #FC6035;">{{item.score.toFixed(1)}}</text>
						<view class="flex align-center" style="margin-left: 10rpx;">
							<u-rate :current="item.score" :disabled="true" size="24"></u-rate>
						</view>

					</view>

					<view class="flex align-center justify-between" style="margin-top: 12rpx;">
						<view class="" v-for="ele in item.gradeList" :key="ele.id">
							<view class="flex align-center"
								style=" border: #EEEEEE 1rpx solid;padding:4rpx 19rpx 4rpx 14rpx;margin-top: 9rpx;margin-bottom: 9rpx;border-radius: 8rpx;">

								<text style="font-size: 24rpx;font-weight: 500;color: #999;">{{ele.name}}</text>
								<text
									style="margin-left: 18rpx;font-size: 24rpx;font-weight: bold;color: #111;">{{ele.score.toFixed(1)}}</text>
							</view>
						</view>
					</view>
					<view style="margin-top: 26rpx;font-size: 28rpx;color: #111;font-weight: 400;word-break:break-all">
						{{item.content}}
					</view>
					<view class="flex margin-top-sm flex-wrap">
						<view class="bg-f8 flex align-center justify-center margin-bottom-xs"
							v-for="(ele,index) in item.resourceList" :key="index"
							@tap.stop="$videoList(index,item.resourceList,'resourceType')"
							style="width: 150rpx;height: 150rpx;"
							:style="{'margin-right':  (index%2==0 &&index!=0)?'0rpx':'30rpx'}">
							<video :src="ele.url" v-if="ele.type=='002'" 
								style="width: 150rpx;height: 150rpx;"
								:poster="ele.faceImg"
								></video>
							<image :src="ele.url" v-else-if="ele.type=='001'" style="width: 150rpx;height: 150rpx;">
							</image>
						</view>

					</view>

					<view style=" padding-bottom: 26rpx; border-bottom: #EEEEEE 1rpx solid;" v-if="item.reply">
						<view class="flex align-center justify-between">
							<view class="flex align-center" @click="item.replyFlag=!item.replyFlag">
								<text style="color: #999;font-size: 28rpx;font-weight: 500;">商家回复：</text>
								<u-icon v-if="item.replyFlag" name="arrow-up" color="#999"></u-icon>
								<u-icon v-else name="arrow-down" color="#999">
								</u-icon>
							</view>
							<text
								style="color: #999;font-size: 24rpx;font-weight: 500;">{{item.replyTime.substring(0,item.replyTime.length-3)}}</text>
						</view>
						<view v-if="item.replyFlag&&item.reply"
							style="margin-top: 22rpx;font-size: 28rpx;color: #111111;word-break: break-all;">
							{{item.reply}}
						</view>
					</view>
					<view style="margin-top: 24rpx;" v-if="item.reContent">
						<view class="flex align-center justify-between">
							<view class="flex align-center" @click="item.reContentFlag=!item.reContentFlag">
								<text style="color: #999;font-size: 28rpx;font-weight: 500;">追评：</text>
								<u-icon v-if="item.reContentFlag" name="arrow-up" color="#999"></u-icon>
								<u-icon v-else name="arrow-down" color="#999"></u-icon>
							</view>
							<text
								style="color: #999;font-size: 24rpx;font-weight: 500;">{{item.reContentTime.substring(0,item.reContentTime.length-3)}}</text>
						</view>
						<view v-if="item.reContentFlag&&item.reContent"
							style="margin-top: 22rpx;font-size: 28rpx;color: #111111;word-break: break-all;">
							{{item.reContent}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-loadmore v-if="showLoadMore" :status="status" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showLoadMore: false,
				status: 'loading',
				pageNum: 1,
				pageSize: 10,
				goodsId: '',
				commentList: []
			}
		},
		onLoad(options) {
			this.goodsId = options.goodsId
		},
		onShow() {

			this.getCommentList();
		},
		onReachBottom() {
			this.getCommentList();
		},
		methods: {
			///1.获取评论列表
			getCommentList() {
				const param = {
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					goodsId: this.goodsId
				}
				this.showLoadMore = true
				this.$u.api.goodsCommentList(param).then(res => {
					// console.log(res)
					if (res.code === 200) {
						if (res.rows.length == 0) {
							this.status = 'nomore'
							return
						} else {
							this.showLoadMore = false
						}
						res.rows.forEach(item => {
							item['replyFlag'] = true
							item['reContentFlag'] = true
						})
						this.commentList = this.commentList.concat(res.rows)
						this.pageNum++
					}
				})

			},
		}
	}
</script>

<style>
	page {
		background-color: #fff;
	}
</style>
