<template>
	<view class="calendarBox">
		<view class="content-top">
			<view class="content-left" @click="prveClick">
				<text class="iconfont icon-gengduo more_icon"></text>
			</view>
			<view class="content-scroll">
				<view class="center-cut-menu">
					<scroll-view scroll-x="true" show-scrollbar="false" scroll-with-animation="true" :scroll-left="scrollLeft" class="scroll-view horizontalScrollView" :class="{'monthScroll':params.date!=='day'}" >
					  <view class="scroll-item" :style="'width:'+itemWidth+'px'" v-for="(item, index) in titleList" :key="index" @click="changeMenu(index)">
						<view class="viewItem" :class="{'active':curIndex == index,'monthViewItem':params.date !=='day','todoayView':item.todoay}">
							<text class="item-text">{{item.name}}</text>
							<text class="item-date" v-if="params.date == 'day'">{{item.text}}</text>
							<text class="todoay" v-if="item.todoay">今</text>
						</view>
					  </view>
					</scroll-view>
				</view>
			</view>
			<view class="content-right" @click="nextClick">
				<text class="iconfont icon-gengduo"></text>
			</view>
		</view>
		<swiper v-if="params.date!='day'" class="swiper-box-list" circular="true" easing-function="linear" :current="curIndex" @change="swiperChange" :style="'height:'+swiperHeight+'px'">
			<swiper-item class="swiper-topic-list" v-for="(item,index) in titleList" :key="index">
				<view :style="'height:'+swiperHeight+'px'" v-if="curIndex == index">
					<view class="swiper-item padd_top12 font14">
						<view class="device_row" v-for="(em,inde) in item.data" :key="inde">
							<view class="rowView" :class="{'active':inde==0,'todoayView':em.todoay}">
								<text class="name font_bold">{{em.text}}</text>
								<text class="text">{{em.name}}</text>
								<text v-if="em.todoay" class="todoay">今</text>
							</view>
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				params:this.params,
				
				curIndex:0,
				scrollLeft:0,
				swiperHeight:0,
				itemWidth:53,
				itemColumn:5,
				
				titleList:[
					{name:'日',date:11,text:''},
					{name:'一',date:12,text:''},
					{name:'二',date:13,text:''},
					{name:'三',date:14,text:''},
					{name:'四',date:15,text:''},
					{name:'五',date:16,text:''},
					{name:'六',date:17,text:''},
				],
			}
		},
		inject:['params','changeDateText'],
		watch:{
			'params.date':{
				handler(val){
					this.params.date = val;
					this.itemColumn = val=='day'?5:4
					this.setTitle();
					this.getScrollW();
					this.getSwiperH();
				},
				immediate:false,
			}
		},
		mounted() {
			this.setTitle();
		},
		methods:{
			getScrollW() {
				let itemWidth = 0;
				let query = uni.createSelectorQuery().in(this);
				query.select('.scroll-view').boundingClientRect(data => {
					this.itemWidth = (data.width/this.itemColumn).toFixed(0);
					itemWidth = (data.width/this.itemColumn).toFixed(0);
					this.getItemWidth(itemWidth);
				}).exec();
			},
			getSwiperH(){
				if(this.params.date!='day'){
					setTimeout(()=>{
						let query = uni.createSelectorQuery().in(this);
						query.select('.swiper-item').boundingClientRect(data => {
							if(data){
								this.swiperHeight = data.height;
							}else{
								this.getSwiperH();
							}
						}).exec();
					},100)
				}
			},
			getItemWidth(num){
				let query = uni.createSelectorQuery().in(this);
				query.selectAll('.scroll-item').boundingClientRect(data => {
					let dataLen = data.length;
					for (let i = 0; i < dataLen; i++) {
						this.titleList[i].width = Number(num);
						this.titleList[i].left = Number(num) + Number(data[i].left);
					}
				}).exec();
			},
			
			// 获取数据
			setTitle(){
				if(this.params.date == 'day'){
					let list = this.$wf.getDatesOfWeek();
					let todoay = this.$wf.getToday();
					list.forEach(item=>{
						if(item.date == todoay){
							item.todoay = true;
						}
						item.text = item.date.split('-')[2];
					})
					if(this.curIndex >= list.length){
						this.curIndex = list.length - 1;
					}
					this.titleList = list;
				}
				if(this.params.date == 'week'){
					let list = [];
					let arr = this.$wf.getWeeksOfMonth();
					
					arr.forEach((item,index)=>{
						let date = item.find(em=> em!==null && em!==undefined);
						let todoay = this.$wf.getToday();
						item.forEach(em=>{
							if(em){
								if(em.date == todoay){
									em.todoay = true;
								}
								em.text = em.date.split('-')[2];
								em.name = '星期'+em.name;
							}
						})
						list.push({
							name:'第'+this.$wf.numberToChineseLower(Number(index+1))+'周',
							date:date.date,
							data:item.filter(em=> em!==null),
						})
					})
					if(this.curIndex >= list.length){
						this.curIndex = list.length - 1;
					}
					this.titleList = list;
				}
				if(this.params.date == 'month'){
					let list = [];
					let arr = this.$wf.getCurrentYearData();
					arr.forEach((item,index)=>{
						let weeks = [];
						item.weeks.forEach((em,ind)=>{
							let dateList = em.filter(em=> em!==null);
							weeks.push({
								data:dateList,
								text:dateList[0].date.split('-')[2],
								name:'第'+Number(ind+1)+'周',
								date:dateList[0].date,
							})
						})
						list.push({
							name:this.$wf.numberToChineseLower(Number(item.month))+'月',
							date:weeks[0].date,
							data:weeks,
						})
					})
					this.titleList = list;
				}
				
				this.getScrollW();
				this.changeDate();
			},
			
			// 选择标题
			changeMenu(index) {
				this.curIndex = index;
				this.scrollLeft = 0;
				for (let i = 0; i < index - 1; i++) {
					this.scrollLeft += this.titleList[i].width;
				};
				this.changeDate(this.titleList[index].date);
				
				if(this.params.date!='day'){
					this.getSwiperH();
				}
			},
			swiperChange(e) {
				let index = e.detail.current;
				this.changeMenu(index);
			},
			prveClick(){
				if(this.params.date == 'day'){
					let date = String(this.titleList[0].date);
					let list = this.$wf.getPreviousWeekDatesWithDays(date);
					list.forEach(item=>{
						item.text = item.date.split('-')[2];
					})
					this.titleList = list;
				}
				if(this.params.date == 'week'){
					// 获取本月的选中周日期
					let date = this.titleList[this.curIndex];
					let countNum = this.$wf.getPreviousMonthWeekCount(String(date.date));
					if(this.curIndex >= countNum){
						this.curIndex = countNum-1;
					}
					let list = [];
					let arr = this.$wf.getPreviousMonthGroupedByWeek(String(date.date));
					arr.forEach((item,index)=>{
						let date = item.find(em=> em!==null && em!==undefined);
						item.forEach(em=>{
							if(em){
								em.text = em.date.split('-')[2];
								em.name = '星期'+em.name;
							}
						})
						list.push({
							name:'第'+this.$wf.numberToChineseLower(Number(index+1))+'周',
							date:date.date,
							data:item.filter(em=> em!==null),
						})
					})
					this.titleList = list;
				}
				if(this.params.date == 'month'){
					// 获取本年的选中周日期
					let date = this.titleList[this.curIndex];
					let list = [];
					let arr = this.$wf.getPreviousYearData(String(date.date));
					arr.forEach((item,index)=>{
						let weeks = [];
						item.weeks.forEach((em,ind)=>{
							let dateList = em.filter(em=> em!==null);
							weeks.push({
								data:dateList,
								text:dateList[0].date.split('-')[2],
								name:'第'+Number(ind+1)+'周',
								date:dateList[0].date,
							})
						})
						list.push({
							name:this.$wf.numberToChineseLower(Number(item.month))+'月',
							date:weeks[0].date,
							data:weeks,
						})
					})
					this.titleList = list;
				}
				
				this.getScrollW();
				this.changeDate();
				
				if(this.params.date!='day'){
					this.getSwiperH();
				}
			},
			nextClick(){
				if(this.params.date == 'day'){
					let date = String(this.titleList[this.titleList.length -1].date);
					let list = this.$wf.getNextWeekDatesWithDays(date);
					list.forEach(item=>{
						item.text = item.date.split('-')[2];
					})
					this.titleList = list;
				}
				// 获取下一个月所有周
				if(this.params.date == 'week'){
					// 获取本月的选中周日期
					let date = this.titleList[this.curIndex];
					let countNum = this.$wf.getNextMonthWeekCount(String(date.date));
					if(this.curIndex >= countNum){
						this.curIndex = countNum-1;
					}
					let list = [];
					let arr = this.$wf.getNextMonthGroupedByWeek(String(date.date));
					arr.forEach((item,index)=>{
						let date = item.find(em=> em!==null && em!==undefined);
						item.forEach(em=>{
							if(em){
								em.text = em.date.split('-')[2];
								em.name = '星期'+em.name;
							}
						})
						list.push({
							name:'第'+this.$wf.numberToChineseLower(Number(index+1))+'周',
							date:date.date,
							data:item.filter(em=> em!==null),
						})
					})
					this.titleList = list;
				}
				// 获取下一年的日期
				if(this.params.date == 'month'){
					let date = this.titleList[this.curIndex];
					let list = [];
					let arr = this.$wf.getNextYearData(String(date.date));
					arr.forEach((item,index)=>{
						let weeks = [];
						item.weeks.forEach((em,ind)=>{
							let dateList = em.filter(em=> em!==null);
							weeks.push({
								data:dateList,
								text:dateList[0].date.split('-')[2],
								name:'第'+Number(ind+1)+'周',
								date:dateList[0].date,
							})
						})
						list.push({
							name:this.$wf.numberToChineseLower(Number(item.month))+'月',
							date:weeks[0].date,
							data:weeks,
						})
					})
					this.titleList = list;
				}
				
				this.getScrollW();
				this.changeDate();
				
				if(this.params.date!='day'){
					this.getSwiperH();
				}
			},
			
			// 修改时间的阶段
			changeDate(item){
				let text = null;
				if(this.titleList[this.curIndex] == undefined){
					text = this.titleList[this.titleList.length -1].date;
					this.current = this.titleList.length -1;
				}else{
					text = this.titleList[this.curIndex].date;
				}
				if(item){
					text = item
				}
				let month = text.split('-')[0] + '-' + text.split('-')[1]
				this.changeDateText(month);
			}
		}
	}
</script>

<style scoped lang="scss">
	.content-top{
		display: flex;
		align-items: center;
		.content-left{flex-basis: 30px;text-align: center;
			.more_icon{display: inline-block;transform: scaleX(-1);}
		}
		.content-scroll{flex: 1;overflow: hidden;}
		.center-cut-menu {width: 100%;height: 50px;display: flex;align-items: center;
			.scroll-view {height: 50px;white-space: nowrap;
				.scroll-item {height: 100%;padding: 0 5px;display: inline-block;text-align: center;box-sizing: border-box;
				.viewItem{
					position: relative;
					font-size: 14px;height: 100%;display: flex;flex-direction: column;align-items: center;justify-content: center;
					border: 1px solid $uni-color-primary;box-sizing: border-box;border-radius: 8px;
				}
				.monthViewItem{
					border: none;
					border-radius: 40px;
				}
				.active {
					background: $uni-color-primary;
				}
				.todoay{
					display: flex;align-items: center;justify-content: center;background: $uni-bg-color-success;
					position: absolute;top: 2px;right: 2px;z-index: 20;
					border-radius: 2px;width: 12px;height: 12px;font-size: 8px;
				}
			  }
			}
			.monthScroll{height: 27px;}
		}
		.content-right{flex-basis: 30px;text-align: center;}
	}
	.swiper-box-list{height: 240px;padding:0 12px;
		.swiper-item{display: flex;flex-direction: row;flex-wrap: wrap;}
		.device_row{display: flex;flex-direction: column;width: 33%;justify-content: center;align-items: center;margin-bottom: 12px;height: 70px;box-sizing: border-box;padding: 0 8px;position: relative;
			.name{margin-bottom: 6px;}
			.rowView{display: flex;flex-direction: column;justify-content: center;align-items: center;height: 100%;width: 100%;padding: 12px 0;box-sizing: border-box;position: relative;}
			.todoayView{padding: 0 8px; background: $uni-bg-color-default-dark; box-sizing: border-box;border-radius: 8px;}
			.active{background: $uni-bg-color-info;border-radius: 8px;}
			.todoay{position: absolute;top: -5px;right: -5px;z-index: 20;display: flex;align-items: center;justify-content: center;background: $uni-bg-color-success;width: 16px;height: 16px;border-radius: 3px;font-size: 10px;}
		}
	}
</style>