<!-- 注意事项：
     1.电话号码需要加密
	 2.后端接口注意商家评论回复
 -->

<template>
	<view>
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="content">
				我的评价
			</block>
		</cu-custom>
		<view class="" style="padding: 20rpx 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 " style="padding: 23rpx ;border-bottom: 1rpx solid #eee;">
					<view class="">
						订单编号
					</view>
					<view class="" style="margin-left: 20rpx;">
						{{item.orderId}}
					</view>
				</view>
				<view class="">
					<view class="flex align-center justify-between">
						<view class="flex align-center">
							<view class="">
								<image src="../../../static/avatar_icon.png" 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}}
						</view>
					</view>

					<view class="flex" style="color:#FC6035;">
						<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.totalScore}}
						</view>
						<view class="" style="margin-left: 10rpx;" v-for="(item,index) of item.score " :key="index">
							<image src="../../../static/reviewScore_2x.png" mode="" style="width: 22rpx;height: 20rpx;">
							</image>
						</view>
					</view>

					<view class="flex align-center" style="margin-left: 100rpx; margin-top: 18rpx; ">
						<view class="" v-for=" grade in item.gradeList" :key=item.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}}
								</view>
							</view>
						</view>
					</view>
					<view class="" style="color: #000000; margin-left: 100rpx; margin-top: 26rpx;word-break:break-all">
						1231231231232312312312323123123123231231231232312312312323123123123
					</view>
					<view class="flex align-center"
						style="margin-left: 100rpx;margin-top: 26rpx; padding-bottom: 18rpx;"
						v-if="item.commentVideos!=null && item.commentVideos.length>0">
						<view class="" style="width: 180rpx;margin-right: 27rpx;"
							v-for="(pictureItem,index) in item.commentVideos" :key="index">
							<image :src="pictureItem" mode="widthFix"></image>
						</view>
					</view>
					<view class="flex justify-end margin-top-sm"
						style="border-bottom: 1rpx solid #eee;padding-bottom: 15rpx;">
						<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 class="" style="border-bottom: #EEEEEE;">
						<!-- 	<view class="" style="border-bottom: #EEEEEE;" v-if="item.reply"> -->
						<view class="" style="margin-left: 100rpx;margin-top: 20rpx;color: #999999; font-size: 28rpx;">
							<view class=" flex justify-between align-center">
								<!-- <text> 商家回复:</text> <text>{{item.replyTime}}</text> -->
								<text> 商家回复:</text> <text>2022-01-04T10:12:40</text>
							</view>
						</view>
						<view class=""
							style="margin-left: 100rpx;margin-top:19rpx;padding-bottom:25rpx ;  color: #000000;font-size: 28rpx;">
							1111
							<!-- {{item.reply}} -->
						</view>
					</view>
					<view class=" " style="margin-left:100rpx;display: flex;flex-direction: column;"
						v-if="item.reContent">
						<!-- <view class=""style="margin-left:100rpx"> -->
						<view class="flex justify-between align-center"><text>追评：</text>
							<text>{{item.reContentTime}}</text>
						</view>
						<view class=""
							style="margin-top:19rpx;padding-bottom:25rpx ;  color: #000000;font-size: 28rpx;">
							{{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>
		</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 {
				showModel: false,
				modelContent: '',
				///1.存储评论列表
				commentArray: [],
				///2.存储总评分星级
				commentStar: 0.0,
				///3.用户是否点击了评论
				reviewFlag: false,
				pageParam: {
					pageNum: 1,
					pageSize: 12,
					memberId: uni.getStorageSync('userInfo').memberId
				},
				tempObj: {},
				showModel1: false,
			}
		},
		onShow() {
			this.commentArray=[]
			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.getCommentList()
					}
				})
			},
			//删除评论
			onConfirmDelAdd() {
				this.$u.api.traceRemove(this.tempObj.commontId).then(res => {
					console.log(res)
					if (res.code === 200) {
						this.$api.msg('追评删除成功')
						this.tempObj = {}
						this.commentArray = []
						this.getCommentList()

					}
				})
			},
			// 删除追加的评论
			delAddComment(item) {
				this.showModel = true
				this.modelContent = '您确认要删除这条追评吗？'
				this.tempObj = item
			},
			// 删除评论
			delComent(item) {
				this.showModel = true
				this.modelContent = '您确认要删除这条评论吗？'
				this.tempObj = item
			},
			// 追加评论
			addComent(item) {
				uni.navigateTo({
					url: 'addRemark?commontId=' + item.commontId
				})
			},
			///1.获取评论列表
			getCommentList() {
				this.pageParam.memberId = '10001'
				this.$u.api.getCommentlist(this.pageParam).then(res => {
					console.log(res)
					if (res.code === 200) {
						this.commentArray = this.commentArray.concat(res.rows)

					}
				})

			},
			///2.获取总评分星级
			getTotalStar(commentStar) {}
		}
	}
</script>

<style>

</style>
