<template>
	<div class="date-filter-wrap" style="float: right">
		<DatePicker
      v-if="selectMonthStatus"
			:clearable="false"
			@on-change="dateClick2"
			v-model="dataArea2"
			type="month"
			placement="bottom-end"
			placeholder="请选择月份"
			style="width: 200px; margin-right: 10px"
			:style="
				dataArea2 ? 'border:1px solid #3f92f9;border-radius:5px' : ''
			"
		>
		</DatePicker>
		<div class="date-filter">
			<div
				class="date-tab"
				v-for="(item, index) in dateTabs"
				:key="index"
				:class="index === dateTabIndex ? 'active' : ''"
				@click="dateTabToggle(index)"
			>
				{{ item.label }}
			</div>
			<Poptip placement="bottom">
				<div
					class="date-tab"
					:class="dateTabIndex === 5 ? 'active' : ''"
					style="width: 50px"
				>
					其他
				</div>
				<div slot="content">
					<div
						class="select-time-box"
						v-for="i in modalTimeList"
						@click="modalTimeSelect(i.type)"
						:key="i.type"
					>
						{{ i.name }}
					</div>
				</div>
			</Poptip>
		</div>
		<DatePicker
			:style="
				selectType == 3
					? 'border:1px solid #3f92f9;border-radius:5px'
					: ''
			"
			:clearable="false"
			@on-change="dateClick"
			v-model="dataArea"
			type="daterange"
			placement="bottom-end"
			placeholder="请选择日期"
			style="width: 200px; margin-left: 10px"
		>
		</DatePicker>
	</div>
</template>
<script>
export default {
	name: 'test',
	props: {
		value: {
			type: Object,
		},
    selectMonthStatus: {
      type: Boolean,
      default: true
    }
	},
	watch: {
		value: {
			handler() {
				this.$emit('input', this.value)
			},
			deep: true,
			immediate: true,
		},
	},
	data() {
		return {
			selectType: 0,
			modalTimeList: [
				{
					name: '昨日',
					type: 1,
				},
				{
					name: '前日',
					type: 2,
				},
				{
					name: '上周',
					type: 3,
				},
				{
					name: '上月',
					type: 4,
				},
				{
					name: '近三个月',
					type: 5,
				},
				{
					name: '近半年',
					type: 6,
				},
			],
			modalTimeType: null,
			dateTabIndex: 3,
			dateTabs: [
				{ label: '本日' },
				{ label: '本周' },
				{ label: '本月' },
				{ label: '今年' },
			],
			dataArea2: null,
			dataArea: [],
			time: [],
		}
	},
	methods: {
		/* 选项卡切换 */
		dateTabToggle(index) {
			this.value.type = index + 1
			this.selectType = 0
			this.dateTabIndex = index
			this.dataArea2 = null
			if (index === 0) {
				let time = new Date().getTime()
				this.value.beginTime = this.$dayjs(time).format(
					'YYYY-MM-DD HH:mm:ss'
				)
				this.value.endTime = this.$dayjs(time).format(
					'YYYY-MM-DD HH:mm:ss'
				)
				this.dataArea = [this.value.beginTime, this.value.endTime]
			} else if (index === 1) {
				let Nowdate = new Date()
				let WeekFirstDay = Nowdate.getDay()
					? new Date(Nowdate - (Nowdate.getDay() - 1) * 86400000)
					: new Date(Nowdate - (Nowdate.getDay() + 6) * 86400000)
				let WeekLastDay = new Date(
					(WeekFirstDay / 1000 + 6 * 86400) * 1000
				)
				this.value.beginTime = this.$dayjs(WeekFirstDay).format(
					'YYYY-MM-DD HH:mm:ss'
				)
				this.value.endTime = this.$dayjs(WeekLastDay).format(
					'YYYY-MM-DD HH:mm:ss'
				)
				this.dataArea = [this.value.beginTime, this.value.endTime]
			} else if (index === 2) {
				let now = new Date() // 当前日期
				let nowMonth = now.getMonth() // 当前月
				let nowYear = now.getFullYear() // 当前年
				// 本月的开始时间
				let monthStartDate = new Date(nowYear, nowMonth, 1)
				// 本月的结束时间
				let monthEndDate = new Date(nowYear, nowMonth + 1, 0)
				this.value.beginTime = this.$dayjs(monthStartDate).format(
					'YYYY-MM-DD HH:mm:ss'
				)
				this.value.endTime = this.$dayjs(monthEndDate).format(
					'YYYY-MM-DD HH:mm:ss'
				)
				this.dataArea = [this.value.beginTime, this.value.endTime]
			} else if (index === 3) {
				let now = new Date() // 当前日期
				let nowYear = now.getFullYear() // 当前年
				// 本年的开始时间
				let monthStartDate = new Date(nowYear, 0, 1)
				// 本年的结束时间
				let monthEndDate = new Date(nowYear, 11, 31)
				this.value.beginTime = this.$dayjs(monthStartDate).format(
					'YYYY-MM-DD HH:mm:ss'
				)
				this.value.endTime = this.$dayjs(now).format(
					'YYYY-MM-DD HH:mm:ss'
				)
				this.dataArea = [this.value.beginTime, this.value.endTime]
			}
			this.$emit('change')
		},
		//外部选择时间
		changeTypeFn(_type) {
			this.value.type = _type
			this.value.beginTime = null
			this.value.endTime = null
			this.time = []
			this.$emit('change')
		},
		modalTimeSelect(_type) {
			console.log(_type)
			this.selectType = 0
			const format = (timeStamp) => {
				var date = new Date()
				date.setTime(timeStamp * 1)
				var y = date.getFullYear()
				var m = date.getMonth() + 1
				m = m < 10 ? '0' + m : m
				var d = date.getDate()
				d = d < 10 ? '0' + d : d
				var h = date.getHours()
				h = h < 10 ? '0' + h : h
				var minute = date.getMinutes()
				var second = date.getSeconds()
				minute = minute < 10 ? '0' + minute : minute
				second = second < 10 ? '0' + second : second
				return y + '-' + m + '-' + d
			}
			const v = this
			const todayNum = new Date(new Date().toLocaleDateString()).getTime()
			const today = new Date()
			//年
			var year = today.getFullYear()
			//月
			const month = today.getMonth() + 1
			//周
			const nows = today.getDay() || 7
			//天
			const day = today.getDate()
			if (_type == 1) {
				v.value.beginTime = format(todayNum - 86400000)
				v.value.endTime = format(todayNum - 86400000)
			}
			if (_type == 2) {
				v.value.beginTime = format(todayNum - 86400000 * 2)
				v.value.endTime = format(todayNum - 86400000 * 2)
			}
			if (_type == 3) {
				v.value.beginTime = format(todayNum - 86400000 * (nows + 6))
				v.value.endTime = format(todayNum - 86400000 * nows)
			}
			if (_type == 4) {
				if (month == 1) {
					v.value.beginTime = year - 1 + '-' + 12 + '-' + '1 00:00:00'
					v.value.endTime = year + '-' + 1 + '-' + '1 00:00:00'
				} else {
					v.value.beginTime =
						year + '-' + (month - 1) + '-' + '1 00:00:00'
					v.value.endTime = year + '-' + month + '-' + '1 00:00:00'
				}
			}
			if (_type == 5) {
				if (month < 4) {
					v.value.beginTime =
						year -
						1 +
						'-' +
						(12 - 3 + month) +
						'-' +
						day +
						' 00:00:00'
					v.value.endTime = format(today.getTime())
				} else {
					v.value.beginTime =
						year + '-' + (month - 3) + '-' + day + ' 00:00:00'
					v.value.endTime = format(today.getTime())
				}
			}
			if (_type == 6) {
				if (month < 7) {
					v.value.beginTime =
						year -
						1 +
						'-' +
						(12 - 6 + month) +
						'-' +
						day +
						' 00:00:00'
					v.value.endTime = format(today.getTime())
				} else {
					v.value.beginTime =
						year + '-' + (month - 6) + '-' + day + ' 00:00:00'
					v.value.endTime = format(today.getTime())
				}
			}
			v.dataArea = [v.value.beginTime, v.value.endTime]
			v.dateTabIndex = 5
			v.value.type = 5
			this.$emit('change')
		},
		dateClick2(date) {
			const dateDayNum = new Date(date).getDate()
			const dateMonthNum = new Date(date).getMonth() + 1
			const dateYearNum = new Date(date).getFullYear()
			this.dateTabIndex = null
			this.value.beginTime = dateYearNum + '-' + dateMonthNum + '-1'
			this.value.endTime =
				dateYearNum +
				'-' +
				dateMonthNum +
				'-' +
				new Date(dateYearNum, dateMonthNum * 1, 0).getDate()
			this.dataArea = []
			this.selectType = 0
			this.value.type = 99
			this.$emit('change')
		},
		dateClick(date) {
			this.value.beginTime = date[0]
			this.value.endTime = date[1]
			this.dateTabIndex = null
			this.dataArea2 = null
			this.selectType = 3
			this.value.type = 99
			this.$emit('change')
		},
	},
	created() {
		let now = new Date() // 当前日期
		let nowYear = now.getFullYear() // 当前年
		// 本年的开始时间
		let monthStartDate = new Date(nowYear, 0, 1)
		// 本年的结束时间
		let monthEndDate = new Date(nowYear, 11, 31)
		this.value.beginTime = this.$dayjs(monthStartDate).format(
			'YYYY-MM-DD HH:mm:ss'
		)
		this.value.endTime = this.$dayjs(now).format(
			'YYYY-MM-DD HH:mm:ss'
		)
		this.dataArea = [this.value.beginTime, this.value.endTime]
	},
}
</script>
<style scoped lang="less">
.select-time-box {
	height: 30px;
	line-height: 30px;
	text-align: center;
	cursor: pointer;
}
.select-time-box:hover,
.select-time-box.active {
	background: #3f92f9;
	color: #fff;
}
.date-filter-wrap {
	display: flex;
	align-items: center;
	overflow: hidden;
	.date-filter {
		width: 300px;
		overflow: hidden;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #ffffff;
		border-radius: 4px;
		&.other {
			width: auto;
			.date-tab {
				white-space: nowrap;
				padding: 9px;
				.num {
					font-weight: bold;
					font-size: 14px;
					&.red {
						color: red;
						cursor: pointer;
						text-decoration: underline;
					}
				}
				&.active {
					background-color: #333333;
				}
			}
		}

		.date-tab {
			flex: 1;
			padding: 9px 4px;
			line-height: 1;
			text-align: center;
			border: 1px solid #e6e6e6;
			border-radius: 2px;
			border-right: none;
			cursor: pointer;
			font-weight: 500;

			&:first-child {
				border-radius: 4px 0 0 4px;
			}

			&:last-child {
				border-radius: 0 4px 4px 0;
				border-right: 1px solid #e6e6e6;
			}

			&.active {
				background-color: #3f92f9;
				color: #ffffff;
			}
		}
	}
}
</style>