<template>
	<view class="">
		<view class="card" v-if="timeType">
			<view class="card-title">
				时间类型
			</view>
			<view class="timetype">
				<view class="timetype_item" :class="[defaultTimeType==0?'active':'']" @click="changeTimeType('年')">
					年
				</view>
				<view class="timetype_item" :class="[defaultTimeType==1?'active':'']" @click="changeTimeType('月')">
					月
				</view>
				<view class="timetype_item" :class="[defaultTimeType==2?'active':'']" @click="changeTimeType('日')">
					日
				</view>
				<!-- <time-type height="300rpx" :value="defaultTimeType" @change="changeTimeType" lineHeight="60rpx">
				</time-type> -->
			</view>
		</view>
		<view class="card">
			<view class="card-title">
				时间选择
				<text style="font-size: 24rpx;color: #FA6200;" v-if="defaultTimeType!=0">（关联之后起止时间联动,间隔不超过30天）</text>
				<text style="font-size: 24rpx;color: #FA6200;" v-if="defaultTimeType==0">（关联之后起止时间联动,间隔不超过365天）</text>
			</view>
			<view class="card-content">
				<view class="time left" :class="[chooseOne==0?'active':'']" @click="clickChoose(0)">
					{{startTimeFormat}}
				</view>
				<view class="label">至</view>
				<view class="time right" :class="[chooseOne==1?'active':'']" @click="clickChoose(1)">
					{{endTimeFormat}}
				</view>
			</view>
			<view style="position: relative;height:20rpx;top: -20rpx;">
				<view
					style="font-size: 24rpx;color: red;position: absolute;top: 0;left: 0;right: 0;transform: scale(.8);transform-origin: left;">
					{{validate}}
				</view>
			</view>
			<view style="display: flex;align-items: center;">
				<template>
					<view @click="selectToday()" class="btn">
						今天
					</view>
					<view v-if="defaultTimeType!=0" @click="selectOneMonth()" class="btn">
						近30天
					</view>
					<view v-if="defaultTimeType==0" @click="selectOneYear()" class="btn">
						近1年
					</view>
					<view @click="clickBind" class="btn" :class="[isBind?'active':'']">
						关联起止时间
					</view>
				</template>
				<view style="text-align: right;flex: 1;width: 0;">
					<image style="width: 28rpx;height: 28rpx;"
						src="https://www.enesoon-saas-back-test.cn/company/static/icon-clear@2x.png" @tap="clearDate" />
				</view>
			</view>
			<view>
				<day :value="defaultTime" @change="changeTime" height="400rpx" ref="day" :current="true"
					:type="timeType"></day>
			</view>
		</view>
		<view class="card">
			<view class="card-title">
				年份选择
			</view>
			<view class="card-content">
				<scroll-view scroll-x>
					<view class="year-list">
						<view class="year-item" @click="delYearList(item,index)" v-for="(item,index) in sortYearList"
							:key="index">
							{{item}}
							<u-icon name="close-circle-fill" color="#999" size="16rpx" top="-10rpx"></u-icon>
						</view>
					</view>
				</scroll-view>
			</view>
			<scroll-view scroll-y style="height: 240rpx;">
				<view class="year-choose-list">
					<view class="year-choose-item" @click="addYearList(item,index)"
						:class="[yearList.includes(+item)?'highlight':'', selectYearData==item?'disabled':'']"
						v-for="(item,index) in yearAllList" :key="index">
						{{item}}
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import day from "./day.vue"
	import {
		dateTimeFormat
	} from "./util.js"
	import TimeType from "./TimeType.vue"
	
	let intevalTime = 30 * 24 * 60 * 60 * 1000; // 30天
	export default{
		components: {
			day,
			TimeType
		},
		data() {
			return {
				yearAllList: [2021, 2020, 2019, 2018],
				yearList: [],
				isBind: true,
				startTime: '',
				endTime: '',
				chooseOne: -1,
				defaultTime: null,
				timeType: "year,month,day",
				defaultTimeType: 1
			};
		},
		created() {
			this.changeTimeType('月')
			this.chooseOne = 0
			let day = new Date().getTime()
			let dayD = new Date(day)
			this.endTime = dayD
			let dayc = new Date(this.endTime).getTime() - intevalTime
			let dayA = new Date(dayc)
			dayA.setHours(0,0,0)
			this.startTime = dayA
			this.defaultTime = this.startTime
			this.bindDay()
		},
		computed: {
			validate() {
				if(!this.endTime || !this.startTime){
					return ""
				}
				if (this.endTime.getTime() - this.startTime.getTime() < 0) {
					return "开始时间不能大于结束时间"
				} 
				if (this.endTime.getTime() - this.startTime.getTime() > intevalTime) {
					if(this.defaultTimeType!=0){
						return "时间间隔不能大于30天"
					}else{
						return "时间间隔不能大于365天"
					}
				}
				return ''
			},
			startTimeFormat() {
				if (!this.startTime) {
					return "开始时间"
				}
				// yyyy-MM-dd HH:mm:ss
				if (this.defaultTimeType == 0) {
					return dateTimeFormat(this.startTime, 'yyyy-MM')
				}
				if (this.defaultTimeType == 1) {
					return dateTimeFormat(this.startTime, 'yyyy-MM-dd')
				}
				if (this.defaultTimeType == 2) {
					return dateTimeFormat(this.startTime, 'yyyy-MM-dd')
				}
				return dateTimeFormat(this.startTime, 'yyyy-MM-dd')
			},
			endTimeFormat() {
				if (!this.endTime) {
					return "结束时间"
				}
				// yyyy-MM-dd HH:mm:ss
				if (this.defaultTimeType == 0) {
					return dateTimeFormat(this.endTime, 'yyyy-MM')
				}
				if (this.defaultTimeType == 1) {
					return dateTimeFormat(this.endTime, 'yyyy-MM-dd')
				}
				if (this.defaultTimeType == 2) {
					return dateTimeFormat(this.endTime, 'yyyy-MM-dd')
				}
				return dateTimeFormat(this.endTime, 'yyyy-MM-dd')
			},
			selectYearData() {
				let year = -1
				if (this.startTime && this.endTime) {
					let Ayear = +dateTimeFormat(this.startTime, "yyyy")
					let Byear = +dateTimeFormat(this.endTime, "yyyy")
					if (Ayear == Byear) {
						year = Ayear
					}
				}
				return year
			},
			sortYearList() {
				return this.yearList.sort(function(a, b) {
					return +b - (+a)
				})
			},
		},
		methods: {
			clearDate() {
				this.startTime = ""
				this.endTime = ""
				this.yearList = [];
			},
			delYearList(item) {
				// if (!this.year) {
				// 	return
				// }
				if (item == this.selectYearData) {
					uni.showToast({
						icon: "none",
						title: "该年份不能修改"
					})
					return
				}
				let index = this.yearList.indexOf(item)
				this.yearList.splice(index, 1)
				this.buildDate()
			},
			addYearList(item) {
				// if (!this.year) {
				// 	return
				// }
				if (item == this.selectYearData) {
					uni.showToast({
						icon: "none",
						title: "该年份不能修改"
					})
					return
				}
				let index = this.yearList.indexOf(item)
				if (index == -1) {
					if (this.startTime && this.endTime) {
						let Ayear = +dateTimeFormat(this.startTime, "yyyy")
						let Byear = +dateTimeFormat(this.endTime, "yyyy")
						if (Ayear != Byear) {
							uni.showToast({
								icon: "none",
								title: "跨年不能选择"
							})
							return
						}
						if (this.yearList.length == 3) {
							uni.showToast({
								icon: "none",
								title: "只能选择三个年份"
							})
							return
						}
						this.yearList.push(item)
						this.buildDate()
					} else {
						uni.showToast({
							icon: "none",
							title: "请完善时间范围"
						})
					}
				} else {
					this.yearList.splice(index, 1)
					this.buildDate()
				}
			},
			clickChoose(type) {
				if (type == 0) {
					if (this.chooseOne != 0) {
						this.chooseOne = 0;
						if (this.startTime) {
							this.defaultTime = this.startTime
						} else {
							this.defaultTime = new Date()
						}
					} else {
						this.chooseOne = -1;
					}
				}
				if (type == 1) {
					if (this.chooseOne != 1) {
						this.chooseOne = 1;
						if (this.endTime) {
							this.defaultTime = this.endTime
						} else {
							this.defaultTime = new Date()
						}
					} else {
						this.chooseOne = -1;
					}
				}
			},
			changeTimeType(type) {
				switch (type) {
					case "年":
						this.defaultTimeType = 0
						intevalTime = 365 * 24 * 60 * 60 * 1000;
						this.timeType = 'year,month'
						break;
					case "月":
						intevalTime = 30 * 24 * 60 * 60 * 1000;
						this.defaultTimeType = 1
						this.timeType = 'year,month,day'
						break;
					case '日':
						intevalTime = 30 * 24 * 60 * 60 * 1000;
						this.defaultTimeType = 2
						this.timeType = "year,month,day,hour,minute,second"
						break;
					case 'only-year':
						intevalTime = 30 * 24 * 60 * 60 * 1000;
						this.defaultTimeType = 3
						this.timeType = "year"
						break;
					default:
						this.defaultTimeType = 1
						this.timeType = 'year,month,day'
						break;
				}
			},
			bindDay() {
				if (this.chooseOne == 0 || this.chooseOne == -1) {
					if (this.isBind && ((this.startTime && this.endTime && this.isBigger30Day(this.startTime.getTime(),
							this.endTime
							.getTime())) || (!this.endTime && this.startTime))) {
						let day = new Date(dateTimeFormat(this.startTime, "yyyy/MM/dd HH:mm:ss")).getTime() + intevalTime
						this.endTime = new Date(day)
					}
		
				}
				if (this.chooseOne == 1) {
					if (this.isBind && ((this.startTime && this.endTime && this.isBigger30Day(this.startTime.getTime(),
							this.endTime
							.getTime())) || (!this.startTime && this.endTime))) {
						let day = new Date(dateTimeFormat(this.endTime, "yyyy/MM/dd HH:mm:ss")).getTime() - intevalTime
						this.startTime = new Date(day)
					}
				}
				if (this.startTime && this.endTime) {
					let Ayear = +dateTimeFormat(this.startTime, "yyyy")
					let Byear = +dateTimeFormat(this.endTime, "yyyy")
					if (Ayear == Byear) {
						this.yearList = [Ayear]
					} else {
						this.yearList = []
					}
				}
				this.buildDate()
			},
			buildDate() {
				let format = "yyyy-MM-dd HH:mm:ss"
				if(this.defaultTimeType==0){
					format = "yyyy-MM"
				}
				if(this.defaultTimeType==1){
					format = "yyyy-MM-dd"
				}
				// console.log("输出");
				// console.log(dateTimeFormat(this.startTime, format));
				// console.log(dateTimeFormat(this.endTime, format));
				// console.log(this.yearList);
				// console.log(this.defaultTimeType);
				if (this.startTime && this.endTime) {
					if (this.endTime.getTime() - this.startTime.getTime() < 0) {
						uni.showToast({
							icon: "none",
							title: "开始时间不能大于结束时间"
						})
					}
					if(this.endTime.getTime() - this.startTime.getTime() > intevalTime){
						uni.showToast({
							icon: "none",
							title: "时间间隔大于30天"
						})
					}
				}
			},
			isBigger30Day(time1, time2) {
				return (time2 - time1 > intevalTime) || (time2 - time1 < 0)
			},
			changeTime(time) {
				if (this.chooseOne == 0) {
					this.startTime = time
				}
				if (this.chooseOne == 1) {
					this.endTime = time
				}
				this.bindDay()
				if (this.chooseOne == -1) {
					uni.showToast({
						icon: "none",
						title: "请先选中一项"
					})
				}
			},
			selectOneYear() {
				this.selectToday(1)
				this.select(0)
			},
			selectOneMonth() {
				this.selectToday(1)
				this.select(0)
			},
			fixedTime(time,chooseOne){
				time.setHours(0,0,0)
				return time
			},
			select(chooseOne) {
				if (chooseOne == 0 && this.endTime) {
					let day = new Date(dateTimeFormat(this.endTime, "yyyy/MM/dd HH:mm:ss")).getTime() - intevalTime
					this.defaultTime = new Date(day)
					this.startTime = new Date(day)
					// this.$refs.day.setTime(new Date(day))
				}
				if (chooseOne == 1 && this.startTime) {
					let day = new Date(dateTimeFormat(this.startTime, "yyyy/MM/dd HH:mm:ss")).getTime() + intevalTime
					this.defaultTime = new Date(day)
					this.endTime = new Date(day)
				}
				this.bindDay()
			},
			selectToday(chooseOne) {
				if (this.chooseOne == -1) {
					uni.showToast({
						icon: "none",
						title: "请先选中一项"
					})
					return
				}
				if (this.chooseOne == 0 || chooseOne===0) {
					this.startTime = new Date()
				}
				if (this.chooseOne == 1 || chooseOne===1) {
					this.endTime = new Date()
				}
				this.bindDay()
			},
			clickBind() {
				this.isBind = !this.isBind;
				this.bindDay()
			}
		}
	}
</script>


<style lang="scss" scoped>
	.card {

		margin: 20rpx;

		.card-title {
			font-size: 32rpx;
			font-weight: 500;
			color: #333333;
		}

		.card-content {
			margin: 20rpx 0;
			line-height: 60rpx;
			text-align: center;
			font-size: 28rpx;
			font-weight: 400;
			color: #999999;
			display: flex;
			align-items: center;

			.time {
				width: 260rpx;
				border-bottom: 1px solid #CECECE;

				&.active {
					color: #22AB39;
				}
			}

			.label {
				color: #666666;
				flex: 1;
			}

		}
	}

	.btn {
		border: 1px solid #C0C0C0;
		color: #333333;
		padding: 4rpx 15rpx;
		border-radius: 10rpx;
		color: #000;

		+.btn {
			margin-left: 10rpx;
		}

		&.active {
			border-color: #22AB39;
			color: #22AB39;
		}
	}

	.year-choose-list {
		text-align: center;
		line-height: 60rpx;

		.year-choose-item {
			margin: 10rpx 0;
			color: #999;

			&.highlight {
				color: #333;
				background: #F5F5F5;
			}

			&.disabled {
				color: #333;
				background: #F5F5F5;
			}
		}

	}

	.year-list {
		white-space: nowrap;
		text-align: left;
		color: #22AB39;
		line-height: 60rpx;
		height: 60rpx;

		.year-item {
			display: inline-block;
			padding: 0 20rpx;
		}
	}
	.timetype{
		display: flex; 
		justify-content: space-around;
		margin: 20rpx 0;
		.timetype_item{
			line-height: 1;
			padding: 8rpx 42rpx;
			border-radius: 4rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: #37363B;
			&.active{
				background-color: #22AB39;
				color: white;
			}
		}
	}
</style>