<template>
	<view class="hzIndex">
		<hzHeader title="留餐受理"></hzHeader>
		<view class="hzContent">
		<view class="main">
			<view class="tab-box">
				<view class="tab-item" :class="currentTabIndex == 0 ? 'active' : ''" @click="currentTabIndex = 0">
					待处理
					<!-- <text v-if="brageNum>0" class="brage">{{brageNum}}</text> -->
					<view class="activeLine" v-if="currentTabIndex == 0"></view>
				</view>
				
				<view class="tab-item" :class="currentTabIndex == 1 ? 'active' : ''" @click="currentTabIndex = 1">已处理<view class="activeLine" v-if="currentTabIndex == 1"></view></view>
			</view>

			<!-- 未审批列表 -->
			<view class="list-box" v-if="currentTabIndex == 0">
				<view class="detail" v-for="(item, index) in list0" :key="index">
					<view class="detail_header" @click="detail(item)">
						<!-- <text class="blueSign"></text> -->
						<image src="/static/img/foodIcon.png" mode="" style="width: 35upx;height: 40upx;margin-left: 20upx;vertical-align: middle;"></image>
						<text class="font-tilte">留餐申请</text>
						<!-- <text v-if="item.EXAMINE_STATE ==0" class="statusred" style="color: #ff9000;" >待办理</text> -->
						<text v-if="item.EXAMINE_STATE ==0" class="font-result" style="color: #ff9000;background-color: #FFEFE3;">待办理</text>
					</view>
					<view class="detail_msg">
						<view class="info-item"  @click="detail(item)">
							<text>申请人:</text>
							<text class="infoSpan">{{ item.USER_NAME }}</text>
						</view>
						<view class="info-item" @click="detail(item)">
							<text>食   堂:</text>
							<text class="infoSpan">{{ item.LOCATION }}</text>
						</view>
						<view class="info-item" @click="detail(item)">
							<text>留餐类别:</text>
							<text class="infoSpan">{{formatFoodType(item.NEA_TYPE) }}</text>
						</view>
						<view class="info-item" @click="detail(item)">
							<text>就餐人数:</text>
							<text class="infoSpan">{{ item.NEAL_NUM }}</text>
						</view>
						<view class="info-item" @click="detail(item)">
							<text>就餐时间:</text>
							<text class="infoSpan">{{ item.NEAL_TIME }}</text>
						</view>
					<!-- 	<view  class="info-item" style="width: 100%;text-align: center;" @click="detail(item)">
							<text style="width: 100%;color: #4db4ea;">点击查看详情及回复</text>
						</view> -->
					</view>
					
				</view>
			</view>

			<!-- 已审批列表 -->
			<view class="list-box" v-if="currentTabIndex == 1">
				<view class="detail" v-for="(item, index) in list1" :key="index">
					<view class="detail_header" @click="detail(item)">
						<!-- <text class="blueSign"></text> -->
						<image src="/static/img/foodIcon.png" mode="" style="width: 35upx;height: 40upx;margin-left: 20upx;vertical-align: middle;"></image>
						<text class="font-tilte">留餐申请</text>
						<text v-if="item.EXAMINE_STATE ==2" class="font-result" style="color: #BD1515;background-color: #F6DFDF;">已拒绝</text>
						<text v-if="item.EXAMINE_STATE ==1" class="font-result" style="color: #0DB0A7;background-color: #C1EFEA;">已通过</text>
					</view>
					<view class="detail_msg">
						<view class="info-item"  @click="detail(item)">
							<text>申请人:</text>
							<text class="infoSpan">{{ item.USER_NAME }}</text>
						</view>
						<view class="info-item" @click="detail(item)">
							<text>食   堂:</text>
							<text class="infoSpan">{{ item.LOCATION }}</text>
						</view>
						<view class="info-item" @click="detail(item)">
							<text>留餐类别:</text>
							<text class="infoSpan">{{ formatFoodType(item.NEA_TYPE) }}</text>
						</view>
						<view class="info-item" @click="detail(item)">
							<text>就餐人数:</text>
							<text class="infoSpan">{{ item.NEAL_NUM }}</text>
						</view>
						<view class="info-item" @click="detail(item)">
							<text>就餐时间:</text>
							<text class="infoSpan">{{ item.NEAL_TIME }}</text>
						</view>
						<!-- <view  class="info-item" style="width: 100%;text-align: center;" @click="detail(item)">
							<text style="width: 100%;color: #4db4ea;">点击查看详情及回复</text>
						</view> -->
					</view>
					
				</view>
			</view>
			<content-none v-if="currentTabIndex == 0 && list0.length == 0" :padTop="20"></content-none>
			<content-none v-if="currentTabIndex == 1 && list1.length == 0" :padTop="20"></content-none>
		</view>
		</view>
		<load-more v-show="currentTabIndex == 0 " :loadingType="loadingType0" :contentText="contentText0"></load-more>
		<load-more v-show="currentTabIndex == 1 " :loadingType="loadingType1" :contentText="contentText1"></load-more>
	</view>
</template>

<script>
import uniCalendar from '@/components/uni-calendar/uni-calendar.vue';
import { getWeekMeallist,getWeekMealNum  } from '@/common/api.js';
import { callbackRequest, alertTip, getStorage } from '@/common/util.js';
import loadMore from '@/components/loadMore.vue';
import datetimePicker from '@/components/dateTime.vue';
import contentNone from '@/components/contentNone.vue';
import UniPopup from "@/components/uni-popup/uni-popup.vue"
import xflSelect from '../../components/xfl-select/xfl-select1.vue'
export default {
	data() {
		return {
			userId: getStorage('userInfo').userId,
			currentTabIndex:0,
			page0: 1,
			pageSize0: 10,
			loadingType0: 2, //0-loading前；1-loading中；2-没有更多了
			page1: 1,
			pageSize1: 10,
			loadingType1: 2, //0-loading前；1-loading中；2-没有更多了
			brageNum: 0,
			list0: [
			],
			list1: [
			],
			stateList: ['待审核', '已通过','已拒绝'],
			foodTypes:[{ id: '0', name: '早餐' }, { id: '1', name: '午餐' },{ id: '2', name: '晚餐' }],
			contentText0: {
				contentdown: '上拉加载更多',
				contentrefresh: '正在加载...',
				contentnomore: '没有更多数据了'
			},
			contentText1: {
				contentdown: '上拉加载更多',
				contentrefresh: '正在加载...',
				contentnomore: '没有更多数据了'
			},
			objList:[],
			paramsDataList:[],
			checkedListId:[],
			examineBatch:''
		};
	},
	components: {
		loadMore,
		contentNone,
		UniPopup,
		xflSelect 
	},
	watch: {
		currentTabIndex: function(newVal, oldVal) {
			this.currentTabIndex = newVal;
			if (this.currentTabIndex==0) {
				this.page0 = 1;
				this.loadingType0 = 0;
				
			}else if (this.currentTabIndex==1) {
				this.page1 = 1;
				this.loadingType1 = 0;
				
			}
			this.getExaminePage();
		}
		
	},
	onLoad(options) {
		this.currentTabIndex = options.currentTabIndex || 0;
		this.examineBatch = options.examineBatch || 1;
	},
	onShow() {
		this.getWeekMealNum();
		this.getExaminePage();
	},
	methods: {
		detail(item) {
			uni.navigateTo({
				url: `/pages/foodMenu/foodStayExamDetail?id=`+item.ID
			});
		},
		getWeekMealNum(){
			var data = {
				USER_ID: this.userId,
			};
			let params = {
				method: getWeekMealNum,
				data: data
			};
			callbackRequest(params).then(res => {
				if (res.data.returnCode == 1) {
					console.log(res.returnData)
					this.brageNum = res.data.returnData;
				} else {
					alertTip(res.data.returnMsg);
				}
			});
			
		},
		getExaminePage() {
			var data = {};
			if(this.currentTabIndex==0){
				data = { 
					USER_ID: this.userId,
					pageNum: this.page0, 
					pageSize: this.pageSize0,
					EXAMINE_STATE:0,
					};
			}else{
				data = { 
					USER_ID: this.userId,
					pageNum: this.page1, 
					pageSize: this.pageSize1,
					EXAMINE_STATE:1,
				}
			}
			let params = {
				method: getWeekMeallist,
				data: data
			};
			callbackRequest(params).then(res => {
				if (res.data.returnCode == 1) {
					let result = res.data.returnData||[];
					console.log(result)
					if(this.currentTabIndex==0){
						if (this.page0 == 1) {
							this.list0 = result;
						} else {
							if (result.length > 0) {
								this.list0 = [...this.list0, result];
								this.loadingType0 = 0;
							} else {
								this.loadingType0 = 2;
							}
						}
					}else{
						if (this.page1 == 1) {
							this.list1 = result;
						} else {
							if (result.length > 0) {
								this.list1 = [...this.list1, result];
								this.loadingType1 = 0;
							} else {
								this.loadingType1 = 2;
							}
						}
					}
					
				} else {
					alertTip(res.data.returnMsg);
				}
			});
		},
		formatFoodType(NEA_TYPE){
			for(let i=0;i<this.foodTypes.length;i++){
				let obj = this.foodTypes[i];
				if(obj.id == NEA_TYPE){
					return obj.name;
				}
			}
		},
	},
	onReachBottom() {
		if(this.currentTabIndex==0){
			if (this.loadingType0 !== 0 ) {
				return;
			}
			this.loadingType0 = 1;
			this.page0 = this.page0 + 1;
			this.getExaminePage();
		}else{
			if (this.loadingType1 !== 0 ) {
				return;
			}
			this.loadingType1 = 1;
			this.page1 = this.page1 + 1;
			this.getExaminePage();
		}
	}
};
</script>

<style lang="scss">
@import '@/static/css/common.scss';
page {
	// background: #f8f8f8;
}
.brage{
	display: inline-block;
	width:50upx;
	height: 50upx;
	border-radius: 50%;
	font-size:20upx;
	text-align: center;
	line-height: 50upx;
	background-color: red;
	position: relative;
	left: 40upx;
	// top: 0;
	color:#fff;
}
.statusred {
	float: right;
	margin-right: 30upx;
	font-size: 28upx;
	// color: red;
}
.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: 20upx;
		background: #ffffff;
		border-radius: 20upx;
	}

	.detail_header {
		padding: 30upx 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;
		font-weight: bold;
		color: #333;
		margin-left: 20upx;
		vertical-align: middle;
	}

	.detail_header .font-result {
		width: 160upx;
		height: 60upx;
		line-height: 60upx;
		text-align: center;
		border-radius: 50upx;
		// margin-right: 30upx;
		// margin-top: 15upx;
		display: inline-block;
		float: right;
		vertical-align: top;
	}

	.detail_msg {
		padding: 20upx 30upx;
		overflow: hidden;
	}

	.detail_msg .info-item {
		margin-bottom: 10upx;
		font-size: 28upx;

		text {
			display: inline-block;
			// width: 140upx;
			color: #999;
		}

		.infoSpan {
			width: auto;
			font-size: 28upx;
			color: #999;
			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: 180upx 40upx 0;
	position: relative;
	z-index: 10;
	.tab-box {
		overflow: hidden;
		// border-radius: 10upx 10upx 0 0;
		// background: rgba(132, 149, 167, 0.8);
		height: 80upx;
		.tab-item {
			float: left;
			height: 70upx;
			width: 30%;
			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;
		}
		.activeLine{
			background: linear-gradient( 90deg, #50CBA1 0%, #06AEA6 100%), #5685F2;
			border-radius: 10upx;
			width: 60upx;
			height: 10upx;
		}
	}
	.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 {
		margin-top: 20upx;
		.list-item {
			background: #fff;
			margin-bottom: 20upx;
			.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>
