<template>
	<!-- 打卡日历页面 -->
	<view :class="[AppTheme]" class="all">
		<view class="bar">
			<!-- 上一个月 -->
			<view class="previous" @click="handleCalendar(0)">
				<button class="barbtn  bg-linear-gradient" v-if="langType == 'ch'">上一月</button>
				<button class="barbtn  bg-linear-gradient" v-else>Last</button>
			</view>
			<!-- 显示年月 -->
			<view class="date">{{ cur_year || '--' }} 年 {{ cur_month || '--' }} 月</view>
			<!-- 下一个月 -->
			<view class="next" @click="handleCalendar(1)">
				<button class="barbtn bg-linear-gradient" v-if="langType == 'ch'">下一月</button>
				<button class="barbtn bg-linear-gradient" v-else>Next</button>
			</view>
		</view>
		<!-- 显示星期 -->
		<view class="week" v-if="langType == 'ch'">
			<view v-for="(item, index) in weeks_ch" :key="index">{{ item }}</view>
		</view>
		<view class="week" v-else>
			<view v-for="(item, index) in weeks_en" :key="index">{{ item }}</view>
		</view>
		<view class="myDateTable bg-linear-gradient">
			<view v-for="(item, j) in days" :key="j" class="dateCell">
				<view v-if="item.date == undefined || item.date == null" class="cell"><text
						:decode="true">&nbsp;&nbsp;</text></view>
				<view v-else>
					<!-- 已签到日期 -->
					<view v-if="item.isSign == true" class="cell greenColor bgWhite  ">
						<text>{{ item.date }}</text>
					</view>
					<!-- 漏签 -->
					<view @click="clickSignUp(item.date, 0)" class="cell redColor bgGray"
						v-else-if="cur_year < toYear || (cur_year == toYear && cur_month < toMonth) || (cur_year == toYear && cur_month == toMonth && item.date < today)">
						<!-- 小程序不兼容这个 v-else-if="(new Date(cur_year+'-'+cur_month+'-'+item.date))<(new Date())"> -->
						<text>{{ item.date }}</text>
					</view>
					<!-- 今日未签到-->
					<view @click="clickSignUp(item.date, 1)" class="cell whiteColor bgBlue"
						v-else-if="item.date == today && cur_month == toMonth && cur_year == toYear">
						<text>签到</text>
					</view>
					<!-- 当前日期之后 -->
					<view class="whiteColor cell" v-else>
						<text>{{ item.date }}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="TipArea ">
			<view class="record">
				<view class="record_p1">
					截至目前,已坚持打卡
				</view>
				<view class="record_p2">
					<view class="days bg-linear-gradient">{{count}}</view>
					<text>天</text>
				</view>
				<view class="record_p3">
					本月累计打卡<text>{{SignUp.length||'0'}}</text>天
				</view>
				<view class="record_p4">
					请再接再厉,继续努力!
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import signApi from '@/api/home/index.js';
	import tabbar from '@/components/tabbar/tabbar.vue';
	export default {
		data() {
			return {
				primary:this.$theme.primary,
				days: [],
				SignUp: [],    //本月每天的签到信息
				signrules: '',
				cur_year: 0, //当前选的年
				cur_month: 0, //当前选的月
				today: parseInt(new Date().getDate()), //本日
				toMonth: parseInt(new Date().getMonth() + 1), //本月
				toYear: parseInt(new Date().getFullYear()), //本年
				weeks_ch: ['日', '一', '二', '三', '四', '五', '六'],
				weeks_en: ['Sun', 'Mon', 'Tues', 'Wed', 'Thur', 'Fri', 'Sat'],
				settingFile:getApp().globalData.siteinfo,
				count:0
			};
		},
		components: {
			tabbar
		},
		props: {
			sendYear: {
				type: Number,
				default: new Date().getFullYear()
			},
			sendMonth: {
				type: Number,
				default: new Date().getMonth() + 1
			},
			dataSource: {
				//已签到的数据源
				type: Array,
				default: () => {
					return [];
				}
			},
			langType: {
				//只是示例一个翻译而已，要想所有都翻译自己可以再加加
				type: String,
				default: 'ch'
			}
		},
		created() {
			this.cur_year = this.sendYear;
			this.cur_month = this.sendMonth;

			this.calculateEmptyGrids(this.cur_year, this.cur_month);
			this.calculateDays(this.cur_year, this.cur_month);

			this.getSignUp();
		},
		watch: {
			dataSource: 'onResChange'
		},
		methods: {
			getSignUp() {
				signApi.shopSign({}).then(res => {
					this.count = res.data.count
					if (res.status == 200) {
						console.log(res, "我是签到信息数据")
						this.signrules = res.data.signrules
						let arr = [];
						JSON.parse(res.data.cache).forEach(item => {
							 
							arr.push(item.sign_time);
						});
						this.SignUp = arr;
						this.onJudgeSign();
					} else {
						this.$api.msg('网络异常');
					}
				});
			},

			// 获取当月共多少天
			getThisMonthDays(year, month) {
				return new Date(year, month, 0).getDate();
			},
			// 获取当月第一天星期几
			getFirstDayOfWeek(year, month) {
				return new Date(Date.UTC(year, month - 1, 1)).getDay();
			},
			// 计算当月1号前空了几个格子，把它填充在days数组的前面
			calculateEmptyGrids(year, month) {
				//计算每个月时要清零
				this.days = [];
				const firstDayOfWeek = this.getFirstDayOfWeek(year, month);
				if (firstDayOfWeek > 0) {
					for (let i = 0; i < firstDayOfWeek; i++) {
						var obj = {
							date: null,
							isSign: false
						};
						this.days.push(obj);
					}
				}
			},

			// 绘制当月天数占的格子，并把它放到days数组中
			calculateDays(year, month) {
				const thisMonthDays = this.getThisMonthDays(year, month);
				// this.columnsLen=Math.ceil(thisMonthDays/7);
				// console.log(this.columnsLen);
				for (let i = 1; i <= thisMonthDays; i++) {
					var obj = {
						date: i,
						isSign: false
					};
					this.days.push(obj);
				}
				//console.log(this.days);
			},

			onResChange(newD, oldD) {
				this.SignUp = newD;
				this.onJudgeSign();
			},
			//匹配判断当月与当月哪些日子签到打卡
			onJudgeSign() {
				var signs = this.SignUp;
				var daysArr = this.days;

				for (var i = 0; i < signs.length; i++) {
					var current = new Date(signs[i].replace(/-/g, '/'));
					var year = current.getFullYear();
					var month = current.getMonth() + 1;
					var day = current.getDate();
					day = parseInt(day);
					for (var j = 0; j < daysArr.length; j++) {
						//年月日相同则打卡成功
						if (year == this.cur_year && month == this.cur_month && daysArr[j].date == day) {
							//&& signs[i].isSign == "今日已打卡"
							// console.log(daysArr[j].date, day);
							daysArr[j].isSign = true;
						}
					}
				}
				this.days = daysArr;
			},

			// 切换控制年月，上一个月，下一个月
			handleCalendar(type) {
				const cur_year = parseInt(this.cur_year);
				const cur_month = parseInt(this.cur_month);
				var newMonth;
				var newYear = cur_year;
				if (type === 0) {
					//上个月
					newMonth = cur_month - 1;
					if (newMonth < 1) {
						newYear = cur_year - 1;
						newMonth = 12;
					}
				} else {
					newMonth = cur_month + 1;
					if (newMonth > 12) {
						newYear = cur_year + 1;
						newMonth = 1;
					}
				}
				this.calculateEmptyGrids(newYear, newMonth);
				this.calculateDays(newYear, newMonth);
				this.cur_year = newYear;
				this.cur_month = newMonth;
				this.SignUp = []; //先清空
				signApi
					.shopSignPost({
						nowYear: newYear,
						nowMonth: newMonth
					})
					.then(res => {
						if (res.status == 200) {
							console.log(res,"resresres")
							let arr = [];
							res.data.signList.forEach(item => {
								item.sign_time = this.formatDate('Y/m/d', Number(item.sign_time));
								arr.push(item.sign_time);
							});
							this.SignUp = arr;
							this.onJudgeSign();
						} else {
							this.$api.msg('网络异常');
						}
					});

				this.$emit('dateChange', this.cur_year + '-' + this.cur_month); //传给调用模板页面去拿新数据
			},

			clickSignUp(date, type) {
				//type=0补签，type=1当日签到

				var str = '签到';
				if (type == 0) {
					//如果不需要补签功能直接在这阻止不执行后面的代码就行。
					str = '补签';
				}
				signApi.vipSign({}).then(res => {
					if (res.status == 200) {
						uni.showToast({
							title: str + '成功' + date + '号',
							icon: 'success',
							duration: 2000
						});
						this.getSignUp();
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'success',
							duration: 2000
						});
					}
				});

				// this.SignUp.push(this.cur_year + "-" + this.cur_month + "-" + date); //自动加假数据，写了接口就不用了

				// console.log(this.SignUp);
				// this.$forceUpdate();

				// this.$emit('clickChange', this.cur_year + '-' + this.cur_month + '-' + date); //传给调用模板页面

				// //refresh
				// this.onJudgeSign();
			}
		}
	};
</script>

<style lang="scss">
	page {
		// width: 100%;
		// height: 100%;
		// padding-bottom: 140rpx;
	}

	.all {
		// margin-top: 20rpx;
		// height: 100vh;
	}

	.all .bar {
		display: flex; 
		flex-direction: row;
		justify-content: space-between;
		margin: 0 20rpx;
		padding: 10rpx;
		align-items: center;
	}

	.date {
		font-size: 30upx;
	}

	.bar .barbtn {
		height: 30px;
		line-height: 30px;
		font-size: 12px;
		color: #fff;
	}

	.all .week {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 20rpx;
		padding-left: 40rpx;
		padding-right: 40rpx;
		margin: 20rpx;
		border-radius: 10px;
		background-color: #fff;
	}

	.myDateTable {
		margin: 2.5vw;
		padding: 2vw;
		border-radius: 10px;
	}

	.myDateTable .dateCell {
		width: 13vw;
		padding: 1vw;
		display: inline-block;
		text-align: center;
		font-size: 16px;
	}

	.dateCell .cell {
		display: flex;
		border-radius: 50%;
		height: 12vw;
		justify-content: center;
		align-items: center;
	}

	.whiteColor {
		color: #fff;
	}

	.greenColor {
		color: #01b90b;
		font-weight: bold;
	}

	.bgWhite {
		background-color: #fff;
	}

	.bgGray {
		background-color: rgba(255, 255, 255, 0.42);
	}

	.bgBlue {
		font-size: 14px;
		background-color: #4b95e6;
	}

	.redColor {
		color: #ff0000;
	}

	.TipArea {
		word-break: break-all;
		word-wrap: break-word;
		font-size: 14px;
		padding: 10px;

		.record {
			text-align: center;
			line-height: 50rpx;
			font-size: 30rpx;

			.record_p1 {
				margin-top: 10rpx;
			}
			.record_p2 {
				margin: 40rpx 0;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-wrap: wrap;
				.days{
					width: 100rpx;
					height: 100rpx;
					line-height: 100rpx;
					color: #fff;
					font-size: 60rpx;
					border-radius: 100%;
					margin-right: 20rpx;
				}
			}

			.record_p3 {
				margin-bottom: 20rpx;
				text{
					color: #ff0000;
					font-size: 40rpx;
					padding: 10rpx;
				}
			}
		}
	}

	.impTip {
		display: inline-block;
		color: #ff0000;
	}
</style>
