<template>
	<u-popup
		round="10"
		mode="center"
		:show="isShow"
		@close="isShow = false;">
		<view class="container">
			<view class="head">
				<view class="f32_FFF mb20">今天</view>
				<view class="f40_FFF">{{nowDate | dateFilter}}</view>
				<text @tap.stop='isShow = false' class="iconfont icon-guanbi2"></text>
			</view>
			<view class="year-sel flex_abs">
				<text class="iconfont icon-left" @tap="monthChange(0)" />
				<text class="f32_333">{{nowYear}}年{{thisMonth | monthFilter}}月</text>
				<text class="iconfont icon-left right" @tap="monthChange(1)" />
			</view>
			<view class="pv30">
				<view class="week-sel">
					<block v-for="(item,index) in week" :key="index">
						<view class="f28_666">{{item}}</view>
					</block>
				</view>
				<view class="day-sel">
					<block v-for="(item,index) in days" :key="index">
						<view 
							class="item" 
							@tap.stop="selDate(item)" 
							:class="{
								highLight: choosDate == item.date,
								gray: !canBefore && nowDate > item.date
							}">
							{{item.day}}
							<!-- <text  v-if="index == 40" >已满</text> -->
						</view>
					</block>
				</view>
				
				<view class="period-sel" v-if="isPeriod">
					<view class="left">选择时间段</view>
					<view class="right">
						<view class="item" :class="choosPeriod == 0 ? 'active':''" @tap.stop='choosPeriod = 0'>
							<text class="iconfont icon-radio2"></text>
							<text class="text">上午</text>
						</view>
						<view class="item" :class="choosPeriod == 1 ? 'active':''" @tap.stop='choosPeriod = 1'>
							<text class="iconfont icon-radio2"></text>
							<text class="text">下午</text>
						</view>
					</view>
				</view>
				
				<view class="btn-group">
					<view class="btn1" @click="clear()">清空</view>
					<view class="btn2" @click="confirm()">确定</view>
				</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
	import utils from '@/common/utils/util.js';
	
	const YEAR = new Date().getFullYear();
	import { getDays } from '@/common/utils/day.js';
	
	export default {
		props: {
			value: {
				default: true,
				type: Boolean
			},
			isPeriod: { // 是否需要时间段选择
				default: false,
				type: Boolean
			},
			canBefore: { // 能否选择以往日期
				default: false,
				type: Boolean
			},
		},
		
		filters: {
			monthFilter(m) {
				return m < 10 ? '0' + m : m;
			},
			dateFilter(val){
				let arr = val.split('-');
				return `${arr[0]}年${arr[1]}月${arr[2]}日`
			}
		},
		
		data() {
			return {
				week: ['日', '一', '二', '三', '四', '五', '六'],
				days: [],
				nowDate: '',
				nowYear: '',
				nowMonth: '',
				thisMonth: '',
				choosDate:'',
				choosPeriod:0
			};
		},
		computed: {
			isShow: {
				get() {
					return this.value
				},
				set(bol) {
					this.crossPage.$emit('input', bol)
				}
			}
		},
		mounted() {
			this.getNow();
		},
		methods:{
			confirm(){
				if(!this.choosDate){
					return this.$toast('请先选择日期');
				}
				this.crossPage.$emit('confirm',{
					choosDate: this.choosDate,
					choosPeriod: this.choosPeriod
				});
				this.isShow = false;
			},
			
			clear() {
				this.choosDate = ''
				this.crossPage.$emit('confirm',{
					choosDate: '',
					choosPeriod: ''
				});
				this.isShow = false;
			},
			
			selDate(item){
				if(!this.canBefore && item.date < this.nowDate)return;
				this.choosDate = item.date;
			},
			
			monthChange(type) {
				if (type == 0) {
					if (!this.canBefore && this.nowYear == YEAR && this.nowMonth == this.thisMonth) return; //不能选中当前这个月之前的日期
					if (this.thisMonth == 1) {
						this.thisMonth = 12;
						this.nowYear--;
					} else {
						this.thisMonth--;
					}
				} else {
					if (this.thisMonth == 12) {
						this.thisMonth = 1;
						this.nowYear++;
					} else {
						this.thisMonth++;
					}
				}
				this.days = getDays(this.nowYear, this.thisMonth,1)
			},
			
			getNow() {
				let date = new Date();
				let timeStamp = date.getTime() / 1000;
				this.nowDate = utils.timeToDate(timeStamp,'ymd');
				this.nowYear = date.getFullYear();
				this.nowMonth = date.getMonth() + 1;
				this.thisMonth = date.getMonth() + 1;
				this.days = getDays(YEAR, this.nowMonth,1)
			},
		}
	}
</script>

<style scoped lang="scss">
.container{
	background: #FFFFFF;
	border-radius: 20rpx;
	width: 630rpx;
	overflow: hidden;
	padding-bottom: 40rpx;
	position: relative;
	.icon{
		width: 40rpx;
		height: 40rpx;
	}
	.day-sel {
		display: flex;
		flex-wrap: wrap;
		padding-bottom: 40rpx;
	
		.item {
			width: 80rpx;
			height: 80rpx;
			position: relative;
			line-height: 80rpx;
			text-align: center;
			font-size: 28rpx;
			font-weight: 600;
			color: rgba(51, 51, 51, 1);
	
			&.gray{
				color: #CCCCCC;
			}
			
			&.highLight {
				background: $theme-color;
				color: #FFFFFF;
				border-radius: 50%;
			}
	
			text {
				font-size: 20rpx;
				position: absolute;
				bottom: 8rpx;
				left: 50%;
				transform: translateX(-50%);
			}
		}
	}
	
	.period-sel {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 60rpx;
		.left {
			font-size: 32rpx;
			font-weight: 600;
		}
		.right {
			display: flex;
			align-items: center;
			.item {
				display: flex;
				align-items: center;
				margin-left: 40rpx;
				font-size: 32rpx;
				.iconfont {
					color: #eaeaea;
					margin-right: 10rpx;
				}
				&.active {
					.iconfont {
						color: $theme-color;
					}
					.text {
						color: $theme-color;
					}
				}
			}
		}
	}
	
	.week-sel {

		display: flex;
		view {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 80rpx;
			height: 80rpx;
		}
	}
	.head{
		padding: 40rpx 30rpx;
		background: $theme-color;
		position: relative;
		.iconfont {
			font-size: 30rpx;
			position: absolute;
			right: 30rpx;
			top: 40rpx;
			color: #FFFFFF;
		}
	}
	.year-sel {
		height: 80rpx;
		padding: 0 30rpx;
		.right {
			transform: rotate(180deg);
		}
	}
	
	.btn-group {
		display: flex;
		align-items: center;
		.btn1 {
			flex: 1;
			border: 1px solid #ebedf0;
			border-radius: 8rpx;
			align-items: center;
			justify-content: center;
			display: flex;
			height: 80rpx;
			font-size: 32rpx;
			margin-right: 30rpx;
		}
		.btn2 {
			width: 360rpx;
			border: 1px solid $theme-color;
			border-radius: 8rpx;
			align-items: center;
			justify-content: center;
			display: flex;
			height: 80rpx;
			font-size: 32rpx;
			background: $theme-color;
			color: #FFFFFF;
		}
	}
}
</style>