<template>
	<view class="foodIndex">
	<foodHeader title="菜品列表"></foodHeader>
	<view class="hzContent" >
		
		<view class="main">
			<view class="list-box">
				<view class="detail">
					<view class="detail_header" style="border: 0;display: flex;height: 200upx; align-items: center;background-color: #C3E6D9;border-radius: 20upx;">
						<image mode="widthFix" style="width: 300upx;height: 300upx;" src="/static/img/foodIcon4.png"></image>
						<text class="font-tilte" style="font-size: 32upx;text-align: center;width: 100%;">{{dayList[Number(this.day)]}}{{foodTypeList[Number(this.foodType)]}}</text>
						<text style="color: #fff;width: 35%;background-color: #69AB92;height: 60upx;line-height: 60upx;text-align: center;font-size: 24upx;border-radius: 40upx;" @click="evaluate">评价</text>
					</view>
					
				</view>
			</view>
			
			<view class="list-box">
				<view class="detail" >
					<view class="detail_msg" v-for="(item,index) in list0" :key="index">
						<view class="image-item"  style="display: flex;align-self: flex-start;">
							<image mode="widthFix" style="width: 180upx;height: 180upx;" :src="item.PICTURE"></image>
						</view>
						<view class="info-item" @click="detail(item)">
							<view class="infotext">
								<text>菜品名称：</text>
								<text class="infoSpan">{{item.FOOD_NAME}}</text>
							</view>
							<view class="infotext">
								<text>营养价值：</text>
								<text class="infoSpan">{{item.NUTRITIVE_VALUE}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<content-none v-if="list0.length == 0" :padTop="20"></content-none>
		</view>
		<load-more :loadingType="loadingType0" :contentText="contentText0"></load-more>
	</view>
	</view>
</template>

<script>
import uniCalendar from '@/components/uni-calendar/uni-calendar.vue';
import { getWeeKCookBookForDay  } from '@/common/api.js';
import { callbackRequest, alertTip, getStorage,formatDate,vbPicture } from '@/common/util.js';
import loadMore from '@/components/loadMore.vue';
import datetimePicker from '@/components/dateTime.vue';
import contentNone from '@/components/contentNone.vue';
import foodHeader from '@/components/foodHeader.vue';
import UniPopup from "@/components/uni-popup/uni-popup.vue"
import xflSelect from '../../components/xfl-select/xfl-select1.vue'
export default {
	data() {
		return {
			vbPicture:vbPicture,
			formatDate: formatDate,
			userId: getStorage('userInfo').userId,
			page0: 1,
			pageSize0: 10,
			loadingType0: 0, //0-loading前；1-loading中；2-没有更多了
			list0: [
			],
			stateList: ['待审核', '已通过','已拒绝'],
			contentText0: {
				contentdown: '上拉加载更多',
				contentrefresh: '正在加载...',
				contentnomore: '没有更多数据了'
			},
			day:'',
			dayList:['','周一','周二','周三','周四','周五'],
			foodType:'',
			foodTypeList:['早餐','午餐','晚餐'],
			year:'',
			weeks:'',
			objList:[],
			paramsDataList:[],
			checkedListId:[],
			examineBatch:''
		};
	},
	components: {
		loadMore,
		contentNone,
		UniPopup,
		xflSelect,
		foodHeader
	},
	watch: {
		
	},
	onLoad(options) {
		this.foodType = options.foodType || '0';
		this.day = options.day || '1';
		this.year= options.year;
		this.weeks= options.weeks;
		// this.examineBatch = options.examineBatch || "1";
	},
	onShow() {
		this.getDayFoodList();
	},
	methods: {
		evaluate(item) {
			uni.navigateTo({
				url: '/pages/foodMenu/foodMenuEvaluate?day=' + this.day+"&foodType="+this.foodType+"&year="+this.year+"&weeks="+this.weeks
				// url: `/pages/foodMenu/foodMenuEvaluate?item=`+JSON.stringify(item)+'&queryType=1&examineBatch='+this.examineBatch
			});
		},
		getDayFoodList() {
			// console.log(111)
			var data = {};
			
				data = { 
					userId: this.userId,
					pageNum: this.page0, 
					pageSize: this.pageSize0,
					foodType:this.foodType,
					day:this.day
					};
			console.log(data)
			let params = {
				method: getWeeKCookBookForDay,
				data: data
			};
			callbackRequest(params).then(res => {
				if (res.data.returnCode == 1) {
					let result = res.data.returnData||[];
						if (this.page0 == 1) {
							this.list0 = result;
							console.log(this.list0)
						} else {
							if (result.length > 0) {
								this.list0 = this.list0.concat(result);
								this.loadingType0 = 0;
							} else {
								this.loadingType0 = 2;
							}
						}
				} else {
					alertTip(res.data.returnMsg);
				}
			});
		},
		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;
		}
	},
	onReachBottom() {
			if (this.loadingType0 !== 0 ) {
				return;
			}
			this.loadingType0 = 1;
			this.page0 = this.page0 + 1;
			this.getDayFoodList();
	}
};
</script>

<style lang="scss">
@import '@/static/css/common.scss';
page {
	// background: #f8f8f8;
}
.font-result {
		display: inline-block;
		float: right;
		font-size: 28upx;
		color: #00c277;
		line-height: 50upx;
		vertical-align: top;
		padding-right: 20upx;
	}
.detail {
		// margin-top: 10upx;
		margin-bottom: 14upx;
		// background: #ffffff;
		border-radius: 4upx;
	}

	.detail_header {
		padding: 10upx 30upx;
		border-bottom: 1px solid #eee;
	}

	.detail_header .blueSign {
		height: 30upx;
		width: 10upx;
		background: #00c277;
		display: inline-block;
		margin: 10upx 14upx 0 0;
	}

	.detail_header .font-tilte {
		display: inline-block;
		font-size: 32upx;
		color: #333;
		line-height: 50upx;
		vertical-align: top;
	}

	.detail_header .font-result {
		display: inline-block;
		float: right;
		font-size: 26upx;
		color: #00c277;
		line-height: 50upx;
		vertical-align: top;
	}

	.detail_msg {
		padding: 20upx 20upx;
		display: flex;
		align-items: center;
		// border: 2upx solid #AEAEAE;
		background-color: #fff;
		margin: 30upx 20upx;
		border-radius: 20upx;
		box-shadow: 0px 2px 18px 0px rgba(199,218,234,0.33);
		// overflow: hidden;
	}
	.detail_msg .image-item{
		width: 200upx;
		height: 200upx;
	}

	.detail_msg .info-item {
		width:70%;
		margin-bottom: 50upx;
		margin-left: 0upx;
		font-size: 28upx;

		.infotext {
			margin-bottom: 20upx;
			// display: inline-block;
			// width: 140upx;
		}

		.infoSpan {
			width: 60upx;
			font-size: 28upx;
			word-break:break-all;
			color: #666;
			// float: right;
		}
	}
	
.batchBtn{
	position: absolute;height: 140upx; background: white;padding-top: 30upx;
	.btn1{
		width:40%;margin-left:7%;margin-right: 6%;border-radius: 10upx;
	}
	.btn2{
		width:40%;border-radius: 10upx;
	}
	.btn3{
		width: 28%;margin-left: 4%;border-radius: 10upx;
	}
	.btn4{
		width: 28%;margin-left: 4%;border-radius: 10upx;
	}
	.btn5{
		width: 28%;margin-left: 4%;border-radius: 10upx;
		background: #348CF2;
	}
}
 
	.main {
		margin: 220upx 20upx 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: 50%;
				font-size: 30upx;
				color: #e5f6ff;
				text-align: center;
				line-height: 70upx;
			}
			.active {
				background: #fff;
				color: #333;
				border-radius: 10upx 10upx 0 0;
				font-weight: bold;
			}
		}
		.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;
					}
				}
			}
			.sure-btn {
				width: 100%;
				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-top: 50upx;
			}
		}
		.list-box {
			.list-item {
				background: #fff;
				margin-bottom: 10upx;
				.title {
					border-bottom: 1px solid #eee;
					padding: 20upx 10upx;
					overflow: hidden;
					line-height: 40upx;
					.line {
						display: inline-block;
						width: 10upx;
						height: 32upx;
						background: $assistColor;
						margin-top: 4upx;
					}
					.text {
						display: inline-block;
						font-size: 28upx;
						color: #444;
						font-weight: bold;
						margin-left: 10upx;
						vertical-align: top;
					}
					.status {
						font-size: 26upx;
						color: $assistColor;
						float: right;
					}
					.status1 {
						font-size: 26upx;
						color: #00c277;
						float: right;
					}
					.status2 {
						font-size: 26upx;
						color: red;
						float: right;
					}
				}
				.content {
					padding: 10upx 20upx;
					// padding:10upx 10upx 60upx 10upx;
					.info-item {
						overflow: hidden;
						padding-bottom: 10upx;
						.fl-text {
							float: left;
							font-size: 26upx;
							color: #444;
							font-weight: bold;
							line-height: 40upx;
						}
						.fr-text {
							float: right;
							font-size: 26upx;
							color: #666;
							line-height: 40upx;
						}
					}
				}
			}
			.comment-btn {
				float: right;
				font-size: 24upx;
				border-radius: 10upx;
				color: #fff;
				line-height: 50upx;
				text-align: center;
				min-width: 140upx;
				background-color: #00c277;
			}
		}
	}

#addbtn {
	height: 120upx;
	background-color: #ffffff;
	padding: 30upx;
	border-radius: 30upx;
	color: #333333;
	border-bottom: 0.033333rem solid #eee;
	align-items: center;
	position: relative;
	margin-top: 20upx;
}
.addbtn view text:nth-child(1) {
	font-size: 32upx;
	margin-left: 220upx;
	color: #00c277;
}
.addbtn view text:nth-child(2) {
	font-size: 32upx;
	margin-left: 180upx;
	color: #00c277;
}
.tips {
	font-size: 22upx;
	// margin-left: 80upx;
	margin-top: 20upx;
}
uni-radio .uni-radio-input {
    -webkit-appearance: none;
    appearance: none;
    margin-right: 5px;
    outline: 0;
    border: 1px solid #d1d1d1;
    background-color: #fff;
    border-radius: 50%;
    width: 18px!important;
    height: 18px!important;
    position: relative;
}
</style>
