<template>
	<view class="merchantComment">
		<far-bottom></far-bottom>
		<view class="topNav">
			<view @click="checkType('')">
				<view :class="rank == '' ? 'check' : ''"><span>所有</span>
					<view class="line"></view>
				</view>
			</view>
			<view @click="checkType(1)">
				<view :class="rank == 1 ? 'check' : ''"><span>好评</span>
					<view class="line"></view>
				</view>
			</view>
			<view @click="checkType(2)">
				<view :class="rank == 2 ? 'check' : ''"><span>中评</span>
					<view class="line"></view>
				</view>
			</view>
			<view @click="checkType(3)">
				<view :class="rank == 3 ? 'check' : ''"><span>差评</span>
					<view class="line"></view>
				</view>
			</view>
		</view>

		<view class="topFull"></view>
		
		
		<!-- 列表区域 -->
		<scroll-view  class="scrollList" :style="{ height: scrollHeight }" :scroll-y="true" @scrolltolower="load" v-if="commentList.length > 0">
			<!-- 收藏店铺循环模板 -->
			<nonemores v-if="totalpage==0"></nonemores>
			<view v-if="totalpage!=0">
				<view class="scdpMbPackage" v-for="(item,index) in commentList" @click="gohf(item.id)">
					<view class="comment-main dis-flex flex-y-center">
						<view class="over-status">{{replyoneList[item.replyone-1]}}</view>
						<view class="scdpMbImg"><image :src="item.goodsimg" /></view>
						<view class="scdpMbInfo">
							<view><span class="twolist-hidden">{{item.text}}</span></view>
							<view>
								<view class="stars dis-flex flex-y-center">
									<image :src="imgfixUrls + 'merchant/yStar.png'" v-if="item.star>1||item.star==1" />
									<image :src="imgfixUrls + 'merchant/nStar.png'" v-else />
									<image :src="imgfixUrls + 'merchant/yStar.png'" v-if="item.star>2||item.star==2" />
									<image :src="imgfixUrls + 'merchant/nStar.png'" v-else />
									<image :src="imgfixUrls + 'merchant/yStar.png'" v-if="item.star>3||item.star==3" />
									<image :src="imgfixUrls + 'merchant/nStar.png'" v-else />
									<image :src="imgfixUrls + 'merchant/yStar.png'" v-if="item.star>4||item.star==4" />
									<image :src="imgfixUrls + 'merchant/nStar.png'" v-else />
									<image :src="imgfixUrls + 'merchant/yStar.png'" v-if="item.star>5||item.star==5" />
									<image :src="imgfixUrls + 'merchant/nStar.png'" v-else />
									<span class="m-left12">{{starList[item.star-1]}}</span>
								</view>
							</view>
							<view>
								<view>
									<view class="dis-flex"><img class="comment-img" :src="item.headimg" /><span>{{item.nickname}}</span></view>
								</view>
							</view>
						</view>
					</view>
					<view class="dis-flex flex-x-end">
						<view class="f-24 flex-box t-l" style="line-height: 70upx;" v-if="item.replytextone">
							<text style="color: #72AAFD;font-weight: 700;">商家回复:</text>
							<text style="color: #333333;">{{item.replytextone}}</text>
						</view>
						<view class="comment-btns "  @click.stop="hideCommnet(item.id)">{{item.status==0?'显示评论':'隐藏评论'}}</view>
						<view class="comment-btns m-left12 blue" @click.stop="gohf(item.id)" >回复</view>
					</view>
				</view>
			</view>
			<!-- 收藏店铺循环模板 -->
			<view class="tips" v-if="totalpage!=0">
				<loadmore :isMore="isMore"></loadmore>
			</view>
		</scroll-view>
		<view  v-else>			<image style="width: 750upx;height: 560upx;" :src="imgfixUrls + 'homemakingImg/wushuju.png'" mode=""></image>		</view>
		<view  v-if="types">
			<TabBars :tabBarAct="0" pageType="18"></TabBars>
		</view>
		
		<!-- 列表区域 -->
	</view>
</template>

<script>
	import App from '@/common/js/app.js';
	import TabBars from '@/components/template/tabBar.vue';
	// #ifdef H5
	import wxApi from '@/common/js/wxApi.js';
	// #endif	
	import nonemores from '@/components/template/nonemores.vue'
	import loadmore from '@/components/template/loadmore.vue'

	export default {
		components:{
			nonemores,
			loadmore,
			TabBars
		},
		data() {
			return {
				starList:['差评','中评','中评','好评','好评'],
				replyoneList:['待回复','已回复'],
				type: 1,
				storeCollectList: [],
				page: 1,
				lat: null,
				lng: null,
				pagetotal: null,
				list: [{
					storename: '2',
					score: '1'
				}, {
					storename: '2',
					score: '1'
				}],
				scdpText: '',
				storeid:null,
				rank:'',
				page:1,
				commentList:[],
				totalpage:0,
				scrollHeight:null,
				isMore:true,
				types:''
			};
		},
		onLoad: function(e) {
			
			let _this=this
			
			_this.types = e.type || '';
			uni.getSystemInfo({
				success(res) {
					_this.scrollHeight = res.windowHeight-55 + 'px';
				}
			});
			uni.getStorage({
			    key: 'currentRegion',
			    success: function (res) {
			        _this.lat=res.data.location.lat
			        _this.lng=res.data.location.lng
			    }
			});
			if(e.id){
				_this.storeid = e.id;
			}
			
			
			_this.init();
			
		},
		onShow() {
			let _this = this;
			_this.page = 1;
			_this.commentList = [];
			uni.getStorage({
				key: 'checkStoreid',
				success: function(res) {
					if(!_this.storeid){
						_this.storeid = res.data;
						_this.getCommentList(_this.storeid);
					}else{
						_this.getCommentList(_this.storeid)
					}
				}
			});
		},
		methods: {
			// 隐藏显示评价接口
			hideCommnet(id){
				let _this=this
				let data={
					storeid:_this.storeid,
					commentid:id
				}
				App._post_form('&p=store&do=hideCommnet',data,res=>{
					let index=null
						for(let i=0;i<_this.commentList.length;i++){
							if(_this.commentList[i].id==id){
								 index=i
							}
						}
						if(_this.commentList[index].status=='1'){
							_this.commentList[index].status='0'
						}
						else if(_this.commentList[index].status=='0'){
							_this.commentList[index].status='1'
						}
						uni.showToast({
							icon:'none',
						    title: '操作成功',
						    duration: 2000
						});
				})
			},
			gohf(commentid) {
				App.navigationTo({
					url: 'pages/subPages/merchant/merchantReply/merchantReply?commentid='+commentid +'&id=' + this.storeid
				})
			},
			init() {
				let _this = this;
				
				// _this.storeCollect();
				
			},
			checkType(rank){
				let _this=this
				_this.rank=rank
				_this.page=1
				_this.commentList=[]
				_this.getCommentList();
			},
			// 店铺评价列表
			getCommentList(storeid){
				let _this=this
				let data={
						storeid:_this.storeid||storeid,
						rank:_this.rank,
						page:_this.page,
						personal:_this.types
				}
				_this.isMore = false;
				App._post_form('&p=store&do=commentList',data,res=>{
					_this.commentList=[..._this.commentList,...res.data.list]
					_this.totalpage=res.data.totalpage
					_this.isMore = true;
				})
			},
			load(){
				let _this=this
				if(_this.totalpage==_this.page){
						_this.isMore = true;
				}
				else{
					_this.page++
					_this.getCommentList();
				}
			},
			// 收藏店铺列表
			storeCollect() {
				let _this = this
				_this.scdpText = "... ...加载中"
				let data = {
					page: _this.page,
					lat: _this.lat,
					lng: _this.lng
				}
				App._post_form('&p=member&do=storeCollect', data, res => {
					_this.storeCollectList = [..._this.storeCollectList, ...res.data.list]
					for (let i = 0; i < _this.storeCollectList.length; i++) {
						_this.list.push(_this.storeCollectList[i].store)
					}
					_this.pagetotal = res.data.pagetotal
					_this.scdpText = ""
				})
			},
			// 搜藏店铺加载
			// scdpLoad(){
			// 	let _this=this
			// 	if(_this.page==_this.pagetotal){
			// 		_this.scdpText="没有更多数据了"
			// 	}else{
			// 		_this.page++
			// 		_this.storeCollect();
			// 	}
			// 	
			// }
		}
	};
</script>

<style lang="less" scoped>
	.tips {
		height: 80upx;
		text-align: center;

		>span {
			line-height: 80upx;
			font-size: 28upx;
			
			
			color: black;
		}
	}

	page {
		overflow-x: hidden;
		background: #f8f8f8;
	}
	.merchantComment{
		background: #f8f8f8;
		font-size: 0;
	}

	.topNav {
		z-index: 2;
		position: fixed;
		top: 0upx;
		width: 750upx;
		height: 86upx;
		background: rgba(255, 255, 255, 1);
		display: flex;
		justify-content: space-between;
		.line {
			position: absolute;
			opacity: 0;
			bottom: 0;
			display: inline-block;
			width: 48upx;
			height: 7upx;
			left: 50%;
			transform: translateX(-50%);
			background: #3388FF;
			border-radius: 4px 4px 0px 0px;
		}
		>view {
			text-align: center;
			width: 25%;
			display: inline-block;
			>view {
				height: 81upx;
				width: 60upx;
				margin: auto;
				border-bottom: 4upx solid rgba(0, 0, 0, 0);
				position: relative;

				>span {
					line-height: 85upx;
					font-size: 24upx;
					
					
					color: rgba(51, 51, 51, 1);
				}
			}
		}
	}

	.check {
		.line {
			opacity: 1;
		}
		>span {
			font-size: 28upx !important;
			font-weight: 500 !important;
			color: #3388FF !important;
		}
	}
	.scrollList {
		width: 690upx;
		margin: 0upx 30upx 0upx 30upx;
	}

	.topFull {
		width: 750upx;
		height: 108upx;
	}

	.scdpMbPackage {
		padding: 30upx;
		margin-bottom: 10px;
		background: rgba(255, 255, 255, 1);
		border-radius: 10px;
		>view {
			display: inline-block;
			vertical-align: top;
		}
	}

	.scdpMbImg {
		width: 159upx;
		height: 159upx;
		border-radius: 10upx;
		overflow: hidden;

		>image {
			width: 159upx;
			height: 159upx;
		}
	}

	.comment-main {
		background: rgba(249, 249, 249, 1);
		padding: 30upx;
		position: relative;
		overflow: hidden;
	}
	.over-status {
	    display: inline-block;
	    position: absolute;
	    font-size: 24upx;
	    white-space: nowrap;
	    right: -66upx;
	    bottom: 18upx;
	    width: 226upx;
	    text-align: center;
	    line-height: 54upx;
	    height: 54upx;
	    background: #EEEEEE;
	    color: #999999;
	    transform: rotate(-45deg);
	}
	.comment-img {
		width: 31upx;
		height: 31upx;
		margin-right: 9upx;
		border-radius: 50%;
	}
	.red-btns{
		margin-top: 20upx;
		width: 149upx;
		height: 53upx;
		border: 1upx solid #3388FF;
		border-radius: 27upx;
		text-align: center;
		line-height: 53upx;
		font-size: 24upx;
		
		color: #FFFFFF;
	}
	.comment-btns {
		margin-top: 20upx;
		width: 149upx;
		height: 53upx;
		border: 1upx solid #3388FF;
		border-radius: 27upx;
		text-align: center;
		line-height: 53upx;
		font-size: 24upx;
		
		color: #3388FF;
	}

	.comment-btns.blue {
		width:120upx;
		background: #3388FF;
		color: #FFFFFF;
	}

	.scdpMbInfo {
		margin-left: 26upx;
		width: 0;
		flex-grow: 1;
		>view:nth-child(1) {
			//标题
			>span {
				font-size: 28upx;
				font-weight: bold;
				line-height: 34upx;
				color: #333333;
			}
		}
		>view:nth-child(2) {
			margin-top: 16upx;
			display: flex;
			justify-content: space-between;

			>view:nth-child(1) {
				vertical-align: middle;

				>image {
					margin-right: 10upx;
					vertical-align: middle;
					width: 25upx;
					height: 24upx;
				}

				>span {
					vertical-align: middle;
					font-size: 24upx;
					
					
					color: rgba(153, 153, 153, 1);
				}
			}

			>view:nth-child(2) {
				vertical-align: middle;

				>span {
					font-size: 24upx;
					
					
					color: rgba(153, 153, 153, 1);
				}
			}

			>view {
				display: inline-block;
			}
		}

		>view:nth-child(3) {
			display: flex;
			justify-content: space-between;

			>view:nth-child(1) {
				margin-top: 16upx;
				//用户名
				>view:nth-child(1) {
					>span {
						font-size: 22upx;
						color: #333333;
						line-height: 31upx;
					}
				}

				>view:nth-child(2) {
					margin-top: 5upx;

					>span {
						font-size: 24upx;
						
						
						color: rgba(153, 153, 153, 1);
					}
				}
			}


			>view {
				display: inline-block;
				vertical-align: middle;
			}
		}
	}
</style>
