<template>
	<!-- 商家查看评价 -->
	<view class="evaluate">
		<view class="EvaluationList"  v-if="datalist.length!=0 ">
			
			<view class="MyEvaluationItem" v-for="(item,index) in datalist" :key="index">
				<view class="flex ali-c jus-b">
					<view class="userinfo flex ali-c ">
						<image class="usertx" :src="item.face" mode=""></image>
						<view class="namebox">
							<view class="name">{{item.nickname}}</view>
							<view class="time">{{item.create_time}}</view>
						</view>
					</view>
					<view class="pingfengboxs">
						
					</view>
				</view>
				<!-- 评论的内容 -->
				<view class="plcontent">
					<view class="neir">
						<view class="plcon">{{item.content}}</view>
					</view>
					<view class="imglist" v-if="item.img_url.length!=0">
						<image @tap="previewImagefun(index1,item.img_url)" v-for="(item1,index1) in item.img_url" :key="index1" class="imgs" :src="staticUrl+item1" mode=""></image>
					</view>
				</view>
				
				<!-- 商家回复 -->
				<view class="reply_contentbox" v-if="item.reply_content">
					店家回复:{{item.reply_content}}
				</view>
				
				<view class="btnpltag jus-e" @tap="replyfun(item,index)">
					<view class="btnpl" v-if="!item.reply_content">
						回复此用户
					</view>
				</view>
				
				<!-- 产品信息 -->
				<view class="projuctinfo flex ali-c 111" hover-class="uni-list-cell-hover" @tap="todetaile(item)" v-if="item.goodsInfo">
					<!-- 商城 -->
					
					<image class="imgsdf" :src="staticUrl+item.goodsInfo[0].photo" v-if='item.goodsInfo[0].photo!=null'></image>
					
					<image class="imgsdf" src="/static/news/kjzf.png" v-else-if="item.goodsInfo[0].goods_name=='快捷支付' "></image>
					<image class="imgsdf" src="/static/chat/imgloaderr.png" v-else></image>
					<view class="prorig flex1">
						<view class="title twoline">{{item.goodsInfo[0].goods_name}}</view>
					</view>
				</view>
			</view>
		</view>
		
		
		<uni-popup :show="showtip" type="bottom" :mask-click="false" @change="change">
			<view class="replybox"  >
				<view class="huifunei">回复 [{{replydata.nickname}}]</view>
				<view class="cloneicon" @tap="clearfun">
					<image class="imclearicon" src="/static/chat/imclearicon.png" mode=""></image>
				</view>
				<view class="conts">
					<textarea v-model="reply_content" class="areas" placeholder='请填写回复他的内容'  maxlength="150" ></textarea>
				</view>
				<view class="submitss1" @tap="submitplda" >完成</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {  storeComment,replyComment } from "@/utils/api/api.js";
	export default {
		data(){
			return {
				page:0,
				datalist:[],
				isshowall:false,
				shop_type:'',//店铺类型
				showtip:false,
				replydata:{},//回复的对象
				replyindex:-1,
				reply_content:"",//评论的内容
			}
		},
		computed: {
			staticUrl () {//静态资源地址
				return this.$store.state.staticUrl;
			},
			staticUrl1 () {//静态资源地址
				return this.$store.state.staticUrl1;
			},
			uploadurl(){
				return this.$store.state.uploadurl;
			}
		},
		onLoad(opdata){
			console.info(opdata,"opdata")
			this.shop_type = opdata.shop_type;
			this.storeCommentfun();
		},
		onReachBottom(){
			if(!this.isshowall){
				this.storeCommentfun();
			}
		},
		methods:{
			//预览评价的图片
			previewImagefun(index,arrlist){
				console.info("预览评价的图片");
				arrlist = arrlist.map((item,index)=>{
					return this.staticUrl + item;
				})
				// 预览图片
				uni.previewImage({
					current:index,
					urls: arrlist,//[this.staticUrl+urlimg],
					
				});
			},
			//提交评论的内容
			submitplda(){
				if(this.reply_content==""){
					this.$api.msg("内容不能为空!");
					return false;
				}
				this.showtip = false;
				replyComment({
					reply_content:this.reply_content,
					id:this.replydata.id,
				}).then((res)=>{
					console.info(res);
					if(res.code==0){
						this.replydata = {};
						this.datalist[this.replyindex].reply_content = this.reply_content;
						this.reply_content="";
						this.$api.msg(res.msg);
						this.replyindex = -1;
					}else{
						this.$api.msg(res.msg);
					}
				})
			},
			//回复
			replyfun(data,index){
				console.info('666');
				this.replydata = data;
				this.replyindex = index;
				this.showtip = true;
			},
			//直接关闭
			clearfun(){
				this.showtip = false;
			},
			//提示弹窗
			change(e) {
				if (!e.show) {
					this.showtip = false
				}
			},
			storeCommentfun(){
				this.page++;
				storeComment({
					page:this.page,
				}).then((res)=>{
					console.info(res);
					if(res.code==0){
						let list = res.data.list;
						list = list.map((item,index)=>{
							if(item.img_url!=""){
								// item.img_ur = 
								let img_url = item.img_url;
								img_url = img_url.split(";");
								
								item.img_url = img_url;
							}else{
								item.img_ur = [];
							}
							return item
						})
						
						this.datalist = [...this.datalist,...list];
						if(res.data.list.length==0){
							this.isshowall = true;
							
							if(this.page!=1){
								this.$api.msg("没有更多了~");
							}
						}
					}
				})
			},
			//点击后查看订单详情
			todetaile(data){
				console.info(data,"data",this.shop_type);
				let order_id = data.order_id;
				if(this.shop_type=='ele'){
					//外卖订单
					uni.navigateTo({
						url:`/pages/order/detail/detail?id=${order_id}`,
					})
				}else if(this.shop_type=='goods'){
					//商城订单
					uni.navigateTo({
						url:`/pages/order/shoporderdetail/shoporderdetail?order_id=${order_id}`,
					})
				}
			}
		},
	}
</script>

<style lang="scss">
	@import  "./evaluate.scss";
</style>
