<template>
	<view class="container">
		<view class="banner-box">
			<image src="/static/imgs/new-food-banner.png" mode=""></image>
		</view>
		<view class="main">
			<view class="tab-box">
				<view class="tab-item" :class="currentTabIndex == 0 ? 'active_tab' : ''" @click="currentTabIndex = 0">餐厅新品</view>
				<view class="tab-item" :class="currentTabIndex == 1 ? 'active_tab' : ''" @click="currentTabIndex = 1">大众推荐</view>
				<view class="tab-item" :class="currentTabIndex == 2 ? 'active_tab' : ''" @click="currentTabIndex = 2">个人推荐</view>
			</view>
			<view v-if="dateInfo">
				<view class="time" v-if="currentTabIndex == 0">推荐时间: {{dateInfo.start_time1}} ~ {{dateInfo.end_time1}}</view>
				<view class="time" v-else>投票时间: {{dateInfo.start_time2}} ~ {{dateInfo.end_time2}}</view>
			</view>
			<!-- 推荐菜品表单填写 -->
			<view class="form-box" v-if="currentTabIndex == 0">
				<view class="form-item">
					<view class="label">菜品名称：</view>
					<view class="ipt-box">
						<input type="text" placeholder="请输入菜品名称" v-model="foodName">
					</view>
				</view>
				<view class="form-item">
					<view class="label">菜品类型：</view>
					<view class="picker-box">
						<image class="arrow" src="/static/icons/right-arrow.png" mode=""></image>
						<picker class="picker" :range="kinds" @change="change(0,$event)">
							<view>{{kinds[index]}}</view>
						</picker>
					</view>
				</view>
				<view class="form-item">
					<view class="label">食材：</view>
					<view class="ipt-box">
						<input type="text" placeholder="请输入食材名称" v-model="materialName">
					</view>
				</view>
				<view class="img-list">
					<view class="title">菜品图片</view>
					<view class="img-box">
						<view class="img-item" v-for="(item,index) in imgs" :key="index">
							<image class="remove-btn" @click="removeImg(index)" src="/static/icons/delete-icon.png" mode=""></image>
							<image class="img" :src="item" mode=""></image>
						</view>
						<view class="img-item upload-btn" @click="chooseImg()" v-if="imgs.length < 1">
							<image class="img" src="/static/imgs/tianjia-img.png" mode=""></image>
						</view>
					</view>
				</view>
				<view class="text-box">
					<view class="title">推荐理由</view>
					<view class="textarea-box">
						<textarea value="" placeholder="请输入推荐理由" v-model="reason" />
						</view>
				</view>
				<view class="btn">
					<view class="sure-btn"  @click="submit">提交</view>
				</view>
			</view>
			<!-- 大众推荐 --><!-- picture,food_name,kinds,reason,vote_no-->
			<view v-if="currentTabIndex == 1">
				<view class="list-box" v-if="publicList.length > 0">
					<view class="list-item" v-for="(item, index) in publicList" :key="item.id">
						<view class="content">
							<view class="image-box" >
								<image mode="" :src="item.picture" />
							</view>
							<view class="fr-content"> 
								<view class="text"><text>菜品名称:</text> {{item.food_name}}</view>
								<view class="text"><text>菜品类型:</text> {{item.kinds}}</view>
								<view class="text"><text>推荐理由:</text> {{item.reason}}</view>
							</view>
						</view>
						<view class="bottom">
							<view class="num-box">点赞数: <text class="num">{{item.vote_no}}</text></view>
							<view class="vote-btn" v-if="item.is_vote == 0" @click="vote(index,item.id)">我想吃</view>
							<view class="vote-btn" v-else-if="item.is_vote == 1">已点赞</view>
							<view class="vote-btn bg-ccc" v-else>我想吃</view>
						</view>
					</view>
				</view>
				<content-none :padTop="30" v-else></content-none>
			</view>
			<!-- 个人推荐 -->
			<view v-if="currentTabIndex == 2">
				<view class="list-box" v-if="parsonFoodList.length > 0">
					<view class="list-item" v-for="(item, index) in parsonFoodList" :key="item.id">
						<view class="content">
							<view class="image-box" >
								<image mode="" :src="item.picture" />
							</view>
							<view class="fr-content">
								<view class="text"><text>菜品名称:</text> {{item.food_name}}</view>
								<view class="text"><text>菜品类型:</text> {{item.kinds}}</view>
								<view class="text"><text>推荐理由:</text> {{item.reason}}</view>
							</view>
						</view>
						<view class="bottom">
							<view class="num-box">票数: <text class="num">{{item.vote_no}}</text></view>
							<view class="vote-btn" v-if="item.is_vote == 0" @click="vote(index,item.id)">投票</view>
							<view class="vote-btn" v-else-if="item.is_vote == 1">已投票</view>
							<view class="vote-btn bg-ccc" v-else>投票</view>
						</view>
					</view>
				</view>
				<content-none :padTop="30" v-else></content-none>
			</view>
			
		</view>
		<load-more v-show="currentTabIndex == 2" :loadingType="loadingType" :contentText="contentText"></load-more>
	</view>
</template>

<script>
	import {alertTip,callbackRequest,getStorage,convertImgToBase64} from '@/common/util.js';
	import {recommendFood,getRecommendFoodList,recommendFoodVote,getQueryDate} from '@/common/api.js';
	import loadMore from '@/components/loadMore.vue'; 
	import contentNone from '@/components/contentNone.vue';
	export default {
		data() {
			return {
				currentTabIndex:0,
				page:1,
				pageSize:10,
				loadingType:0,//0-loading前；1-loading中；2-没有更多了
				contentText: {
					contentdown: "上拉加载更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多数据了"
				},
				index : 0,
				kinds:['熟食','凉菜','热菜','蔬菜','主食','水果'],
				foodName:'',//菜品名称
				reason:'',//推荐理由
				materialName:'',//食材名称
				imgs:[],
				userId:getStorage('userInfo').id,
				foodList : [], //推荐菜列表
				parsonFoodList:[{picture:"http://47.99.190.179:80/appImageDir/a68b13fe0bcf4ee1992ee32623055639.jpg",food_name:"猪蹄",kinds:"熟食",reason:"好吃的很",vote_no:"10",is_vote:"0"},
				                {picture:"http://47.99.190.179:80/appImageDir/42d0a21e68804c398ca3abb4bdc20314.jpg",food_name:"鱿鱼圈",kinds:"熟食",reason:"好吃的很",vote_no:"10"},
								{picture:"http://47.99.190.179:80/appImageDir/e24e76afe4504821891c38aab8793e17.jpg",food_name:"熟食排骨",kinds:"熟食",reason:"好吃的很",vote_no:"10"},
								{picture:"http://47.99.190.179:80/appImageDir/c88ee591bb5c4a228873a4a30020ae6d.jpg",food_name:"卤大肠",kinds:"熟食",reason:"好吃的很",vote_no:"10"},
								{picture:"http://47.99.190.179:80/appImageDir/42d0a21e68804c398ca3abb4bdc20314.jpg",food_name:"鱿鱼圈",kinds:"熟食",reason:"好吃的很",vote_no:"10"}
				
				
				
				
				
				],
				publicList:[{picture:"/static/test/paojiaofz.jpg",food_name:"泡椒凤爪",kinds:"熟食",reason:"爱吃泡椒凤爪需要理由吗?嗯不需要!太好吃啦,推荐一波66666!",vote_no:"10",is_vote:"0"},
				                {picture:"/static/test/hongshaor.jpg",food_name:"红烧肉",kinds:"熟食",reason:"肥而不腻,我把肥肉都吃干净啦",vote_no:"10"},
								{picture:"/static/test/xiaocaor.jpg",food_name:"小炒肉",kinds:"熟食",reason:"够辣,够味,很下饭很喜欢!",vote_no:"10"},
								{picture:"/static/test/shizt.jpg",food_name:"狮子头",kinds:"熟食",reason:"肉很嫩,特好吃",vote_no:"10"},
								{picture:"/static/test/dack.jpg",food_name:"烤鸭",kinds:"熟食",reason:"正宗北京烤鸭,皮很脆",vote_no:"10"}],
				dateInfo:null,
			}
		},
		watch:{
			currentTabIndex:function(newVal,oldVal){
				if(newVal == 1 && this.foodList.length == 0){
					// this.page = 1;
					// this.loadingType = 0;
					// this.foodList = [];
					this.initData();
				}
			}
		},
		components:{
			loadMore,
			contentNone
		},
		onLoad(){
			this.getDate();
		},
		methods: {
			//获取推荐菜列表
			initData(){
				let params = {
						"method":getRecommendFoodList,
						data:{
							pageSize:this.pageSize,
							pageNum:this.page,
							userId:this.userId
						}
					}
				callbackRequest(params)
				.then(res => {
					if(res.data.returnCode == 1){
						if(this.page == 1){
							this.foodList = res.data.returnData;
						}else {
							if(res.data.returnData.length > 0){
								this.foodList = this.foodList.concat(res.data.returnData);
								this.loadingType = 0;
							}else {
								this.loadingType = 2;
							}
						}
						
					}
				})
			},
			getDate(){
				let params = {
					"method":getQueryDate,
					data:{
						userId:this.userId
					}
				}
				callbackRequest(params)
				.then(res =>{
					if(res.data.returnCode == 1){
						this.dateInfo = res.data.returnData;
					}
				})
			},
			//选择菜品类型
			change(type,e){
				this.index = e.detail.value;
			},
			//上传图片
			// chooseImg(){
			// 	let _this = this;
			// 	uni.chooseImage({
			// 		count:3,
			// 		success:res => {
			// 			let param = "";
			// 			let imgArr =  res.tempFilePaths
			// 			for (var i = 0; i < imgArr.length; i++) {
			// 				param = imgArr[i];
			// 				convertImgToBase64(param, function(base64) {
			// 					console.log(base64);
			// 					_this.imgs.push(base64)
			// 				})
			// 			}
			// 		}
			// 	})
			// },
			chooseImg() {
				let _this = this;
				uni.chooseImage({
					count: 3,
					success: res => {
						let param = '';
						let imgArr = res.tempFilePaths;
						for (var i = 0; i < imgArr.length; i++) {
							param = imgArr[i];
							uni.compressImage({
							  src: param,
							  quality: 80,
							  success: res1 => {
								  plus.io.resolveLocalFileSystemURL( res1.tempFilePath,
								  	function(entry){
								  		var reader = null;
								  		entry.file( function ( file ) {
								  			reader = new plus.io.FileReader();
								  			reader.onloadend = function ( e ) {
								  				_this.imgs.push(e.target.result);
								  			};
								  			reader.readAsDataURL( file );
								  		}, function ( e ) {
								  			alert( e.message );
								  		} )
								  	},
								  	function(e){
								  		console.log(e)
								  	}
								  );
							  }
							})
						}
					}
				});
			},
			//删除图片
			removeImg(index){
				this.imgs.splice(index,1);
			},
			//推荐菜提交
			submit(){
				if(!this.foodName){
					alertTip('请输入菜品名称');
					return false;
				}else if(!this.materialName){
					alertTip('请输入食材名称');
					return false;
				}else if(this.imgs.length == 0){
					alertTip('请上传菜品图片');
					return false;
				}else if(!this.reason){
					alertTip('请输入推荐理由');
					return false;
				}
				let imgArr = [].concat(this.imgs);
				let params = {
					"method":recommendFood,
					data:{
						kinds:this.kinds[this.index],
						foodName:this.foodName,
						picture:imgArr.join('~'),
						material:this.materialName,
						reason:this.reason,
						creator:this.userId
					}
				}
				callbackRequest(params)
				.then(res => {
					if(res.data.returnCode == 1){
						alertTip('提交成功','success',1500);
						setTimeout(_ => {
							this.imgs = [];
							this.foodName = '';
							this.reason = '';
							this.materialName = '';
							this.page = 1;
							this.loadingType = 0;
							this.foodList = [];
							this.currentTabIndex = 1;
						},1500)
					}else {
						alertTip(res.data.returnMsg);
					}
				})
			},
			// 投票操作
			vote(index,id){
				let params = {
					"method":recommendFoodVote,
					data:{
						voteUser:this.userId,
						featureId:id
					}
				}
				uni.showModal({
					content:'确认投票？',
					success:res => {
						if(res.confirm){
							callbackRequest(params)
							.then(res => {
								if(res.data.returnCode == 1){
									this.foodList.forEach((v,i) => {
										if(i == index){
											this.foodList[index].vote_no++;
											this.foodList[index].is_vote = 1;
										}else{
											this.foodList[i].is_vote = 2;
										}
									})
									alertTip('投票成功','success',2000);
								}else {
									alertTip(res.data.returnMsg)
								}
							})
						}
					}
				})
			}
		},
		onReachBottom() {
			if (this.loadingType !== 0 || this.currentTabIndex == 0) {
				return;
			}
			this.loadingType = 1;
			this.page = this.page+1;
			this.initData();
		}
	}
</script>

<style lang="scss">
	@import '@/static/css/common.scss';
	.container{
		min-height:100vh;
		background: #f8f8f8;
		overflow: hidden;
		position: relative;
		.banner-box {
			width: 100%;
			height: 240upx;
			position: absolute;
			top: 0;
			left: 0;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.time{
			font-size:28rpx;
			color:#555;
			height:90rpx;
			line-height:90rpx;
			text-align:center;
		}
		.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: 33.3%;
					font-size: 30upx;
					color: #e5f6ff;
					text-align: center;
					line-height: 70upx;
				}
				.active_tab {
					background: #fff;
					color: #333;
					border-radius: 10upx 10upx 0 0;
					font-weight: bold;
				}
			}
		}
		.form-box{
			// margin: 20upx;
			.form-item{
				overflow:hidden;
				padding:22upx 30upx 22upx 20upx;
				background: #fff;
				border-bottom:1px solid #f8f8f8;
				.label{
					float:left;
					width:160upx;
					font-size:30upx;
					color:#333;
					font-weight:bold;
					line-height:50upx;
					text-align:right;
				}
				.ipt-box{
					margin-left:170upx;
					input{
						width:100%;
						height:50upx;
						font-size:28upx;
						color:#666;
						line-height:50upx;
					}
				}
				.picker-box{
					margin-left:170upx;
					overflow:hidden;
					.arrow{
						float:right;
						width:16upx;
						height:29upx;
						margin-top:10upx;
					}
					.picker{
						margin-right:40upx;
						font-size:28upx;
						line-height:50upx;
						color:#666;
					}
				}
			}
			.img-list{
				padding:0 0 14upx;
				background: #fff;
				margin-bottom:10upx;
				.title{
					font-size:28upx;
					color:#333;
					font-weight:bold;
					line-height:40upx;
					padding:25upx 30upx 0;
				}
				.img-box{
					overflow:hidden;
					padding-top:25upx;
					.img-item{
						float:left;
						width:190upx;
						height:190upx;
						border:1px solid #ddd;
						margin:0 0 20upx 26upx;
						position:relative;
						box-sizing: border-box;
						.img{
							display:block;
							width:100%;
							height:100%;
						}
						.remove-btn{
							position:absolute;
							top:-18upx;
							right:-18upx;
							width:44upx;
							height:44upx;
							z-index:2;
						}
					}
					.upload-btn{
						.img{
							width:60upx;
							height:60upx;
							margin:60upx auto 0;
						}
					}
				}
			}
			.text-box{
				padding:0 0 30upx;
				background: #fff;
				margin-bottom:10upx;
				.title{
					font-size:28upx;
					color:#333;
					font-weight:bold;
					line-height:40upx;
					padding:25upx 30upx 0;
				}
				.textarea-box{
					border:1px solid #f8f8f8;
					padding:10upx;
					margin:25upx 30upx 0;
					textarea{
						font-size:28upx;
						color:#666;
						line-height:34upx;
						width:100%;
						resize: none;
						height:200upx;
					}
				}
			}
			.btn {
				padding:0 0 30upx;
				background: #fff;
				margin-top: -10upx;
				.sure-btn{
					width:90%;
					height:80upx;
					font-size:28upx;
					color:#fff;
					text-align:center;
					line-height:80upx;
					border-radius:8upx;
					background: #0066CC;
					background:linear-gradient(to right, #ffc200,#ff9000);/*设置按钮为渐变颜色*/
					margin-left: 5%;
				}
			}
		}
	}
	
	.list-box{
		background: #fff;
		.list-item{
			border-bottom:10upx solid #f8f8f8;
			padding:30upx 20upx;
			.content{
				overflow:hidden;
				.image-box{
					float:left;
					width:200upx;
					height:200upx;
					image{
						display:block;
						width:100%;
						height:100%;
					}
				}
				.fr-content{
					margin-left:220upx;
					.text{
						font-size:26upx;
						color:#666;
						line-height:40upx;
						margin-bottom:10upx;
						text{
							float:left;
							color:#333;
							padding-right:10upx;
						}
					}
				}
			}
			.bottom{
				overflow:hidden;
				padding:10upx 0upx 0;
				.num-box{
					float:left;
					font-size:28upx;
					color:#333;
					line-height:40upx;
					padding-top:20upx;
					text{
						color:#5fbf3d;
						padding-left:4upx;
					}
				}
				.vote-btn{
					float:right;
					width:160upx;
					height:60upx;
					background: #5fbf3d;
					font-size:26upx;
					color:#fff;
					text-align:center;
					line-height:60upx;
					border-radius:4upx;
				}
			}
		}
	}
</style>
