<template>
	<view class="container">
		<view class="main">
			<view class="classify-box">
				<view class="classify-item" :class="chooseClassifyIndex == index ? 'active' : ''" v-for="(item, index) in kinds" :key="index" @click="kindClick(index)">
					<text>{{item.name}}</text>
				</view>
			</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}}{{item.company}}</view>
						<view class="quota-num">
							<view class="buy-num" v-if="item.quota > 0">限申请{{item.quota}}{{item.company}}</view>
						</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>
							<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>
							<!-- <image v-if="item.buyNum < item.quota && item.buyNum < item.no_buy_num" @click="addItem(item)" src="/static/icons/jia.png" mode=""></image>
							<image v-else src="/static/icons/no-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>
		<view class="footer-box " v-if="chooseFoodList.length == 0">
			<image class="notCheck" src="../../static/food/notCheck.png" mode="widthFix"></image>
			<text>未选择</text>
		</view>
		<view class="pay-box" v-else>
			<view class="fr-btn" @click="submit">提交申请</view>
			<view class="fl-box" @click="showAlert = true">
				<image class="notCheck" src="../../static/icons/carChecked.png" mode="widthFix"></image>
				<text>&yen;{{totalNum}}</text>
			</view>
		</view>
		<view class="common-shade" v-if="chooseFoodList.length > 0 && showAlert" @click="showAlert = false">
			<view class="list-box food-list" @click.stop="">
				<view class="list-item" v-for="(item,index) in chooseFoodList" :key="index">
					<view class="img-box">
						<image :src="item.picture" mode=""></image>
					</view>
					<view class="fr-content">
						<view class="name">{{item.name}}</view>
						<view class="num">剩余{{item.no_buy_num}}{{item.company}}</view>
						<view class="quota-num">
							<view class="buy-num" v-if="item.quota > 0">限申请{{item.quota}}{{item.company}}</view>
						</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>
							<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.unit}}</view> -->
					</view>
				</view>
			</view>
		</view>
	</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,
				chooseClassifyIndex:0,//选中的菜单下标
				showAlert:false,//是否显示弹窗
				kinds : [
					{
						id:'1',
						name: '文件管理',
					},
					{
						id:'2',
						name: '办公工具',
					}
				],
				date : [
					{ tiems: "12-13", week: "星期五" },
					{ tiems: "12-14", week: "星期六" },
					{ tiems: "12-15", week: "星期日" },
					{ tiems: "12-16", week: "星期一" },
					{ tiems: "12-17", week: "星期二" },
					{ tiems: "12-18", week: "星期三" },
					{ tiems: "12-19", week: "星期四" },
					{ tiems: "12-20", week: "星期五" },
					{ tiems: "12-21", week: "星期六" },
					{ tiems: "12-22", week: "星期日" },
					{ tiems: "12-23", week: "星期一" },
					{ tiems: "12-24", week: "星期二" },
				],
				foodList:[],
				chooseFoodList:[],//选中的食品列表
				foodListAll:{},//所有商品
				userId:getStorage('userInfo').id,
				takeFoodTime:""
			}
		},
		components:{
			contentNone,
			datetimePicker
		},
		computed:{
			totalPrice(){
				let totalPrice = 0;
				this.chooseFoodList.forEach((v,i) => {
					let itemTotalPrice = v.price * v.buyNum;
					totalPrice += itemTotalPrice;
				})
				return totalPrice;
			},
			totalNum(){
				let totalNum = 0;
				this.chooseFoodList.forEach((v,i) => {
					totalNum += v.buyNum;
				})
				return totalNum;
			}
		},
		onShow(){
			this.chooseFoodList = [];
			this.getList()
		},
		methods: {
			getList(){
				// let data = {
				// 	"method": commodityList,
				// 	data:{userId:this.userId,locationId:3}
				// }
				// callbackRequest(data)
				// .then(res => {
				// 	if(res.data.returnCode == 1){
				// 		let result = res.data.returnData;
				// 		this.foodListAll = result.locationDec;
				// 		this.kindClick(this.chooseClassifyIndex);
				// 	}
				// })
				this.kindClick(this.chooseClassifyIndex);
			},
			//切换分类
			kindClick(index){
				this.chooseClassifyIndex = index;
				if(index == 0){
					this.foodList = [{food_name:'文件夹',picture:'http://47.99.190.179:80/appImageDir/1.jpg',quota:1,no_buy_num:20,company:'个'},
					{food_name:'档案盒',picture:'http://47.99.190.179:80/appImageDir/2.jpg',quota:1,no_buy_num:20,company:'个'}];
				}else if(index == 1){
					this.foodList = [{food_name:'计算器',picture:'http://47.99.190.179:80/appImageDir/3.jpg',quota:1,no_buy_num:20,company:'个'},
					{food_name:'订书机',picture:'http://47.99.190.179:80/appImageDir/4.jpg',quota:1,no_buy_num:20,company:'个'}];
				}else if(index == 2){
					this.foodList = this.foodListAll.coldDishList || [];
				}else if(index == 3){
					this.foodList = this.foodListAll.hotDishList || [];
				}else if(index == 4){
					this.foodList = this.foodListAll.vegetablesList || [];
				}else if(index == 5){
					this.foodList = this.foodListAll.mainFoodList || [];
				}
			},
			//点击日期
			switchTab(i) {
				this.dataActive = i;
			},
			//加入购物车  || 购物车商品数量 加1
			addItem(item){
				if(this.chooseFoodList.length == 0){
					this.$set(item,'buyNum',1)
					this.chooseFoodList.push(item);
					return false;
				}else {
					let boolean =  this.chooseFoodList.every(function(value){
						return value.id != item.id;
					})
					console.log(boolean)
					if(boolean){
						this.$set(item,'buyNum',1)
						this.chooseFoodList.push(item);
					}else{
						item.buyNum ++;
					}
				}
			},
			//购物车商品数量 减1
			removeItem(item){
				// this.$set(item,item.buyNum --);
				item.buyNum --;
				if(item.buyNum == 0){
					this.chooseFoodList.forEach((v,i) => {
						if(v.id == item.id){
							this.chooseFoodList.splice(i,1);
							if(this.chooseFoodList.length == 0){
								this.showAlert = false;
							}
						}
					})
				}
			},
			submit(){
				uni.navigateTo({
					url:'/pages/work-tool/work-list'
				})
			},
			onNavigationBarButtonTap : function(){
				uni.navigateTo({
					url: '../order-form/order-form'
				})
			},
			chooseDate(e){
				this.takeFoodTime = e.time;
			}
		}
	}
</script>

<style lang="scss">
	@import '@/static/css/common.scss';
	.container{
		position:relative;
		min-height:100vh;
	}
	.head-box{
		// position:fixed;
		top:0;
		left:0;
		width:100%;
		.scroll-view{
			white-space: nowrap;
			width:100%;
			height:90upx;
			.time-item{
				padding:0 10upx;
				margin:0 16upx;
				display:inline-block;
				.time{
					display:block;
					width:100%;
					font-size:28upx;
					color:#666;
				}
				.week{
					display:block;
					width:100%;
					font-size:28upx;
					color:#666;
				}
			}
			.active{
				.time{
					color:#00c277;
				}
				.week{
					color:#00c277;
				}
			}
		}
		.form-box{
			padding:20upx 30upx 0upx;
			margin-bottom: 20upx;
			background: #fff;
			.form-item{
				overflow:hidden;
				border-bottom:1px solid #eee;
				padding:30upx 0;
				.label{
					float:left;
					width:150upx;
					font-size:28upx;
					color:#333;
					font-weight:bold;
					line-height:50upx;
				}
				.ipt-box{
					margin-left:160upx;
					input{
						width:100%;
						height:50upx;
						line-height:50upx;
						font-size:26upx;
						color:#666;
					}
					.pic{
						width:60upx;
						height:60upx;
						line-height: 80upx;
					}
				}
				.select{
					.arrow{
						float:right;
						width:16upx;
						height:29upx;
						margin-top:10upx;
					}
					input{
						width:70%;
					}
				}
				.jian{
					width: 50upx;
					height:50upx;
					margin-left: 280upx;
				}
				.select {
					.arrow {
						float: right;
						width: 16upx;
						height: 29upx;
						margin-top: 10upx;
					}
					.picker {
						height: 50upx;
						line-height: 50upx;
						font-size: 26upx;
						color: #666;
					}
				}
			}
		}
	}
	
	.main{
		// border-top:10upx solid #f8f8f8;
		overflow: hidden;
		position:absolute;
		top:0upx;
		left:0;
		bottom:80upx;
		width:100%;
		.classify-box{
			float:left;
			width:150upx;
			height:100%;
			background: #eee;
			overflow:auto;
			.classify-item{
				padding:30upx 0;
				line-height:40upx;
				text-align:center;
				text{
					font-size:26upx;
					color:#666;
				}
			}
			.active{
				background: #fff;
				text:{
					color:#00c277;
				}
			}
		}
	}
	.food-list {
		margin-left:150upx;
		height:100%;
		overflow:auto;
		background: #fff;
		.list-item{
			overflow:hidden;
			padding:20upx 14upx;
			border-bottom:1px solid #f8f8f8;
			.img-box{
				float:left;
				width:200upx;
				height:200upx;
				image{
					display: block;
					width:100%;
					height:100%;
				}
			}
			.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;
					}
				}
				.price{
					font-size:32upx;
					color:#FF0000;
				}
			}
		}
	}
	
	.footer-box{
		position:fixed;
		bottom:0;
		left:0;
		width:100%;
		height:80upx;
		background: #7AE5BC;
		text-align:center;
		line-height:80upx;
		image{
			width:50upx;
			vertical-align:middle;
		}
		text{
			font-size:30upx;
			color:#fff;
			vertical-align:middle;
			padding-left:10upx;
		}
	}
	.pay-box{
		position:fixed;
		bottom:0;
		left:0;
		width:100%;
		height:80upx;
		background: #fff;
		line-height:80upx;
		.fl-box{
			// display: inline-block;
			// float:left;
			padding:10upx 0 0 30upx;
			line-height:60upx;
			margin-right:230rpx;
			image{
				width:50upx;
				vertical-align: middle;
				margin:6upx 24upx 0 0;
				vertical-align: top;
			}
			text{
				font-size:28upx;
				color:#00c277;
				vertical-align: top;
			}
		}
		.fr-btn{
			float:right;
			width:200upx;
			background: #00c277;
			font-size:28upx;
			color:#fff;
			text-align:center;
			line-height:80upx;
		}
	}
	.common-shade{
		bottom:80upx;
		height:auto;
		.list-box{
			width:100%;
			height:500upx;
			position:absolute;
			bottom:0;
			left:0;
			background: #fff;
			margin-left:0;
		}
	}
</style>
