<template>
	<view>
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="content">
				我的评价
			</block>
		</cu-custom>
		<view class="" style="padding: 20rpx 0;" v-if="commentArray.length>0">
			<view class="flex-direction1 " style="  margin: 0rpx 20rpx 20rpx 20rpx ;
							padding: 20rpx;
					         background-color: white;
							 border-radius: 30rpx;
							 color: #999999;" v-for="(item,index) in commentArray" :key="index">
                    <view class="flex align-center justify-between" style="padding: 23rpx ;border-bottom: 1rpx solid #eee;" @tap="toDetail(item.orderId,item.isGroupGoods)">
                        <view class="flex align-center">
                            <view class="">订单编号</view>
                            <view style="margin-left: 20rpx;">{{item.orderIndex}}</view>
                        </view>
                        <image mode="" src="../../../static/arrows_right.png" style="width:24rpx;height:24rpx;"></image>
                    </view>
				<view class="">
					<view class="flex align-center justify-between">
						<view class="flex align-center">
							<view class="">
								<image :src="item.avatar" mode="" v-if="item.avatar" style="width: 60rpx;
							                  height: 60rpx;
							                  border-radius: 100rpx;
											  margin-left:22rpx;
											  margin-top:22rpx">
								</image>
								<image src="../../../static/avatar_icon.png" mode="" v-else style="width: 60rpx;
							              height: 60rpx;
							              border-radius: 100rpx;
										  margin-left:22rpx;
										  margin-top:22rpx">
								</image>
							</view>
							<view class="" style="margin-left: 18rpx ;">
								{{$formatPhone( item.phone)}}
							</view>
						</view>
						<view class="" style="margin-right:21rpx">
							{{item.createTime.substring(0,item.createTime.length-3)}}
						</view>
					</view>

					<view class="flex align-center" style="color:#FC6035;align-items: center;" v-if="item.score != '' && item.score > 0">
						<view class="" style="font-size: 24rpx;font-weight: 500;margin-left: 100rpx;">评分</view>
						<view class="" style="font-size: 24rpx;font-weight: bold;margin-left: 6rpx;">
							{{item.score.toFixed(1)}}
						</view>
						<u-rate :current="item.score" :disabled="true" size="24" style="margin-left: 10rpx;" custom-prefix="custom-icon" active-icon="Star" inactive-color="#ccc">
						</u-rate>

					</view>

					<view class="flex align-center justify-between" style="margin-left: 100rpx; margin-top: 18rpx; ">
						<view class="flex " v-for=" grade in item.gradeList" :key="grade.id">
							<view class="flex align-center"
								style="font-size: 24rpx;padding-top: 9rpx;padding-left: 14rpx;padding-right: 14rpx;padding-bottom: 9rpx;border:1rpx solid #EEEEEE; border-radius: 8rpx; ">
								<view class="" style="color: #999999;">
									{{grade.name}}
								</view>
								<view class="" style="margin-left: 18rpx;">
									{{grade.score.toFixed(1)}}
								</view>
							</view>
						</view>
					</view>
					<view class="" style="color: #000000; margin-left: 100rpx; margin-top: 26rpx;word-break:break-all">
						{{item.content}}
					</view>
					<view class="flex  flex-wrap" style="margin-left: 100rpx;">
						<view class="bg-f8 flex align-center justify-center margin-bottom-xs"
							v-for="(ele,index) in item.resourceList" :key="index"
							style="border-radius: 6rpx;overflow: hidden;margin-right:11rpx;margin-top: 10rpx;"
							@tap.stop="$videoList(index,item.resourceList,'resourceType')">
							<video :src="ele.url" v-if="ele.type=='002'" 
							:poster="ele.faceImg"
								style="width: 180rpx;height: 180rpx;"></video>
							<image :src="ele.url" v-else-if="ele.type=='001'" style="width: 180rpx;height: 180rpx;"  mode="aspectFill">
							</image>
						</view>

					</view>
					<view class="margin-top-sm flex justify-between align-center"
						style="border-bottom: 1rpx solid #eee;padding-bottom: 15rpx;margin-bottom: 20rpx;">
						<view class="" style="font-size: 28rpx;margin-left: 100rpx;" v-if="item.isAnonymous==1" >
							匿名评价
						</view>
						<view class="" style="" v-else>

						</view>
						<view class="flex ">
							<view class="" style="border: #CCCCCC 1rpx ;">
								<view class="" v-if="!item.reContent" @click="addComent(item)"
									style="font-size: 26rpx; padding: 11rpx 20rpx;border-radius: 10rpx;color: #666666;background-color: #F8F9FA ;">
									追评
								</view>
							</view>
							<view class="" @click="delComent(item)"
								style="font-size: 26rpx; margin-left: 25rpx;border-radius: 10rpx;padding: 11rpx 20rpx ;color: #666666;background-color: #F8F9FA ;">
								删除
							</view>
						</view>


					</view>
                    <!-- 回复时间大于追评时间，先显示追评时间 -->
                    <view class=" " style="margin-left:100rpx;display: flex;flex-direction: column;"
						v-if="item.reContent&&$isBefore(item.reContentTime,item.replyTime)">
						<view class="flex justify-between align-center"><text>追评：</text>
							<text>{{item.reContentTime.substring(0,item.reContentTime.length-3)}}</text>
						</view>
						<view class=""
							style="margin-top:19rpx;padding-bottom:10rpx; color: #000000;font-size: 28rpx;word-break:break-all">
							{{item.reContent}}
						</view>
						<text class="" @click="delAddComment(item)"
							style="font-size: 26rpx; border-radius: 10rpx;padding: 11rpx 20rpx ;color: #666666;background-color: #F8F9FA ;margin-left: auto;">
							删除
						</text>
					</view>
					<view class="" style="" v-if="item.reply">
						<view class="" style="margin-left: 100rpx;color: #999999; font-size: 28rpx;"
							>
							<view class=" flex justify-between align-center">
								<text> 商家回复:</text> <text>{{item.replyTime.substring(0,item.replyTime.length-3)}}</text>
							</view>
						</view>
						<view class=""
							style="margin-left: 100rpx;margin-top:19rpx;padding-bottom:10rpx ;  color: #000000;font-size: 28rpx;word-break: break-all;">

							{{item.reply}}
						</view>
					</view>
					<view class=" " style="margin-left:100rpx;display: flex;flex-direction: column;margin-top: 20rpx;"
						v-if="item.reContent&&!$isBefore(item.reContentTime,item.replyTime)">
						<view class="flex justify-between align-center"><text>追评：</text>
							<text>{{item.reContentTime.substring(0,item.reContentTime.length-3)}}</text>
						</view>
						<view class=""
							style="margin-top:19rpx;padding-bottom:10rpx; color: #000000;font-size: 28rpx;word-break:break-all">
							{{item.reContent}}
						</view>
						<text class="" @click="delAddComment(item)"
							style="font-size: 26rpx; border-radius: 10rpx;padding: 11rpx 20rpx ;color: #666666;background-color: #F8F9FA ;margin-left: auto;">
							删除
						</text>
					</view>
				</view>
			</view>
			<u-loadmore v-if="showLoadMore" :status="status" />
		</view>
		<view v-else>
			<image src="../../../static/nomore_icon.png" v-if="!emptyLoading" mode="" style="width: 370rpx;height: 370rpx;position: absolute;top:calc(50% - 185rpx) ;left:calc(50% - 185rpx);">
			</image>
            <view class="flex flex-direction align-center justify-center" style="width:100%;margin-top:calc(50% - 185rpx);" v-if="emptyLoading">
                <image src="../../../static/empty-loading.png" mode="" style="width: 256rpx;height: 158rpx;"></image>
                <view style="color:#3A3A3A;font-size;34rpx;margin-top:46rpx;">加载中...</view>
            </view>
		</view>
		<u-modal v-model="showModel" :content="modelContent" confirm-color="#FC6035" confirmText='确定'
			@confirm="onConfirmDelAdd" cancel-text='取消' :show-cancel-button="true">
		</u-modal>
		<u-modal v-model="showModel1" :content="modelContent" confirm-color="#FC6035" confirmText='确定'
			@confirm="onConfirmDel" cancel-text='取消' :show-cancel-button="true">
		</u-modal>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				showLoadMore: false,
				status: 'loading',
				showModel: false,
				modelContent: '',
				///1.存储评论列表
				commentArray: [],
				///2.存储总评分星级
				///3.用户是否点击了评论
				reviewFlag: false,
				tempObj: {},
				showModel1: false,
				pageNum: 1,
				pageSize: 10,
				memberId: '',
                emptyLoading: true,
			}
		},
		onShow() {
			if(this.$store.state.vuex_refresh) {
                this.$store.state.vuex_refresh = false
                this.emptyLoading = true
                this.pageNum=1
                this.memberId = uni.getStorageSync('userInfo').memberId
                this.commentArray = []
                this.getCommentList();
            }
		},
        onLoad() {
            this.pageNum=1
			this.memberId = uni.getStorageSync('userInfo').memberId
			this.commentArray = []
			this.getCommentList();
        },
		onReachBottom() {
			this.getCommentList();
		},
		onPullDownRefresh(){
			this.pageNum=1
            this.emptyLoading = true
			this.getCommentList();
		},
		methods: {
			// 删除追评
			onConfirmDel() {
				this.$u.api.commentRemove(this.tempObj.commontId).then(res => {
					// console.log(res)
					if (res.code === 200) {
						this.$api.msg('评论删除成功')
						this.tempObj = {}
						this.commentArray = []
						this.pageNum=1
                        this.emptyLoading = true
						this.getCommentList()
					}
				})
			},
			//删除评论
			onConfirmDelAdd() {
				this.$u.api.traceRemove(this.tempObj.commontId).then(res => {
					// console.log(res)
					if (res.code === 200) {
						this.$api.msg('删除成功')
						this.tempObj = {}
						this.pageNum=1
						this.commentArray = []
                        this.emptyLoading = true
						this.getCommentList()

					}
				})
			},
			// 删除追加的评论
			delAddComment(item) {
				this.showModel = true
				this.modelContent = '您确认要删除这条追评吗？'
				this.tempObj = item
			},
			// 删除评论
			delComent(item) {
				this.showModel1 = true
				this.modelContent = '您确认要删除这条评论吗？'
				this.tempObj = item
			},
			// 追加评论
			addComent(item) {
				uni.navigateTo({
					url: 'addRemark?commontId=' + item.commontId
				})
			},
			///1.获取评论列表
			getCommentList() {
				const param = {
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					memberId: this.memberId
				}
				this.showLoadMore = true
				this.$u.api.getCommentlist(param).then(res => {
					// console.log(res)
					if (res.code === 200) {
						if (res.rows.length == 0) {
							this.status = 'nomore'
							return
						} else {
							this.showLoadMore = false
						}
						this.commentArray = this.commentArray.concat(res.rows)
						this.pageNum++
					}
				}).finally(()=>{
                    this.emptyLoading = false
					uni.stopPullDownRefresh()
				})

			},
            //   订单详情
            toDetail(id,isGroupGoods) {
                if(isGroupGoods=='1') {
                    uni.navigateTo({
                        url: `/pages/order/groupOrderDetails?orderId=${id}&isBack=isBack`
                    });
                } else {
                    uni.navigateTo({
                        url: `/pages/order/orderDetails?orderId=${id}&isBack=isBack`
                    });
                }
                
            },

		}
	}
</script>

<style>

</style>
