<template>
	<view class="container">
		<view class="banner-box">
			<image v-if="currentTabIndex == 0" src="/static/imgs/meal-0.png" mode=""></image>
			<image v-if="currentTabIndex == 1" src="/static/imgs/meal-0.png" mode=""></image>
		</view>
		<view class="main">
			<view class="tab-box">
				<view class="tab-item" :class="currentTabIndex == 0 ? 'active' : ''" @click="currentTabIndex = 0">就餐登记</view>
				<view class="tab-item" :class="currentTabIndex == 1 ? 'active' : ''" @click="currentTabIndex = 1">用餐记录</view>
			</view>
			<!-- 用餐申请表单 -->
			<view class="form-box" v-if="currentTabIndex == 0">
				<view class="form-item">
					<text class="label">就餐食堂</text>
					<view class="ipt-box">
						<input type="text" v-model="haveCanteen[ctIndex]" disabled>
					</view>
				</view>
				<view class="form-item">
					<text class="label">单位</text>
					<view class="ipt-box">
						<input type="text" v-model="userInfo.deptName"  placeholder="请填写单位名称">
					</view>
				</view>
				<view class="form-item">
					<text class="label">姓名</text>
					<view class="ipt-box">
						<input type="text" v-model="userInfo.username" value="" placeholder="请填写就餐人姓名">
					</view>
				</view>
				<view class="form-item">
					<text class="label">用餐人数</text>
					<view class="ipt-box">
						<input type="number" v-model="userInfo.havenumber" placeholder="请填写用餐人数">
					</view>
				</view>
				<view class="form-item">
					<text class="label">用餐时间</text>
					<view class="ipt-box select" @click="open">
						<image class="arrow" src="/static/icons/right-arrow.png" mode=""></image>
						<!-- <input type="text" disabled :value="selectedTime" placeholder="请选择用餐时间"> -->

						<picker class="picker" mode="date" :start="date" @change="bindDateChange">
							<view class="">{{date}}</view>
						</picker>
						<!-- <dy-Datetime-Picker class="picker" :placeholder="'请选择用餐时间'" 
											:maxDate="defaultMaxDate" 
											:minDate="defaultMinDate"
											:minTime="minTime"
											:maxTime="maxTime"
											@getData="chooseDate" :type="'anyTime'">
						 </dy-Datetime-Picker> -->
					</view>
				</view>
				<view class="form-item">
					<text class="label">用餐类别</text>
					<view class="ipt-box select">
						<image class="arrow" src="/static/icons/right-arrow.png" mode=""></image>
						<picker class="picker" :range="kinds" @change="change(0,$event)">
							<view>{{kinds[index]}}</view>
						</picker>
					</view>
				</view>
				<view class="sure-btn" @click="submit()">提交</view>
			</view>
			<!-- 用餐记录列表 -->
			<view v-else>
				<view class="list-box" v-if="list.length > 0">
					<view class="list-item" v-for="(item,index) in list" :key="index">
						<view class="title">
							<text class="line"></text>
							<text class="text">跨区就餐</text>
							<text class="status">{{item.REGISTER_DATE}}</text>
						</view>
						<view class="content">
							<view class="info-item">
								<view class="fl-text">用餐食堂:</view>
								<view class="fr-text">{{item.HAVECANTEEN}}</view>
							</view>
							<view class="info-item">
								<view class="fl-text">用餐类型:</view>
								<view class="fr-text">{{item.REGISTER_TYPE}}</view>
							</view>
							<view class="info-item">
								<view class="fl-text">用餐人数:</view>
								<view class="fr-text">{{item.HAVENUMBER}}人</view>
							</view>
						</view>
					</view>
				</view>
				<content-none v-else :padTop="20"></content-none>
			</view>
		</view>
		<load-more v-if="currentTabIndex == 1" :loadingType='loadingType' :contentText="contentText"></load-more>
		<uni-calendar ref="calendar" :insert="false" @confirm="confirm">
		</uni-calendar>
	</view>
</template>

<script>
	import uniCalendar from '@/components/uni-calendar/uni-calendar.vue'
	import {submitSpanRegister,querySpanRegister,wechatOAuth,iOpenidGetUserInfo} from '@/common/api.js';
	import {callbackRequest,setStorage,getStorage,alertTip} from '@/common/util.js'
	import loadMore from '@/components/loadMore.vue';
	import dyDatetimePicker from '@/components/dateTime.vue';
	import contentNone from '@/components/contentNone.vue';
	let currentTime = new Date().getTime(); 
	let millisecond = 24 * 7 * 60 * 60 * 1000; 
	export default {
		data() {
			return {
				haveCanteen:['本部餐厅','泉州餐厅'],
				ctIndex:0,
				userInfo:{},
				currentUser: {},
				uinfo:{
					realName:'',
					idnumber:'',
					telnumber:'',
				},
				date: this.getTime(),
				index: 1,
				kinds: ["早餐", "午餐", "晚餐"],
				selectedTime: "",
				currentTabIndex: 0,
				list: [],
				page:1,
				pageSize:10,
				loadingType:0,//0-loading前；1-loading中；2-没有更多了
				contentText: {
					contentdown: "上拉加载更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多数据了"
				},
				defaultMinDate: currentTime,// 最小时间
				minTime: '08:00',
				defaultMaxDate: new Date(currentTime+millisecond).getTime(),// 最大时间
				maxTime: '18:00',
			}
		},
		components: {
			uniCalendar,
			loadMore,
			dyDatetimePicker,
			contentNone
		},
		watch:{
			currentTabIndex:function(newVal,oldVal){
				if(newVal && this.list.length == 0){
					this.page = 1;
					this.loadingType = 0;
					this.querySpanRegister();
				}
			}
		},
		onLoad(options) {
			let params = new URLSearchParams(document.location.search.substring(1))
			
			const code = params.get('code')
			if(code!=null&&code!=''){
				let data ={
						   "method": wechatOAuth,
						   "data": {code :code}
				}
				callbackRequest(data)
				.then(({data}) => {
					if (data && data.returnCode == '1') {
					   this.currentUser = data.returnData;
					   this.iOpenidGetUserInfo();
					} else {
						alertTip("微信授权失败，请重新扫码进入此页面");
					}
				})
			}
			
			this.userInfo= getStorage("userInfo");
			this.userInfo.havenumber=1;
			// 跨区注册 与 用餐记录 共用一个页面
			// 根据 页面传值 type 区分，显示默认tab
			if (options.type == 1) {
				this.currentTabIndex = 0
			} else if (options.type == 2) {
				this.currentTabIndex = 1;
			}
			if(options.ctIndex==1){
				this.ctIndex = 1
			}
		},
		methods: {
			iOpenidGetUserInfo(){
				let data = {
					"method": iOpenidGetUserInfo,
					"data": {
						wxOpenId:this.currentUser.openid,
						headportrait:this.currentUser.headimgurl
					}
				}
				callbackRequest(data)
				.then(res =>{
					if(res.data.returnCode == 1){
						this.uinfo = res.data.returnData;
						this.uinfo.wxOpenId = this.currentUser.openid;
						this.uinfo.wxProfile = this.currentUser.headimgurl;
						if(this.uinfo.realName==null||this.uinfo.realName=='null'){
							this.uinfo.realName = '';
						}
						// if(this.uinfo.idnumber==null){
						// 	this.uinfo.idnumber = '';
						// }
						if(this.uinfo.mobile==null||this.uinfo.mobile=='null'){
							this.uinfo.mobile = '';
						}
						if(this.uinfo.deptName==null ||this.uinfo.deptName=='null'){
							this.uinfo.deptName='';
						}
						if(this.uinfo.gender == '男'){
							this.index=0;
						}else{
							this.index=1;
						}
						this.uinfo.username = this.uinfo.realName;
						setStorage('userInfo',this.uinfo);
					}
				})
			},
			querySpanRegister(){
				let data = {
					"method": querySpanRegister,
					data:{
						userid:this.userInfo.id,
						page:this.page,
						pageSize:this.pageSize,
					}
				}
				callbackRequest(data)
				.then(res => {
					if(res.data.returnCode == 1){
						let result = res.data.returnData || [];
						if(this.page == 1){
							this.list = result;
						}else{
							if(result.length > 0){
								this.list = [...this.list,...result];
								this.loadingType = 0;
							}else{
								this.loadingType = 2;
							}
						}
					}else{
						alertTip(res.data.returnMsg)
					}
				})
			},
			submit(){
				let data = {
					"method": submitSpanRegister,
					data:{
						userid:this.userInfo.id,
						username:this.userInfo.username,
						deptname:this.userInfo.deptname,
						havenumber:this.userInfo.havenumber,
						registerDate:this.date,
						registerType:this.kinds[this.index],
						//createDate:this.date,
						createBy:this.userInfo.id,
						haveCanteen: this.haveCanteen[this.ctIndex]
					}
				}
				callbackRequest(data)
				.then(res => {
					if(res.data.returnCode == 1){
						alertTip('登记成功！','',1500);
						this.list = [];
						setTimeout(_ =>{
							this.currentTabIndex = 1;
						}, 1000);
					}
				})
			},
			getTime() {
				var date1 = new Date();
				var year = date1.getFullYear();
				var month = date1.getMonth() + 1;
				var day = date1.getDate();
				var hours = date1.getHours();
				var minutes = date1.getMinutes();
				var seconds = date1.getSeconds();
				// return year+"年"+month+"月"+day+"日"+hours+":"+minutes+":"+seconds
				return year + "-" + month + "-" + day + ""
			},
			bindDateChange: function(e) {
				this.date = e.target.value
			},
			chooseDate(e) {
				this.date = e.time;
			},
			change(type, e) {
				this.index = e.detail.value;
			},
			confirm(e) {
				this.selectedTime = e.fulldate;
			},
			open() {
				this.$refs.calendar.open();
			},
		},
		//上拉加载更多
		onReachBottom(){
			if (this.loadingType !== 0 || this.currentTabIndex == 0) {
				return;
			}
			this.loadingType = 1;
			this.page = this.page+1;
			this.querySpanRegister();
		}
	}
</script>

<style lang="scss">
	@import '@/static/css/common.scss';
	.kind {
		margin-right: 50upx;
	}

	.picker {
		margin-right: 40upx;
		font-size: 28upx;
		line-height: 50upx;
		color: #666;
	}

	.container {
		position: relative;
		overflow: hidden;
		min-height:100vh;
		background: #f8f8f8;
		.banner-box {
			width: 100%;
			height: 240upx;
			position: absolute;
			top: 0;
			left: 0;

			image {
				width: 100%;
				height: 100%;
			}

			border-radius: 30upx;
		}

		.main {
			margin: 172upx 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: 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 50upx;
				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;
						}
					}

					.select {
						.arrow {
							float: right;
							width: 16upx;
							height: 29upx;
							margin-top: 10upx;
						}

						input {
							width: 70%;
						}
					}
				}

				.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;
						}
					}

					.content {
						padding: 10upx 20upx;

						.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;
							}
						}
					}
				}
			}
		}
	}
</style>
