<template>
	<view class="comManage" :style="{height: contentHeight,}">
		<view style="padding: 10px 0; background: #fff;">
			<u-tabs :list="list" :is-scroll="false" :current="current" name="Name" @change="change"
				:active-color="mainColor" bg-color="#FFF" height="80" bar-width="100"></u-tabs>
		</view>

		<view style="height: calc(100vh - 80px); background: #fff;" v-if="dataList.length == 0">
			<u-empty text="暂无相关数据" mode="order"></u-empty>
		</view>
		<view v-if="dataList.length>0"
			style="height: calc(100vh - 80px);width: calc(100vw);overflow: hidden;padding: 25rpx;background-color: #F7F7F7;">
			<scroll-view :scroll-y="true" :enable-back-to-top="true" :enable-flex="true" @scrolltolower="lowerTwo"
				:style="{ height: '100%' }">
				<view class="commentList" v-for="(item,index) in dataList" :key="index">
					<view class="commentTop">
						<view class="comment_Left">
							<img style="width:100%;height:100%;" :src="item.CoverImage" alt="" />
						</view>
						<view class="comment_Right">
							<view class="comment_Nei">{{item.Content}}</view>
							<view class="comment_Replay">
								来自用户 {{item.UserName}}
							</view>
						</view>
					</view>
					<view class="commentTop" style="margin-top:20rpx;justify-content: space-between;">
						<view style="display:flex;align-items: center;font-size:22rpx;">
							<img style="width:48rpx;height:48rpx;margin-right:10rpx;" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/mallManage/good.png" />
							{{item.CommentGradeName}}
						</view>
						<view>
							<u-button size="mini" v-if="item.Is_Top==1" @click="commonSet(item,5)"  class="ComStyle" shape="circle">取消置顶</u-button>
							<u-button size="mini" v-if="item.Is_Top==2" @click="commonSet(item,4)" class="ComStyle" shape="circle">置顶</u-button>
							<u-button size="mini" v-if="item.Is_Show==1" class="ComStyle" @click="commonSet(item,2)" shape="circle">隐藏评论</u-button>
							<u-button size="mini" v-if="item.Is_Show==2" class="ComStyle" @click="commonSet(item,3)" shape="circle">显示评论</u-button>
							<u-button size="mini" @click="getReplay(item)" class="ComStyle" shape="circle">回复</u-button>
						</view>
					</view>
				</view>
				<u-loadmore :status="status" :load-text="loadText" :font-size="24" :margin-top="20" :margin-bottom="20"
					bg-color="#f3f4f6" />
			</scroll-view>
		</view>
		<u-modal v-model="showReplayBox" :show-cancel-button="true" title="回复" contentSlot @confirm="SaveReply">
			<textarea style="height: 120px;" class="replayRemark" v-model="hfMsg.Content" />
		</u-modal>
	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				pageTitle: "评论管理",
				current: 0,
				contentHeight: 0,
				mainColor: "",
				page_count: 1,
				dataList: [],
				msg: {
					pageIndex: 1,
					pageSize: 15,
					CommentGrade: 1,
					PlatformSource: 0,
					UserName: '',
					GoodsName: '',
					Content: '',
				}, //分销商msg
				list: [{
					name: '好评'
				}, {
					name: '中评'
				}, {
					name: '差评'
				}],
				status: "loadmore",
				loadText: {
					loadmore: "轻轻上拉，加载更多",
					loading: "努力加载中",
					nomore: "没有更多了",
				},
				currentScore: 0,
				showReplayBox:false,
			    hfMsg: {
				  OrderDetailIds: '',
				  Type: 1,
				  Content: '',
				},
			};
		},
		created() {
			this.contentHeight = this.$utils.calcContentHeight(-40) + "px";
			this.mainColor = this.$uiConfig.mainColor;
		},
		mounted() {
			uni.setNavigationBarTitle({
				title: this.pageTitle,
			});
		},
		onLoad: function(option) {
			//this.current = option.status || -1;	
			this.getList();
		},
		methods: {
			change(index) {
				this.current=index;
				if(index==0){
					this.msg.CommentGrade=1;
				}
				if(index==1){
					this.msg.CommentGrade=2;
				}
				if(index==2){
					this.msg.CommentGrade=3;
				}
				this.dataList = [];
				this.msg.pageIndex = 1;
				this.getList();
			},
			getList() {
				uni.showLoading({
					title: '加载中'
				});
				this.requestAdmin("/api/order/GetGoodsCommentPageList", this.msg, res => {
					uni.hideLoading();
					if (res.resultCode == 1) {
						this.dataList = res.data.pageData;
						this.page_count = res.data.pageCount;
					}
				})
			},
			lower(e) {
				if (this.msg.pageIndex < this.page_count) {
					this.msg.pageIndex++;
					this.status = "loading";
					this.getList();
				} else {
					this.status = "nomore";
				}
			},
			//显示 隐藏评论
			commonSet(obj,type) {
				let msg={
					OrderDetailIds:obj.OrderDetailId,
					Type:type
				}
				this.requestAdmin("/api/order/SetCommentBatchByOrderDetailId", msg, res => {
				  if (res.resultCode == 1) {
					uni.showToast({
						title: res.message
					});
					this.getList();
				  } else {
					uni.showToast({
						title: res.message
					});				 
				  }
				})
		    },
			//点击回复
			getReplay(item){
			  this.hfMsg.OrderDetailIds = item.OrderDetailId
			  this.showReplayBox =true;
			},
			//保存回复
			SaveReply(){
				this.requestAdmin("/api/order/SetCommentBatchByOrderDetailId", this.hfMsg, res => {
				  if (res.resultCode == 1) {
					uni.showToast({
						title: res.message
					});
					this.getList();
					this.showReplayBox = false;
				  } else {
					uni.showToast({
						title: res.message
					});
				  }
				})
			}
		}
	};
</script>
<style>
	.comManage {
		width: 100%;
		height: 100%;
	}

	.commentList {
		width: 100%;
		background-color: #E5E5E5;
		padding: 20rpx;
		margin-bottom: 25rpx;
		border-radius: 20rpx;
	}

	.commentTop {
		display: flex;
	}
	.replayRemark {
		border: 1px solid #d1d1d1;
		margin: 40rpx 0 40rpx 28rpx;
		padding:20rpx;
		width:500rpx;
	}
	.comment_Left {
		width: 150rpx;
		height: 150rpx;
		flex-shrink: 0;
	}

	.comment_Right {
		width: 560rpx;
		height: 160rpx;
		background-color: #DEDEDE;
		border-radius: 10rpx;
		padding: 10rpx 10rpx 10rpx 20rpx;
		position: relative;
	}

	.comment_Nei {
		font-size: 24rpx;
		color: #000000;
		text-overflow: -o-ellipsis-lastline;
	    overflow: hidden;
	    text-overflow: ellipsis;
	    display: -webkit-box;
	    -webkit-line-clamp: 3;
	    line-clamp: 3;
	    -webkit-box-orient: vertical;
	}

	.comment_Replay {
		color: #999999;
		font-size: 24rpx;
		position: absolute;
		bottom: 15rpx;
	}

	.ComStyle {
		margin-right: 20rpx;
	}
	.ComStyle:last-child{
		margin-right:0;
	}
</style>
