
<template>
	<view class="content-pop">
		<view class="pop-cont" >
			<view class="zdp-pop">
				<view class="top-cont">
					<view class="text-info">
						<view class="time-sub" @click="checkMonths(3)" :class="{ active: timeType == 3 }">
							近一个月
						</view>
						<view class="time-sub" @click="checkMonths(4)" :class="{ active: timeType == 4 }">
							近三个月
						</view>
						<view class="time-sub" @click="checkMonths(5)" :class="{ active: timeType == 5 }">
							近六个月
						</view>
					</view>
					<view class="text-info">
						<view class="time" @click="checkStart" :class="{ active: timeType == 1 }">
							{{startTime}}
						</view>
						<view>-</view>
						<view class="time" @click="checkEnd" :class="{ active: timeType == 2 }">
							{{endTime}}
						</view>
					</view>
				</view>
				<view class="date-cont">
					<picker-view :value="value" @change="handleChange" class="picker-view">
						<picker-view-column v-for="obj in SelArr">
							<view class="item" v-for="(item,index) in obj.child" :key="index">
								{{item<10?'0'+item:item}}{{obj.value}}
							</view>
						</picker-view-column>
					</picker-view>
				</view>
			</view>
		</view>
	</view>
</template>
 
<script>
	export default {
		props: {
			timeType: {//1-开始时间，2-结束时间，3-1个月，4-3个月，5-6个月
				type: Number,
				default:0
			},
			// endTime: {
			// 	type: String
			// },
		},
		data() {
			return {
				startTime:'',
				endTime:'',
				// timeType:0,//1-开始时间，2-结束时间，3-1个月，4-3个月，5-6个月
				value: [], //选择的值,要设置默认值
				dateArr: [],
				day: 18,
				month: 8, // 
				years: 24,
				SelArr: [],
				range: [],
			}
		},
		computed: {},
		created() {
			this.newDate()
		},
		methods: {
			checkStart(){
				this.timeType=1;
				this.startTime = `20${this.years}-${this.month<10?'0'+this.month:this.month}-${this.day<10?'0'+this.day:this.day}`
				this.range[0] = this.startTime;
				this.handleEmit()
			},
			checkEnd(){
				this.timeType=2;
				this.endTime = `20${this.years}-${this.month<10?'0'+this.month:this.month}-${this.day<10?'0'+this.day:this.day}`
				this.range[1] = this.endTime;
				this.handleEmit()
			},
			checkMonths(type){
				this.timeType=type;
				const date = new Date()
				let years = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				this.range[1] = `${years}-${month<10?'0'+month:month}-${day<10?'0'+day:day}`;
				if(type==3){//近一个月
					var lastDate = new Date(new Date().getTime() -(24 * 60 * 60 * 1000 * 30));
				}
				if(type==4){//近三个月
					var lastDate = new Date(new Date().getTime() -(24 * 60 * 60 * 1000 * 90));
				}
				if(type==5){//六个月
					var lastDate = new Date(new Date().getTime() -(24 * 60 * 60 * 1000 * 180));
				}
				let lastyears = lastDate.getFullYear();
				let lastmonth = lastDate.getMonth() + 1;
				let lastday = lastDate.getDate();
				this.range[0] = `${lastyears}-${lastmonth<10?'0'+lastmonth:lastmonth}-${lastday<10?'0'+lastday:lastday}`;
				this.handleEmit()
			},
			// 初始化选择器日期为今天
			newDate() {
				this.initArr() 
				const date = new Date()
				this.day = date.getDate()
				this.years = date.getFullYear();
				this.month = date.getMonth() + 1;
				let str=this.years+"-"+this.month+"-"+this.day;
				let arr = []
				arr = str.split('-');
				this.month = arr[1] - 0;
				this.day = arr[2] - 0;
				for (let i = 0; i < arr.length; i++) {
					if (i == 0) {
						arr[0] = arr[0].slice(2)
						arr[0] -= 0
						this.years = arr[0]
					} else {
						arr[i]--
					}
				}
				this.value = arr;
			},
			// 初始化选择器日期数据
			initArr() {
				const date = new Date()
				let arr = []
				let day = []
				let month = []
				let years = []
				for (let i = 2000; i <= date.getFullYear()+1; i++) {
					years.push(i)
				}
				for (let i = 1; i <= 12; i++) {
					month.push(i)
				} 
				let num = this.getMonthDays(this.years, this.month)
				for (let i = 1; i <= num; i++) {
					day.push(i)
				}
				arr = [{
					value: "年",
					child: years
				}, {
					value: "月",
					child: month
				}, {
					value: "日",
					child: day
				}]
				this.SelArr = arr
			},
			//提交父组件
			handleEmit() {
				let {range,timeType} = this
				this.$emit('submit-date', {range,timeType})
			},
			// 选择器选择
			handleChange(e) {
				let {
					value
				} = e.detail 
				// console.log(value);
				// 年小于前面+0
				if (value[0] < 10) {
					value[0] = '0' + value[0]
				}
				this.years = value[0]
				this.month = value[1] + 1 //月
				this.day = value[2] + 1 //日
				this.initArr()
				let str = `20${this.years}-${this.month<10?'0'+this.month:this.month}-${this.day<10?'0'+this.day:this.day}`
				if(this.timeType==1){
					this.startTime=str
				}
				if(this.timeType==2){
					this.endTime=str
				}
				this.range[0] = this.startTime;
				this.range[1] = this.endTime;
				this.handleEmit()
				
			},
			//获取当前月的天数
			getMonthDays(year, month) {
				var thisDate = new Date(year, month, 0);
				return thisDate.getDate();
			},
		}
	}
</script>
 
<style lang="scss" scoped>
	.pop-cont {
		// position: fixed;
		// left: 0%;
		// bottom: 0%;
		width: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		height: 100%;
		// .zdp-pop{
		// 	transform: translateY(100%);
		// }
		
	}
 
	// .pop-cont.open {
	// 	height: 100%;
	// 	.zdp-pop{
	// 		transform: translateY(0);
	// 	}
	// }
 
	.zdp-pop {
		// position: absolute;
		// bottom: 0%;
		// left: 0%;
		box-sizing: border-box;
		 
		width: 100%;
		height: 750rpx;
		background-color: #fff;
		transition: all 1s; 
		.top-cont {
			width: 100%;
			height: auto;
			// display: flex;
			// justify-content: space-between;
			// align-items: center;
			// margin-bottom: 32rpx;
 
			.close-cont {
				color: #aaa;
				letter-spacing: 6rpx;
			}
 
			.text-info {
				width: 100%;
				height: auto;
				margin: 30rpx auto;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.time{
					width: 45%;
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;
					background: #F5F5F5;
					color: #1A1A1A;
					border-radius: 10rpx;
				}
				.time-sub{
					width: 30%;
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;
					background: #F5F5F5;
					color: #1A1A1A;
					border-radius: 10rpx;
				}
				.active{
					background: #D4E4FF;
					border: 2rpx solid #7691FC;
					color: #0052D9;
				}
			}
 
			.save-cont {
				background: #409EFF;
				color: #fff;
				width: 100rpx;
				height: 60rpx;
				text-align: center;
				line-height: 60rpx;
				border-radius: 6rpx;
			}
		}
 
		.tabs-cont {
			box-sizing: border-box;
			height: 80rpx;
			background-color: #F3F5F9;
			display: flex;
			align-items: center;
			border-radius: 4rpx;
			padding: 0 10rpx;
 
			.tab-list {
				min-width: 20%;
				display: flex;
				height: 60%;
				flex: 1;
				justify-content: center;
				border-radius: 4rpx;
 
				&.active {
					background-color: #fff;
				}
			}
		}
 
		.date-cont {
			height: calc(750rpx - 180rpx);
 
			.picker-view {
				width: 100%;
				height: 100%;
 
				.item {
					display: flex;
					justify-content: center;
					align-items: center;
					flex-wrap: nowrap;
					width: 100rpx;
				}
 
				.uni-picker-view-indicator {
					height: 100rpx;
				}
			}
		}
	}
</style>