<template>
	<u-popup :show="isShow" round="10" @close="close">
		<view class="dialog">
			<view class="head-container">
        <view class="left">
          <view class="text" @tap.stop="close">取消</view>
        </view>
        <view class="right">
          <view class="text" @tap.stop="reset">重置</view>
          <view class="text" @tap.stop="confirm">确定</view>
        </view>
			</view>
			<view class="year-sel">
        <u-icon name="arrow-left" size="20" @click="monthChange(0)"></u-icon>
				<view class="value">{{nowYear}}年{{thisMonth}}月</view>
        <u-icon name="arrow-right" size="20" @click="monthChange(1)"></u-icon>
			</view>
			<view class="date-container">
				<view class="week-sel">
					<view v-for="(item,index) in week" :key="index">{{item}}</view>
				</view>
				<view class="day-sel">
					<block v-for="(item,index) in days" :key="index">
						<view class="item" @tap.stop="selDate(item)" :class="{
									highLight:startDate == item.date || endDate == item.date,
									line:startDate < item.date && endDate > item.date,
									gray: !canBefore && nowDate > item.date
								}">
							{{item.day}}
							<text v-if="startDate == item.date && endDate == item.date"></text>
							<block v-else>
								<text v-if="startDate == item.date">开始</text>
								<text v-if="endDate == item.date">结束</text>
							</block>
						</view>
					</block>
				</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
	import utils from '@/common/utils/util.js';
	const DATE = new Date().getTime() / 1000;
	const YEAR = new Date().getFullYear();
	import {DAYS,getDays} from '@/common/utils/day.js';
	export default {
		props: {
			value: {
				default: true,
				type: Boolean
			},
			canBefore: { // 能否选择以往日期
				default: true,
				type: Boolean
			},
		},
		filters: {
			professYm(val) {
				let d = val.split('-');
				return `${d[0]}年${d[1]}月`
			}
		},
		computed: {
			isShow: {
				get() {
					return this.value
				},
				set(bol) {
					this.$emit('input', bol)
				}
			}
		},
		data() {
			return {
				week: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
				days: [],
				startDate: '',
				endDate: '',
				nowDate: '',
				nowYear: '',
				nowMonth: '',
				thisMonth: '',
			}
		},
		mounted() {
			this.getNow();
		},
		methods: {
			reset(){
				this.startDate = '';
				this.endDate = '';
				this.$emit('confirm',[this.startDate,this.endDate],0)
			},
			close(){
				this.isShow = false;
			},
			confirm() {
				if(!this.startDate) {
					uni.showToast({
						title: '请选择开始时间',
						icon: 'none',
						duration: 1500
					})
					return;
				} else if(!this.endDate) {
					uni.showToast({
						title: '请选择结束时间',
						icon: 'none',
						duration: 1500
					})
					return;
				}
				this.$emit('confirm',[this.startDate,this.endDate],1)
				this.$emit('input', false)
			},
			monthChange(type) {
				if (type == 0) {
					if (this.thisMonth == 1) {
						this.thisMonth = 12;
						this.nowYear--;
					} else {
						this.thisMonth--;
					}
				} else {
					// if (this.nowYear == YEAR && this.nowMonth == this.thisMonth) return;//不能选中超过当前这个月之后的日期
					if (this.thisMonth == 12) {
						this.thisMonth = 1;
						this.nowYear++;
					} else {
						this.thisMonth++;
					}
				}
				this.days = getDays(this.nowYear, this.thisMonth)
			},
			selDate(item) {
				if (!item.day) return;
				if(!this.canBefore && item.date < this.nowDate)return;
				if (this.startDate && this.endDate) { //如果开始日期和结束日期都已选中，那么清空选中
					this.endDate = '';
					this.startDate = item.date;
				} else if (!this.startDate && !this.endDate) { //如果开始日期和结束日期都没选中，则选中开始日期
					this.startDate = item.date;
				} else if (this.startDate && !this.endDate) { //如果开始日期选中了，结束日期没选中，完成选中
					if (item.date < this.startDate) { //判断选中的日期是否小于开始日期，调换两个值
						this.endDate = this.startDate;
						this.startDate = item.date;
					} else {
						this.endDate = item.date;
					};
					if(this.startDate == this.endDate){//如果开始和结束日期都是同一天
						this.confirm();
					}
				}
			},
			/**
			 * @description 获取当前日期相关，初始化
			 * */
			getNow() {
				let date = new Date();
				let timeStamp = date.getTime() / 1000;
				this.nowDate = utils.timeToDate(timeStamp);
				this.nowYear = date.getFullYear();
				this.nowMonth = date.getMonth() + 1;
				this.thisMonth = date.getMonth() + 1;
				this.days = getDays(YEAR, this.nowMonth)
			},

		}
	}
</script>

<style lang="scss" scoped>
	.dialog {
		width: 750rpx;
		background: #ffffff;
		border-radius: 40rpx 40rpx 0 0;

		image {
			width: 40rpx;
			height: 40rpx;
		}

		.day-sel {
			display: flex;
			flex-wrap: wrap;
			padding-bottom: 40rpx;

			.item {
				width: 98rpx;
				height: 100rpx;
				position: relative;
				line-height: 100rpx;
				text-align: center;
				font-size: 28rpx;
				font-weight: 600;
				color: rgba(51, 51, 51, 1);

				&.line {
					background-color: rgba($color: $theme-color, $alpha: 0.1);
				}
				
				&.gray{
					color: #CCCCCC;
				}

				&.highLight {
					background: $theme-color;
					border-radius: 8rpx;
					color: #FFFFFF;
				}

				text {
          line-height: 20rpx;
					font-size: 20rpx;
					position: absolute;
					bottom: 8rpx;
					left: 50%;
					transform: translateX(-50%);
				}
			}
		}

		.year-sel {
      display: flex;
      align-items: center;
      justify-content: space-between;
			height: 80rpx;
			border-top: 2rpx solid #E5E5E5;
			border-bottom: 2rpx solid #E5E5E5;
			padding: 0 30rpx;
      .value {
        font-size: 32rpx;
      }
		}

		.week-sel {
			border-bottom: 2rpx solid #E5E5E5;
			display: flex;
			view {
				display: flex;
        align-items: center;
        justify-content: center;
				width: 98rpx;
				height: 80rpx;
        font-size: 24rpx;
        color: $reg-font;
			}
		}

    .date-container {
      padding: 0 30rpx;
    }

		.head-container {
			display: flex;
      align-items: center;
      justify-content: space-between;
			height: 100rpx;
			padding: 0 30rpx;
      .right {
        display: flex;
        .text {
          margin-left: 40rpx;
        }
      }
		}
	}
</style>
