<template>
	<view class="foodIndex box box-column box-between">
	<foodHeader title="本周菜单"></foodHeader>
	<view class="hzContent" style="padding-top: 200upx;font-size: 26upx;">
		
		<view class="box box-column" style="border-radius:20upx;position: relative;margin: 20upx;">
			<view class="box box-between" style="padding:0px 40upx;background-color: white;border-radius: 20upx;height: 250upx;">
				<!-- <view :class="menuTypeIndex==index?'chooseMenuType':''" v-for="(item, index) in menuType" :key="index" class="menuType" @click="changeMenuType(index)"> -->
				<view class="menuType" @click="changeMenuType(0)">
					<image src="/static/img/foodIcon1.png" style="width: 100%;height: 50%;"/>
					<text style="margin:10upx">早餐</text>
					<view class="activeLine" v-if="menuTypeIndex == 0"></view>
				</view>
				<view class="menuType" @click="changeMenuType(1)">
					<image src="/static/img/foodIcon2.png" style="width: 100%;height: 50%;"/>
					<text style="margin:10upx">午餐</text>
					<view class="activeLine" v-if="menuTypeIndex == 1"></view>
				</view>
				<view class="menuType" @click="changeMenuType(2)">
					<image src="/static/img/foodIcon3.png" style="width: 100%;height: 50%;"/>
					<text style="margin:10upx">晚餐</text>
					<view class="activeLine" v-if="menuTypeIndex == 2"></view>
				</view>
			</view>
		</view>
		<view class="box" style="flex-grow: 1;overflow: hidden; ">
			<view style="overflow: auto;width: 100%;">
				<view style="text-align: center;color: #666666;">
					<!-- <image v-if="list[0].lunch" mode="widthFix" style="width: 100%;" :src="formatImgUrl(list[0].lunch)" @click="vbPicture(new Array(formatImgUrl(list[0].lunch)))"></image>
					<image mode="widthFix" v-else style="width: 100%;" src="../../static/imgs/wu_weekmenu.png"></image> -->
					<view class="weekBox" style="display: flex;background-color:#D9EEEC;" @click=detailOne(1)>
						<view class="weekNum" style="background-color: #ECF9F4;"><text>周一</text></view>
						<view class="foodList">
							<view class="fooditem" v-for="(item, index) in listOne" :key="index">{{item.FOOD_NAME}}</view>
						</view>
						<view><uni-icons color="#bbb" size="30" type="arrowright" /></view>
					</view>
					<view class="weekBox" style="display: flex;background-color:#FDA08C;" @click=detailTwo(2)>
						<view class="weekNum" style="background-color: #FEDAD3;"><text>周二</text></view>
						<view class="foodList">
							<view class="fooditem" v-for="(item, index) in listTwo" :key="index">{{item.FOOD_NAME}}</view>
						</view>
						<view><uni-icons color="#bbb" size="30" type="arrowright" /></view>
					</view>
					<view class="weekBox" style="display: flex;background-color:#CADAE7;" @click=detailThree(3)>
						<view class="weekNum" style="background-color: #E9F3FC;"><text>周三</text></view>
						<view class="foodList">
							<view class="fooditem" v-for="(item, index) in listThree" :key="index">{{item.FOOD_NAME}}</view>
						</view>
						<view><uni-icons color="#bbb" size="30" type="arrowright" /></view>
					</view>
					<view class="weekBox" style="display: flex;background-color:#B3DCB8;" @click=detailFour(4)>
						<view class="weekNum" style="background-color: #DBF6DE;"><text>周四</text></view>
						<view class="foodList">
							<view class="fooditem" v-for="(item, index) in listFour" :key="index">{{item.FOOD_NAME}}</view>
						</view>
						<view><uni-icons color="#bbb" size="30" type="arrowright" /></view>
					</view>
					<view class="weekBox" style="display: flex;background-color:#F8EFC1;" @click=detailFive(5)>
						<view class="weekNum" style="background-color: #FCF9E8;"><text>周五</text></view>
						<view class="foodList">
							<view class="fooditem" v-for="(item, index) in listFive" :key="index">{{item.FOOD_NAME}}</view>
						</view>
						<view><uni-icons color="#bbb" size="30" type="arrowright" /></view>
					</view>
				</view>
				<!-- <view v-if="list.length>0&&menuTypeIndex==1" style="width: 100%;" >
					<image v-if="list[0].breakfast" mode="widthFix" style="width: 100%;" :src="formatImgUrl(list[0].breakfast)" @click="vbPicture(new Array(formatImgUrl(list[0].breakfast)))"></image>
					<image mode="widthFix" v-else style="width: 100%;" src="../../static/imgs/wu_weekmenu.png"></image>
				</view>
				<view v-if="list.length>0&&menuTypeIndex==2" style="width: 100%;" >
					<image v-if="list[0].breakfast" mode="widthFix" style="width: 100%;" :src="formatImgUrl(list[0].breakfast)" @click="vbPicture(new Array(formatImgUrl(list[0].breakfast)))"></image>
					<image mode="widthFix" v-else style="width: 100%;" src="../../static/imgs/wu_weekmenu.png"></image>
				</view> -->
				
				
				<!-- <view style="text-align: center;font-size: 40upx;color: #666666;padding: 80upx 0upx;">
					<image mode="widthFix" style="width: 100%;" src="../../static/imgs/wu_weekmenu.png"></image>
				</view> -->
			</view>
		</view>
	
	</view>
	</view>
</template>

<script>
import {getWeeKCookBook,getDeptByParentId} from '@/common/api.js';
import foodHeader from '@/components/foodHeader.vue';
import { callbackRequest, getStorage, alertTip, formatDate, getNumDate,getWeek,vbPicture } from '@/common/util.js';
import contentNone from '@/components/contentNone.vue';
export default {
	data() {
		return {
			vbPicture:vbPicture,
			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:'',
			listOne:[],
			listTwo:[],
			listThree:[],
			listFour:[],
			listFive:[],
			showDetailItem:{},
			showAlert:false,
		};
	},
	components: {
		contentNone,foodHeader
	},
	onLoad() {
		var nowHours =  new Date().getHours();
		if(nowHours>=11&&nowHours<=14){
			this.menuTypeIndex = 1;
		}
		this.getDeptByParentId(0,new Array());
		this.setHeight();
		this.initData();
	},
	methods: {
		getDeptByParentId(parentId,arr){
			let params = {
				method: getDeptByParentId,
				data: {
					parentId: parentId
				}
			};
			callbackRequest(params).then(res => {
				if (res.returnCode==1) {

				}
			});
		},
		changeMenuType(v){
			this.menuTypeIndex = 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: getWeeKCookBook,
				data: {
					userId: this.userInfo.id,
					foodType:this.menuTypeIndex+''//0 1 2 早中晚 
				}
			};
			callbackRequest(params).then(res => {
				if (res.data.returnCode == 1) {
					var result = res.data.returnData||[];
					this.listOne = result.one.list;
					this.listTwo = result.two.list;
					this.listThree = result.three.list;
					this.listFour = result.four.list;
					this.listFive = result.five.list;
					// this.list = result;
					// console.log(this.list)
				}
			});
		},
		detailOne(weekNum){
			if(this.listOne.length>0){
				let year = this.listOne[0].YEAR;
				let weeks = this.listOne[0].WEEKS;
				uni.navigateTo({
					url: '/pages/foodMenu/foodList?day=' + weekNum+"&foodType="+this.menuTypeIndex+''+"&year="+year+"&weeks="+weeks
				});
			}else{
				alertTip('菜单尚未上传');
			}
		},
		detailTwo(weekNum){
			if(this.listTwo.length>0){
				let year = this.listTwo[0].YEAR;
				let weeks = this.listTwo[0].WEEKS;
				uni.navigateTo({
					url: '/pages/foodMenu/foodList?day=' + weekNum+"&foodType="+this.menuTypeIndex+''+"&year="+year+"&weeks="+weeks
				});
			}else{
				alertTip('菜单尚未上传');
			}
		},
		detailThree(weekNum){
			if(this.listThree.length>0){
				let year = this.listThree[0].YEAR;
				let weeks = this.listThree[0].WEEKS;
				uni.navigateTo({
					url: '/pages/foodMenu/foodList?day=' + weekNum+"&foodType="+this.menuTypeIndex+''+"&year="+year+"&weeks="+weeks
				});
			}else{
				alertTip('菜单尚未上传');
			}
		},
		detailFour(weekNum){
			if(this.listFour.length>0){
				let year = this.listFour[0].YEAR;
				let weeks = this.listFour[0].WEEKS;
				uni.navigateTo({
					url: '/pages/foodMenu/foodList?day=' + weekNum+"&foodType="+this.menuTypeIndex+''+"&year="+year+"&weeks="+weeks
				});
			}else{
				alertTip('菜单尚未上传');
			}
		},
		detailFive(weekNum){
			if(this.listFive.length>0){
				let year = this.listFive[0].YEAR;
				let weeks = this.listFive[0].WEEKS;
				uni.navigateTo({
					url: '/pages/foodMenu/foodList?day=' + weekNum+"&foodType="+this.menuTypeIndex+''+"&year="+year+"&weeks="+weeks
				});
			}else{
				alertTip('菜单尚未上传');
			}
		},
		formatImgUrl(url){
			let oldUrl = url||"";
			let imgName = oldUrl.split("webImageDir")[1];
			let newUrl = 'http://127.0.0.1:'+uni.getStorageSync("ZHHQ_HZ_PORT")+'/webImageDir'+imgName;
			console.log(newUrl,'newUrl');
			return newUrl;
		}
	}
};
</script>

<style lang="scss">
.weekBox{
	width: 100%;
	height: 200upx;
	margin: 20upx 0;
	padding:10upx 40upx;
	// border: 2upx solid #AEAEAE;
	border-radius: 20upx;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.weekNum{
	width: 140upx;
	height: 140upx;
	border-radius: 50%;
	color: #000;
	text-align: center;
	line-height: 140upx;
	font-size: 32upx;
}
.foodList{
	width: 60%;
	height: 90%;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	font-size: 28upx;
	overflow: hidden;
}
.fooditem{
	width: 48%;
	height: 46upx;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: #999;
	// overflow: hidden;
	// padding: 20upx 40upx;
}
.activeLine{
		background: linear-gradient( 90deg, #50CBA1 0%, #06AEA6 100%), #5685F2;
		border-radius: 10upx;
		width: 60upx;
		height: 10upx;
	}
.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: 10upx 40upx;
	font-size: 28upx;
	color: #666;
	width: 30%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.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>
