<template>
	<view class="container" v-if="loading">
		<view class="banner-box">
			<image  src="/static/imgs/food-comment-banner.png" mode=""></image>
		</view>
		<view class="main">
			<view class="tab-box">
				<view class="tab-item" :class="currentTabIndex == 1 ? 'active' : ''" @click="currentTabIndex = 1">菜品评价</view>
				<view class="tab-item" :class="currentTabIndex == 2 ? 'active' : ''" @click="currentTabIndex = 2">食堂评价</view>
			</view>
			<view class="comment-list" v-if="list.length > 0">
				<view class="comment-item" v-for="(item,index) in list" :key="index">
					<view class="user-head">
						<image v-if="item.wx_profile" :src="item.wx_profile" mode=""></image>
						<image v-else src="/static/imgs/missing-face.png" mode=""></image>
					</view>
					<view class="fr-content"> 
						<view class="date">{{item.ev_time}}</view>
						<view class="name">{{item.name}}</view>
						<!-- <text>打分{{item.startCount}}</text> -->
						<!-- <view class="grade">
							<image v-for="(grade,gradeIndex) in 1*item.grade" :key="gradeIndex" src="/static/imgs/star1.png" mode=""></image>
							<image v-for="(grade,gradeIndex) in 5-item.grade" :key="gradeIndex+item.grade" src="/static/imgs/star0.png" mode=""></image>
						</view> -->
						<view class="comment-content">{{item.ev_content}}</view>
						<view class="food-list">
							<view class="food-item">{{item.value}}</view>
						</view>
					</view>
				</view> 
			</view>
			<content-none v-else :padTop="35"></content-none>
		</view>
		<load-more :loadingType="loadingType" :contentText="contentText"></load-more>
	</view>
</template>

<script>
	import {getCommentList} from '@/common/api.js';
	import {callbackRequest} from '@/common/util.js';
	import loadMore from '@/components/loadMore.vue';
	import contentNone from '@/components/contentNone.vue';
	export default {
		data() {
			return {
				loading:false,
				page:1,
				page1:1,
				page2:1,
				pageSize:10,
				loadingType:0,//0-loading前；1-loading中；2-没有更多了
				loadingType1:0,
				loadingType2:0,
				contentText: {
					contentdown: "上拉加载更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多数据了"
				},
				//wx_profile,ev_time,name,ev_content,value
				commentList1:[
					          {
					          		name: '1111',
					          		ev_time: '2019-09-09 09:09',
					          		ev_content: '还可以',
					          		value: '满意',
					          		// wx_profile: 'http://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaELTWTXb6GG8T1ZMzKv6mombq1H1TtB7f9uMUP04tgfLgzU56joxozHqO9QSPId0Fqcs5daDKI0iaVQ/132'
					          	},
					          	{
					          		name: '李**',
					          		ev_time: '2019-09-09 09:09',
					          		ev_content: '还不错',
					          		value: '一般',
					          		// wx_profile: 'http://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaELTWTXb6GG8T1ZMzKv6mombq1H1TtB7f9uMUP04tgfLgzU56joxozHqO9QSPId0Fqcs5daDKI0iaVQ/132'
					          	},
					          	{
					          		name: '王**',
					          		ev_time: '2019-09-01 09:09',
					          		ev_content: '还不错',
					          		value: '满意',
					          		// wx_profile: 'http://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaELTWTXb6GG8T1ZMzKv6mombq1H1TtB7f9uMUP04tgfLgzU56joxozHqO9QSPId0Fqcs5daDKI0iaVQ/132'
					          	},
					          	{
					          		name: '赵**',
					          		ev_time: '2019-09-01 09:09',
					          		ev_content: '还不错',
					          		value: '满意',
					          		wx_profile: 'http://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaELTWTXb6GG8T1ZMzKv6mombq1H1TtB7f9uMUP04tgfLgzU56joxozHqO9QSPId0Fqcs5daDKI0iaVQ/132'
					          	}
							  
							  
							  ], // 菜品
				commentList2:[{
					          		name: '赵云',
					          		ev_time: '2019-09-09 09:09',
					          		ev_content: '还可以',
					          		value: '满意',
					          		// wx_profile: 'http://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaELTWTXb6GG8T1ZMzKv6mombq1H1TtB7f9uMUP04tgfLgzU56joxozHqO9QSPId0Fqcs5daDKI0iaVQ/132'
					          	},
					          	{
					          		name: '刘邦',
					          		ev_time: '2019-09-09 09:09',
					          		ev_content: '还不错',
					          		value: '一般',
					          		// wx_profile: 'http://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaELTWTXb6GG8T1ZMzKv6mombq1H1TtB7f9uMUP04tgfLgzU56joxozHqO9QSPId0Fqcs5daDKI0iaVQ/132'
					          	},
					          	{
					          		name: '关羽',
					          		ev_time: '2019-09-01 09:09',
					          		ev_content: '还不错',
					          		value: '满意',
					          		// wx_profile: 'http://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaELTWTXb6GG8T1ZMzKv6mombq1H1TtB7f9uMUP04tgfLgzU56joxozHqO9QSPId0Fqcs5daDKI0iaVQ/132'
					          	},
					          	{
					          		name: '胡宇',
					          		ev_time: '2019-09-01 09:09',
					          		ev_content: '还不错',
					          		value: '满意',
					          		wx_profile: 'http://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaELTWTXb6GG8T1ZMzKv6mombq1H1TtB7f9uMUP04tgfLgzU56joxozHqO9QSPId0Fqcs5daDKI0iaVQ/132'
					          	}
							  
							  
							  
							  ], // 食堂
				list:[],
				currentTabIndex:1,
			};
		},
		components:{
			loadMore,
			contentNone
		},
		watch:{
			currentTabIndex:function(newVal,oldVal){
				if(newVal == 1 ){
					if(this.commentList1.length == 0){
						this.page = 1;
						this.loadingType = 0;
						this.initData();
					}else{
						this.list = this.commentList1
					}
				}else if(newVal == 2){
					if(this.commentList2.length == 0){
						this.page = 1;
						this.loadingType = 0;
						this.initData();
					}else{
						this.list = this.commentList2
					}
				}
			}
		},
		onLoad() {
			this.initData();
		},
		methods:{
			initData(){
				let params = {
					"method":getCommentList,
					data:{
						type:this.currentTabIndex,
						pageSize:this.pageSize,
						pageNum:this.page
					}
				}
				callbackRequest(params)
				.then(res => {
					if(res.data.returnCode == 1){
						let result = res.data.returnData || [];
						// if(this.page == 1){
						// 	if(this.currentTabIndex == 1){
						// 		this.commentList1 = result;
						// 	}else{
						// 		this.commentList2 = result;
						// 	}
						// }
						// else { 
						// 	if(result.length > 0){
						// 		if(this.currentTabIndex == 1){
						// 			this.commentList1 = [...this.commentList1,...result];
						// 			this.loadingType1 = 0;
						// 		}else{
						// 			this.commentList2 = [...this.commentList2,...result];
						// 			this.loadingType2 = 0;
						// 		}
						// 	}else {
						// 		if(this.currentTabIndex == 1){
						// 			this.loadingType1 = 2;
						// 		}else{
						// 			this.loadingType2 = 2;
						// 		}
						// 	}
						// }
						if(this.currentTabIndex == 1){
							this.list = this.commentList1;
							this.loadingType = this.loadingType1;
						}else{
							this.list = this.commentList2;
							this.loadingType = this.loadingType2;
						}
						this.loading = true;
					}
				})
			}
		},
		onReachBottom() {
			if(this.loadingType !== 0){
				return false;
			}
			this.loadingType = 1;
			if(this.currentTabIndex == 1){
				this.page1 = this.page1+1;
				this.page = this.page1;
			}else{
				this.page2 = this.page2+1;
				this.page = this.page2;
			}
			this.initData();
		}
	}
</script>

<style lang="scss">
	@import '@/static/css/common.scss';
	.container{
		background: #f8f8f8;
		min-height:100vh;
		overflow: hidden;
		.banner-box {
			width: 100%;
			height: 240upx;
			position: absolute;
			top: 0;
			left: 0;
			image {
				width: 100%;
				height: 100%;
			}
			border-radius: 30upx;
		}
		.main {
			margin: 172upx 40upx 0;
			position: relative;
			z-index: 10;
		}
		.tab-box {
			overflow: hidden;
			border-radius: 10upx 10upx 0 0;
			background: rgba(132, 149, 167, 0.8);
			height: 70upx;
			.tab-item {
				float: left;
				height: 70upx;
				width: 50%;
				font-size: 30upx;
				color: #e5f6ff;
				text-align: center;
				line-height: 70upx;
			}
			.active {
				background: #fff;
				color: #333;
				border-radius: 10upx 10upx 0 0;
				font-weight: bold;
			}
		}
	}
	.comment-list{
		padding:30upx 30rpx 0;
		background: #fff;
		.comment-item{
			overflow:hidden;
			margin-bottom:20rpx;
			.user-head{
				float:left;
				width:90upx;
				height:90upx;
				border-radius:50%;
				image{
					width:100%;
					height:100%;
					border-radius:50%;
				}
			}
			.fr-content{
				margin:0 0 0upx 110upx;
				border-bottom:1px solid #f5f5f5;
				padding-bottom:26upx;
				.name{
					font-size:28upx;
					font-weight:bold;
					line-height:44upx;
				}
				.date{
					float:right;
					font-size:26upx;
					color:#666;
					line-height:44upx;
				}
				.grade{
					padding-bottom:10upx;
					text{
						display:inline-block;
						font-size:26upx;
						color:#666;
						line-height:36upx;
						vertical-align: top;
						padding-right:20upx;
					}
					image{
						width:36upx;
						height:36upx;
						margin-right:8upx;
						vertical-align: top;
					}
				}
				.comment-content{
					font-size:26upx;
					color:#666;
					line-height:40upx;
				}
				.food-list {
					padding: 10rpx 0 0;
					overflow: hidden;
				
					.food-item {
						float: left;
						margin-right: 10rpx;
						font-size: 24rpx;
						line-height: 30rpx;
						color: $assistColor;
						padding: 4rpx 16rpx;
						border: 1px solid $assistColor;
					}
				}
			}
		}
	}
</style>
