<template>
	<view class="container box box-column box-between"  :style="'height: ' + containerHeight +'px;'" style="background-image:url(../../static/imgs/weekbg.png);overflow: hidden;">
		
		<view  style="height: 120upx;">
			<view class="box box-between" style="color: white;height: 120upx;line-height: 120upx;padding: 0px 40upx;">
				<view :class="areasIndex==index?'chooseArea':''" v-for="(item, index) in areas" :key="index" class="areas" @click="changeAreas(index)">{{item.name}}</view>
			</view>
		</view>
		<view class="box box-column" style="padding:0px 20upx;border-radius:20upx ;">
			<scroll-view scroll-x="true" class="scroll-view">
				<view class="time-item-box" :class="dateIndex == index ? 'time-active' : ''" v-for="(item, index) in date" :key="index" @click="changeDate(index)">
					<text class="week">{{ item.week }}</text>
					<text class="time">{{ item.tiems.substr(5, 10) }}</text>
				</view>
			</scroll-view>
			<view class="box box-between" style="padding: 20upx 40upx 40upx 40upx;background-color: white;">
				<view :class="menuTypeIndex==index?'chooseMenuType':''" v-for="(item, index) in menuType" :key="index" class="menuType" @click="changeMenuType(index)">{{item.name}}</view>
			</view>
		</view>
		<view class="box" style="padding:0px 20upx;flex-grow: 1;overflow: hidden; ">
			<view style="background-color: white;overflow: auto;width: 100%;">
				<view v-if="list.length>0&&menuTypeIndex!=0" v-for="(listItem, index) in list" :key="index"  @click="showDetail(index)" class="box box-column" style="width: 50%;padding: 0upx 20upx;float: left;margin-bottom: 40upx;" :style="'height:'+(imgWidth+50)+'px;'">
					<view :style="'height:'+imgWidth+'px;width:'+imgWidth+'px;'">
						<image :src="listItem.picture" :style="'height:'+imgWidth+'px;width:'+imgWidth+'px;'" mode="scaleToFill"></image>
					</view>
					
					<view style="font-size: 32upx;padding: 8upx 0upx;">{{listItem.food_name}}</view>
					<view style="font-size: 26upx;color: #666666;">{{listItem.features}}</view>
				</view>
				<view v-if="list.length>0&&menuTypeIndex==0" style="width: 100%;padding: 0upx 40upx;line-height: 1.6em;font-size: 32upx;" >
					{{list[0].food_menu}}
				</view>
				<view v-if="list.length==0" style="text-align: center;font-size: 40upx;color: #666666;padding: 80upx 0upx;">
					<image style="width: 534upx;" src="../../static/imgs/wu_weekmenu.png"></image>
				</view>
			</view>
		</view>
		<view class="common-shade box box-center box-align-center" v-if="showAlert" @click="showAlert=false">
			<view class="popup-order" style="background: white;height: 840upx;width: 500upx;border-radius: 10upx;padding: 20upx;overflow: auto;">
			<view style="overflow: scroll;height: 800upx;">
				<image :src="showDetailItem.picture" style="width: 460upx;height: 460upx;"></image>
				<view style="font-size: 32upx;margin-bottom: 10upx;">
					<text style="color: #666666;">名　　称：</text><text>{{showDetailItem.food_name}}</text>
				</view>
				<view style="font-size: 32upx;margin-bottom: 10upx;">
					<text style="color: #666666;">特　　性：</text><text>{{showDetailItem.features}}</text>
				</view>
				<view style="font-size: 32upx;margin-bottom: 10upx;">
					<text style="color: #666666;">主　　料：</text><text>{{showDetailItem.main_materials}}</text>
				</view>
				<view style="font-size: 32upx;margin-bottom: 10upx;">
					<text style="color: #666666;">营养价值：</text><text>{{showDetailItem.nutritive_value}}</text>
				</view>
				<view style="font-size: 32upx;margin-bottom: 10upx;">
					<text style="color: #666666;">饮食建议：</text><text>{{showDetailItem.diet_advice}}</text>
				</view>
			</view>
			
			</view>
		</view>
	</view>
</template>

<script>
import {getWeekMenuList} from '@/common/api.js';
import { callbackRequest, getStorage, alertTip, formatDate, getNumDate,getWeek } from '@/common/util.js';
import contentNone from '@/components/contentNone.vue';
export default {
	data() {
		return {
			userInfo: getStorage('userInfo'),
			areas:[{id:'1',name:'科技楼食堂'},{id:'2',name:'梨园食堂'},{id:'3',name:'梨园食堂套餐'}],
			areasIndex:0,
			date:getWeek(),
			dateIndex:new Date().getDay()-1,
			//day:new Date().getDay(),
			menuType:[{id:'0',name:'早餐'},{id:'1',name:'午餐'},{id:'2',name:'晚餐'}],
			menuTypeIndex:0,
			containerHeight:'',
			contentHeight:'',
			imgWidth:'',
			
			list:[],
			showDetailItem:{},
			showAlert:false
		};
	},
	components: {
		contentNone
	},
	onLoad() {
		var nowHours =  new Date().getHours();
		console.log(nowHours);
		if(nowHours>=9&&nowHours<15){
			this.menuTypeIndex = 1;
		}else if(nowHours>=15){
			this.menuTypeIndex = 2;
		}
		this.setHeight();
		this.initData();
	},
	methods: {
		showDetail(v){
			this.showDetailItem = this.list[v];
			// this.circulation();
			this.showAlert=true;
		},
		circulation(){
			this.$refs.popup.open();
		},
		closeCirculation(){
			this.$refs.popup.close()
		},
		changeDate(v){
			this.dateIndex = v;
			this.initData();
		},
		changeMenuType(v){
			this.menuTypeIndex = v;
			this.initData();
		},
		changeAreas(v){
			this.areasIndex = v;
			this.initData();
		},
		setHeight() {
			let windowHeight = uni.getSystemInfoSync().windowHeight;//页面可见区域
			let windowWidth = uni.getSystemInfoSync().windowWidth;
			this.containerHeight = windowHeight;
			this.contentHeight = windowHeight-60-46-50;
			this.imgWidth = (windowWidth-50)*0.5;
			
		},
		initData() {
			let params = {
				method: getWeekMenuList,
				data: {
					userId: this.userInfo.id,
					date:this.date[this.dateIndex].tiems,
					locationId:this.areas[this.areasIndex].id,
					menuType:this.menuType[this.menuTypeIndex].id
				}
			};
			callbackRequest(params).then(res => {
				if (res.data.returnCode == 1) {
					var result = res.data.returnData||[];
					this.list = result;
					console.log(result)
				}
			});
		}
	}
};
</script>

<style lang="scss">
.common-shade{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100vh;
	background: rgba(0,0,0,0.7);
	z-index:99;
}
.chooseArea{
	font-size: 32upx!important;
	color: #4db4ea!important;
	font-weight: 600;
}
.areas{
	padding: 0upx 20upx;
	font-size: 26upx;
}
.menuType{
	padding: 18upx 60upx;
	font-size: 24upx;
	border: 1px solid #E5E5E5;
	border-radius: 50upx;
	color: #666;
	background-color: #E5E5E5;
}
.chooseMenuType{
	border: 1px solid #4db4ea;
	background-color: white;
	color: #4db4ea;
}
.bg{
	height: 120upx;
	width: 100%;
	position: fixed; 
	z-index: 0;
}
.box {
	display: flex;
	display: -webkit-flex;
}

.box-row-reverse {
	flex-direction: row;
}

/*上下排列*/
.box-column {
	flex-direction: column;
}

/*上下排列*/
.box-left {
	justify-content: flex-start;
}

/*居右*/
.box-right {
	justify-content: flex-end;
}

/*居左*/
.box-center {
	justify-content: center;
}

/*居中*/
.box-between {
	justify-content: space-between;
}

/*两端对齐*/
.box-align-center {
	align-items: center;
}

.box-wrap {
	flex-wrap: wrap;
}
.scroll-view {
	border-radius: 20upx 20upx 0upx 0upx;
	padding: 30upx 0;
	white-space: nowrap;
	width: 100%;
	background: #fff;
	.time-item-box {
		padding: 0 10upx;
		margin: 0 16upx;
		display: inline-block;
		text-align: center;
		.time {
			display: block;
			width: 100%;
			font-size: 28upx;
			color: #666;
		}
		.week {
			display: block;
			width: 100%;
			font-size: 32upx;
			color: #666;
		}
	}
	.time-active {
		.time {
			color: #4db4ea;
		}
		.week {
			color: #4db4ea;
		}
	}
}
.fixedView{
	height: 50px;
	line-height: 50px;
	padding-left: 10px;
	background-color: white;
	width: 100%;
	/* border-radius: 10px; */
	/* margin-left: 5%; */
	font-size: 14px;
	/* border: 1px solid #cfcfcf; */
	position: fixed;
	bottom: 0px;
}
</style>
