<template>
	<view>
		<view class="food-list" v-if="foodList.length > 0">
			<view class="list-item" v-for="(item, index) in foodList" :key="index">
				<view class="img-box"><image :src="item.picture" mode=""></image></view>
				<view class="fr-content"> 
					<view class="name">{{ item.food_name }}</view>
					<view class="num">评价数: {{ item.no_buy_num }}</view>
					<view class="num">评分: {{ item.no_buy_nu }} / 5</view>
					
					<view class="choose-num">
						<!-- <image v-if="item.buyNum > 0" @click="removeItem(item)" src="/static/icons/jian.png" mode=""></image>
						<text v-if="item.buyNum > 0">{{ item.buyNum }}</text> -->
						<view class="fl" @click="navTo">评价</view>

						<!-- <image v-if="(item.quota > 0 && item.buyNum >= item.quota) || item.buyNum >= item.no_buy_num" src="/static/icons/no-jia.png" mode=""></image>
						<image v-else @click="addItem(item)" src="/static/icons/jia.png" mode=""></image> -->
					</view>
					<view class="price">&yen;{{ item.price }}/{{ item.company }}</view>
				</view>
			</view>
		</view>
		<content-none v-else :padTop="30"></content-none>
	</view>
</template>
<script>
import { commodityList, submitOrder } from '@/common/api.js';
import { callbackRequest, alertTip, sureAlterTip, getStorage } from '@/common/util.js';
import contentNone from '@/components/contentNone.vue';
import datetimePicker from '@/components/dateTime.vue';
export default {
	data() {
		return {
			dataActive: 0,
			showAlert: false, //是否显示弹窗
			foodList: [{price: "20",no_buy_num:"10",no_buy_nu:"5",company:"斤",picture:"http://47.99.190.179:80/appImageDir/a68b13fe0bcf4ee1992ee32623055639.jpg",food_name:"猪蹄"},
			           {price: "30",no_buy_num:"11",no_buy_nu:"4",company:"份",picture:"http://47.99.190.179:80/appImageDir/42d0a21e68804c398ca3abb4bdc20314.jpg",food_name:"鱿鱼圈"},
					   {price: "25",no_buy_num:"12",no_buy_nu:"3",company:"份",picture:"http://47.99.190.179:80/appImageDir/e24e76afe4504821891c38aab8793e17.jpg",food_name:"熟食排骨"},
					   {price: "15",no_buy_num:"13",no_buy_nu:"3",company:"份",picture:"http://47.99.190.179:80/appImageDir/c88ee591bb5c4a228873a4a30020ae6d.jpg",food_name:"卤大肠"},
					   {price: "35",no_buy_num:"14",no_buy_nu:"2",company:"份",picture:"http://47.99.190.179:80/appImageDir/42d0a21e68804c398ca3abb4bdc20314.jpg",food_name:"鱿鱼圈"}

			
			],
			userId: getStorage('userInfo').id,
			takeFoodTime: ''
		};
	},
	components: {
		contentNone,
		datetimePicker
	},
	computed: {
	
	},
	onShow() {
	},
	methods: {
		
		
		
		
		// submit() {
		// 	if (!this.takeFoodTime) {
		// 		alertTip('请选择取餐时间');
		// 		return;
		// 	}
		// 	if (new Date(this.takeFoodTime + ':00') < new Date()) {
		// 		alertTip('取餐时间应大于当前时间');
		// 		return;
		// 	}
		// 	let arr = [];
		// 	this.chooseFoodList.forEach((v, i) => {
		// 		let item = {
		// 			goodsId: v.kinds_id,
		// 			goodsNum: v.buyNum
		// 		};
		// 		arr.push(item);
		// 	});
		// 	let data = {
		// 		method: submitOrder,
		// 		data: {
		// 			userId: this.userId,
		// 			diningRoomId: 3,
		// 			takeFoodTime: this.takeFoodTime,
		// 			orderDetails: arr
		// 		}
		// 	};
		// 	callbackRequest(data).then(res => {
		// 		if (res.data.returnCode == 1) {
		// 			alertTip('评价成功');
		// 			setTimeout(function() {
		// 				uni.navigateTo({
		// 					url: '/pages/order-form/order-form'
		// 				});
		// 			}, 1500);
		// 		} else {
		// 			alertTip(res.data.returnMsg);
		// 		}
		// 	});
		// },
		navTo (){
			uni.navigateTo({
				url: `new-evaluate`
			});
		}
	}
};
</script>

<style lang="scss">
@import '@/static/css/common.scss';
.food-list {
	height: 100%;
	overflow: auto;
	background: #fff;
	.list-item {
		overflow: hidden;
		padding: 20upx 14upx;
		border-bottom: 1px solid #f8f8f8;
		.img-box {
			border-radius: 10upx;
			float: left;
			width: 200upx;
			height: 200upx;
			image {
				display: block;
				width: 100%;
				height: 100%;
				border-radius: 6px;
			}
		}
		.fr-content {
			margin-left: 220upx;
			.name {
				font-size: 30upx;
				color: #333;
				font-weight: bold;
				@include overstepOne;
				line-height: 40upx;
				margin-bottom: 6upx;
			}
			.num {
				font-size: 26upx;
				color: #666;
				line-height: 40upx;
				margin-bottom: 6upx;
			}
			.quota-num {
				min-height: 50rpx;
			}
			.buy-num {
				display: inline-block;
				border: 1px solid #ff0000;
				font-size: 24upx;
				color: #ff0000;
				border-radius: 8upx;
				line-height: 32upx;
				padding: 0 10upx;
				vertical-align: top;
			}
			.choose-num {
				float: right;
				image {
					width: 40upx;
					height: 40upx;
					vertical-align: top;
				}
				text {
					display: inline-block;
					font-size: 28upx;
					color: #666;
					width: 80upx;
					text-align: center;
					line-height: 40upx;
					vertical-align: top;
				}
				.fl {
					float: right;
					padding: 10upx 20upx;
					font-size: 24upx;
					color: $assistColor;
					line-height: 32upx;
					border: 1px solid $assistColor;
					border-radius: 8upx;
					margin-left: 10upx;
				}
			}
			.price {
				font-size: 32upx;
				color: #ff0000;
			}
		}
	}
}
</style>
