<template>
<div>
	
   <top-header :pageTitle="pageTitle" :rightLink="rightLink" :doRightLink="doRightLink"></top-header>
   
			
			<div class="mui-content margin49">
				<div class="von-xsy-index vongi-index-inter" >
							<div id="slider" class="mui-slider" style="box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1);">
								
								<table width="100%" class="mytable myheader" >
									<tr>
										<td>一</td>
										<td>二</td>
										<td>三</td>
										<td>四</td>
										<td>五</td>
										<td>六</td>
										<td>日</td>
									</tr>
								
								</table>
								<div class="mui-slider-group">
									<!-- 第一张 -->
									<div class="mui-slider-item"  v-for="item,j in queryList"  style="height:55px">
										<table width="100%" class="mytable mybody">
											<tr>
												<td  v-for="it,i in item"  @click="btnTd(it)" >
													<div :class="{'my-active':selectTime==it.dateStr}">{{it.dateStr.substring(8)}}
													<span class="my-badge" :class="'mycolor'+it.status" v-if="['1','2','3'].indexOf(it.status)<0"></span>
													<p>{{it.desc}}</p></div>
												</td>
												
											</tr>
											
										</table>
									</div>
									
									
								</div>
								<div class="mui-slider-indicator" v-if="false">
									<div class="mui-indicator mui-active"></div>
								
								</div>
							</div>
						</div>
						<div class="von-xsy-index vongi-index-inter" v-if="selectItem.personShiftInfoDTOList">
							<div class="myclass-list" >
								<div class="myclass-li"  :class="'mycolor'+item.status" v-for="item,i in selectItem.personShiftInfoDTOList">
									<h3>{{item.name}}</h3>
									<h5>{{item.dateStr}}</h5>
								</div>	
							</div>
						</div>
						
						<div class="von-xsy-index vongi-index-inter" v-if="!selectItem.personShiftInfoDTOList">
							<div class="myclass-list" >
								<div class="myclass-li mycolor3"   >
									<h3>未排班</h3>
									<h5></h5>
								</div>	
							</div>
						</div>
				
				  
			</div>
			<loading :visible="isLoading"></loading>
</div>
</template>


<script>
 	
	import * as API from '@/apis-xsy/applyclass'
  
	import  Common from '$project/components/Common.vue'
 	import Loading from '$project/components/Loading.vue'
	import TopHeader from '$project/components/TopHeader.vue'
 import {
 	currentTimeStamp,
 	parseUnixTime,
 	hourDistanceArr
 } from '$project/utils'

	export default {
		name: '',
		components: {
			Common,
			Loading,
			TopHeader 
		},
		data() {
			return {
				nowItem:{},
				nowTime:'',
				startTime:'',
				selectTime:'',
				week:0,
				centerNum:1,
				queryList:[
					{},{},{}
				],
				pageTitle: '申请调班',
				remainingAmount:"",
				isLoading: false,
				myCurrentTimeStamp:0,
				selectItem:{},
				rightLink: {
					show: true,
					 icon: ' ',
					style: 'font-size:16px;color:#333',
					title: '今日'
				},
				 
			}
		},
		created() {
			
			this.nowTime = parseUnixTime(currentTimeStamp(), '{y}-{m}-{d}');
			var d=new Date(currentTimeStamp());
			var week=d.getDay();//获取星期
			if(week==0){
				week=7;
			}
			this.week=week;
			this.startTime = parseUnixTime(currentTimeStamp()-(1000*60*60*24)*(week-1+(7*this.centerNum)), '{y}-{m}-{d}');
			
			this.pageTitle=this.nowTime ;
			 this.selectTime=this.nowTime ;
			
		
			this.myCurrentTimeStamp=currentTimeStamp();
			
		},
		methods: {
			init(){
				this.isLoading = true;
				var num=0
				var time = parseUnixTime(this.myCurrentTimeStamp-(1000*60*60*24)*(this.week-1-(7*num)+(7*this.centerNum)), '{y}-{m}-{d}');
				
				API.personShiftInfo(time).then(response => {
					num++;
					this.queryList[0]=response;
					  time = parseUnixTime(this.myCurrentTimeStamp-(1000*60*60*24)*(this.week-1-(7*num)+(7*this.centerNum)), '{y}-{m}-{d}');
					
					API.personShiftInfo(time).then(response => {
						for(var i in response){
							if(this.nowTime==response[i].dateStr){
								 this.selectItem=response[i];
								  this.nowItem=response[i];
							}
						}
						this.queryList[1]=response;
						num++;
						 time = parseUnixTime(this.myCurrentTimeStamp-(1000*60*60*24)*(this.week-1-(7*num)+(7*this.centerNum)), '{y}-{m}-{d}');
						
						API.personShiftInfo(time).then(response => {
							this.queryList[2]=response;
							this.isLoading = false;
						}).catch(error => {
							this.isLoading = false;
							mui.toast(error);
						})
						
					}).catch(error => {
						this.isLoading = false;
						mui.toast(error);
					})
					
					
				}).catch(error => {
					this.isLoading = false;
					mui.toast(error);
				})
				
				
				
				
			},
			getPersonShiftInfo(time,bl){
				this.isLoading = true;
					 //substring(8)
				API.personShiftInfo(time).then(response => {
					if(bl){
						this.queryList.push(response)
						
					}else{
						this.queryList.unshift(response);

					}
					console.log(this.queryList)
					
					this.$nextTick(() => {
					    var gallery = mui('.mui-slider');
					    var slider = gallery.slider({
					        //interval: 5000, //自动轮播周期，若为0则不自动播放，默认为0；
					     });
						 if(!bl){
							mui('.mui-slider').slider().gotoItem(1,0)
						 }
					})
					this.isLoading = false;
				
				}).catch(error => {
					this.isLoading = false;
					mui.toast(error);
				})
			},
			doRightLink() {
				mui('.mui-slider').slider().gotoItem(this.centerNum,0) 
				this.selectTime=this.nowTime ;
				this.selectItem=this.nowItem;
				this.pageTitle=this.nowTime ;
			},
			 btnTd(item){
				 console.log(item.dateStr)
				 this.pageTitle=item.dateStr ;
				 this.selectTime=item.dateStr ;
				 this.selectItem=item;
			 },
			 
		
			asynCallBack() {

			},
			addList(num){
				var bl=true;
				var time=null;
				if(num==1){
					bl=false;
					this.centerNum++;
					 time = parseUnixTime(this.myCurrentTimeStamp-(1000*60*60*24)*(this.week-1+(7*(this.centerNum))), '{y}-{m}-{d}');
					
				}else{
					 time = parseUnixTime(this.myCurrentTimeStamp-(1000*60*60*24)*(this.week-1-(7*num)+(7*(this.centerNum))), '{y}-{m}-{d}');
					
				}
				
				
				this.getPersonShiftInfo(time,bl);
			}
		},
		mounted() {
			//this.getRemainingAmount();
			var gallery = mui('.mui-slider');
			var slider = gallery.slider({
			
			});
			mui('.mui-slider').slider().gotoItem(this.centerNum,0) 
			
			var _this=this;
			//this.centerNum
			document.querySelector('.mui-slider').addEventListener('slide', function(event) {
			  //注意slideNumber是从0开始的；
			 // document.getElementById("info").innerText = ;
			 console.log("你正在看第"+(event.detail.slideNumber+1)+"张图片")
			 if(event.detail.slideNumber+1==1){
			 		_this.addList(event.detail.slideNumber+1);
			 }
			  if(event.detail.slideNumber+1==_this.queryList.length){
				  _this.addList(event.detail.slideNumber+1);
			  }
			  
			});
			this.init();
			document.body.style.backgroundColor = '#fff';
			
		},
		destroyed() {
			document.body.style.backgroundColor = '';
			
		},
	
	}
</script>

<style src="$project/assets/css/iconfont.css"></style>
<style scoped src="$project/assets/css/xpwyfyy.css"></style>
<style scoped src="$project/assets/css/xpgj.css"></style>
<style src="$project/assets/css/xsy.css"></style>
<style scoped >
	.mytable{
		list-style-type:none;
		padding: 0;
	}
	.myheader td{
			height: 30px;
	}
	.mybody td{
			height: 48px;
	}
	.mytable td{
		width: 13%;  
		text-align: center;
		margin: 1px;
		padding-top: 5px;
	}
	
	
	.mui-slider-item .mytable div{
		margin: 2px;
		line-height: 20px;
		border-radius: 8px;
		background-color: rgba(249, 249, 249, 100);	
	}
	.my-badge{
		    position: absolute;
		    font-size: 12px;
		    line-height: 1;
		    display: inline-block;
		    padding: 4px 4px;
		    color: #333;
		    border-radius: 100px;
		    background-color: rgba(0, 0, 0, .15);
	}
	.my-active {
		background-color: rgba(22, 119, 255, 100) !important;
		color: rgba(255, 255, 255, 100);
	}
	.my-active p{
	
		color: rgba(255, 255, 255, 100)!important;
	}
	.mycolor1{
		background-color:rgba(66, 145, 255, 100);
	}
	.mycolor2{
		background-color:rgba(52, 199, 88, 100);
		box-shadow: 0px 4px 4px 0px rgba(17, 96, 36, 30)!important;
	}
	.mycolor3{
		background-color:rgba(174, 174, 178, 100);
		box-shadow: 0px 4px 4px 0px rgba(72, 74, 77, 30) !important;
	}
	.mycolor4{
		box-shadow: 0px 4px 4px 0px rgba(128, 49, 0, 30)!important;
		background-color:rgba(236, 136, 74, 100);
	}
	.mycolor5{
		box-shadow: 0px 4px 4px 0px rgba(47, 49, 151, 30)!important;
		background-color:rgba(118, 119, 206, 100);
	}
	.mycolor4 h5{
		font-size: 14px !important;
		
	}
	.mycolor5 h5{
		font-size: 14px !important;
	}

	.myclass-li{
		padding: 15px;
	    margin-bottom: 10px;
		height: 100px;
		line-height: 20px;
		border-radius: 9px;
		text-align: center;
		box-shadow: 0px 4px 4px 0px rgba(15, 58, 119, 30);
		
	}
	.myclass-li h3{
		
		height: 40px;
		color: rgba(243, 248, 255, 100);
		font-size: 28px;
		text-align: left;
		font-family: PingFangSC-bold;
	}
	.myclass-li h5{
	
		color: rgba(243, 248, 255, 100);
		font-size: 18px;
		text-align: left;
		font-family: PingFangSC-regular;
	}
</style>
