<template>
	<view class="calendar" v-if="ifLoading">
		<view class="data font28 color-white">
			<view class="btn btn-pro" @tap="proEv"></view>
			<view class="txt">{{curYear}}年{{curMonth<10?'0'+curMonth:curMonth}}月</view>
			<view class="btn btn-next" @tap="nextEv"></view>
		</view>
		<view class="week font24">
			<view class="item" v-for="(item,index) in weeks" :key="index">{{item}}</view>
		</view>
		<view class="days bg-white font26">
			<view class="item" :class="daysIndex==item.status&&item.status!==-2?'active':''" v-for="(item,index) in days" :key="index">
				<view class="txt color-99" v-if="item.status==-2">{{item.date}}</view>
				<view @tap="toDetail(item.status)" class="txt color-white bg-green" v-if="statusObj.ok.indexOf(item.status)!==-1&&statusObj.add.indexOf(item.status)==-1">{{item.date}}</view>
				<view @tap="toDetail(item.status)" class="txt color-white bg-orange" v-if="statusObj.add.indexOf(item.status)!==-1&&statusObj.no.indexOf(item.status)==-1">{{item.date}}</view>
				<view @tap="toDetail(item.status)" class="txt color-white bg-red" v-if="statusObj.no.indexOf(item.status)!==-1">{{item.date}}</view>
				<view class="txt" @tap="toDetail(item.status)" v-if="statusObj.ok.indexOf(item.status)==-1&&statusObj.add.indexOf(item.status)==-1&&statusObj.no.indexOf(item.status)==-1&&item.status!==-2">{{item.date}}</view>
			</view>
		</view>
		<view class="tips font22">
			<view class="item">正常打卡</view>
			<view class="item">补打卡</view>
			<view class="item">非正常打卡</view>
		</view>
	</view>
</template>
<script>
	import {
		mapState
	} from 'vuex'; //引入mapState
	export default {
		name: 'sign-calendar',
		props:{
			// 当前选中项
			daysIndex:{
				type:Number,
				default:new Date().getDate()
			},
		},
		data() {
			return {
				weeks: ['日', '一', '二', '三', '四', '五', '六'], //星期列表
				days:[], //天数
				curYear:new Date().getFullYear(), //当前年
				curMonth:new Date().getMonth() + 1, //当前月
				statusObj:{}, //状态列表
				ifLoading:false, //是否加载完成
			};
		},
		mounted() {
			// 获取数组，绘制格子
			this.getDaysList();
		},
		methods: {
			// 获取数组，绘制格子
			getDaysList(){
				// 清空数组
				this.days = [];
				// 计算当月天数
				let curDays = new Date(this.curYear,this.curMonth, 0).getDate();
				// 计算当月第一天星期几
				let firstWeek = new Date(Date.UTC(this.curYear, this.curMonth-1, 1)).getDay();
				// 计算当月最后一天星期几
				let lastWeek = new Date(Date.UTC(this.curYear, this.curMonth-1,curDays)).getDay();
				
				// 上月还有展示
				if(firstWeek!==0){
					// 绘制上月天数占的格子
					this.proMonthDays(firstWeek,curDays);
				}else{
					// 绘制当月天数占的格子
					this.curMonthDays(curDays);
				}
				// 下月还有展示
				if(lastWeek!==6){
					// 绘制下月天数占的格子
					this.nextMonthDays(lastWeek)
				}
			},
			
			// 绘制上月天数占的格子
			proMonthDays(firstWeek,curDays){
				// 计算上月天数
				let proDays = 0;
				if(this.curMonth==1){
					proDays = new Date(this.curYear-1,12, 0).getDate();
				}else{
					proDays = new Date(this.curYear,this.curMonth-1, 0).getDate();
				}
				// 创建上月天数数组
				let proDaysArr=[];
				for (let i=proDays-firstWeek+1; i<=proDays;i++) {
					let proObj = {
						date: i,
						status: -2
					}
					proDaysArr.push(proObj);
				}
				this.days = proDaysArr;
				// 绘制当月天数占的格子
				this.curMonthDays(curDays);
			},
			
			// 绘制当月天数占的格子
			curMonthDays(curDays) {
				// 创建当月天数数组
				let curDaysArr=[];
				for (let i=1; i<=curDays;i++) {
					let curObj = {
						date: i,
						status: i
					}
					curDaysArr.push(curObj);
				}
				this.days = this.days.concat(curDaysArr);
				// 获取状态列表
				this.getStatusObj(uni.getStorageSync('casual_worksite_id'));
			},
			
			// 绘制下月天数占的格子
			nextMonthDays(lastWeek) {
				// 创建上月天数数组
				let nextDaysArr=[];
				for (let i=1; i<=6-lastWeek;i++) {
					let nextObj = {
						date: i,
						status: -2
					}
					nextDaysArr.push(nextObj);
				}
				this.days = this.days.concat(nextDaysArr);
			},
			
			// 获取状态列表
			getStatusObj(id){
				if(id&&id!==''&&id!==undefined){
					uni.setStorageSync('casual_worksite_id',uni.getStorageSync('worker_role')!==0?id:0)
				}else{
					uni.setStorageSync('casual_worksite_id',uni.getStorageSync('worker_role')!==0?uni.getStorageSync('worksite_id'):0)
				}
				let params = {};
				if(uni.getStorageSync('worksite_id')){
					params = {
						date:`${this.curYear}-${this.curMonth<10?'0'+this.curMonth:this.curMonth}`,
						worksite_id:uni.getStorageSync('casual_worksite_id')
					};
				}else{
					params = {
						date:`${this.curYear}-${this.curMonth<10?'0'+this.curMonth:this.curMonth}`
					};
				}
				
				this.$requst.get('/api/v1/user/month-sign-log',params).then(res=>{
					if(res.code==0){
						console.log(res,'月度打卡信息');
						this.statusObj = res.data;
						this.ifLoading = true;
					}
				})
			},
			
			// 去查看打卡记录
			toDetail(status){
				this.daysIndex = status;
				let date = `${this.curYear}-${this.curMonth<10?'0'+this.curMonth:this.curMonth}-${status<10?'0'+status:status}`;
				this.$emit('getDate', date);
			},
			
			// 上一月
			proEv(){
				if(this.curMonth!==1){
					this.curMonth--;
				}else{
					this.curMonth = 12;
					this.curYear--;
				}
				// 获取数组，绘制格子
				this.getDaysList();
			},
			
			// 下一月
			nextEv(){
				if(this.curMonth!==12){
					this.curMonth++
				}else{
					this.curMonth = 1;
					this.curYear++;
				}
				// 获取数组，绘制格子
				this.getDaysList();
			},
		}
	}
</script>

<style scoped>
	.calendar .data{
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 92rpx;
		padding: 0 22rpx;
		background-color: #0788ff;
	}
	
	.calendar .btn{
		width: 42rpx;
		height: 42rpx;
		background-image: url(/static/icon/icon-calendar-btn.png);
		background-size: cover;
	}
	
	.calendar .btn-next{
		transform: rotateY(180deg);
	}
	
	.calendar .week{
		display: flex;
		align-items: center;
		background-color: #ececec;
	}
	
	.calendar .week .item{
		width: calc(100%/7);
		line-height: 58rpx;
		text-align: center;
	}
	
	.calendar .days{
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}
	
	.calendar .days .item{
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		align-items: center;
		width: calc(100%/7);
		height: 86rpx;
		border-top: 2rpx solid #ececec;
		border-right: 2rpx solid #ececec;
		position: relative;
	}
	
	.calendar .days .item.active{
		background-color: #ececec;
	}
	
	.calendar .days .item:nth-of-type(7n){
		border-right: 0;
	}
	
	.calendar .days .item .txt{
		display: flex;
		justify-content: center;
		align-items: center;
		width: 58rpx;
		height: 58rpx;
		border-radius: 100%;
	}
	
	.calendar .tips{
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 30rpx 0;
	}
	
	.calendar .tips .item{
		display: flex;
		align-items: center;
		height: 30rpx;
		margin: 0 12rpx;
	}
	
	.calendar .tips .item:before{
		content: '';
		display: block;
		width: 12rpx;
		height: 12rpx;
		background-color: #ec7807;
		border-radius: 100%;
		margin-right: 9rpx;
	}
	
	.calendar .tips .item:first-child:before{
		background-color: #25a63b;
	}
	
	.calendar .tips .item:last-child:before{
		background-color: #ec0707;
	}
</style>
