<template>
	<div>
		<el-button
			:type="btnSelected == '1'?'primary':'default'"
			size="mini"
			@click="timeBtnClick(1)"
		>24小时</el-button>
		<el-button :type="btnSelected == '2'?'primary':'default'" size="mini" @click="timeBtnClick(2)">近一月</el-button>
		<el-button :type="btnSelected == '3'?'primary':'default'" size="mini" @click="timeBtnClick(3)">近半年</el-button>
		<el-button :type="btnSelected == '4'?'primary':'default'" size="mini" @click="timeBtnClick(4)">近一年</el-button>
		<el-date-picker
			size="mini"
			v-model="timeRange"
			type="daterange"
			range-separator="至"
			start-placeholder="开始日期"
			end-placeholder="结束日期"
			@change="DateChange"
		></el-date-picker>
	</div>
</template>

<script>
export default {
	data() {
		return {
			btnSelected: '2',
			queryInfo: {
				begin: '',
				end: ''
			},
			timeRange: ''
		}
	},
	mounted(){
		this.timeBtnClick(2)
	},
	methods: {
		//筛选时间
		timeBtnClick(i) {
			this.btnSelected = i
			this.timeRange = ''
			if (i == 1) {
				this.queryInfo.begin = parseInt((Date.now() - 24 * 3600000) / 1000)
				this.queryInfo.end = parseInt(Date.now() / 1000)
			} else if (i == 2) {
				this.queryInfo.begin = parseInt((Date.now() - 24 * 3600000 * 30) / 1000)
				this.queryInfo.end = parseInt(Date.now() / 1000)
			} else if (i == 3) {
				this.queryInfo.begin = parseInt(
					(Date.now() - 24 * 3600000 * 30 * 6) / 1000
				)
				this.queryInfo.end = parseInt(Date.now() / 1000)
			} else if (i == 4) {
				this.queryInfo.begin = parseInt(
					(Date.now() - 24 * 3600000 * 30 * 12) / 1000
				)
				this.queryInfo.end = parseInt(Date.now() / 1000)
            }
			this.$emit('dateChange',this.queryInfo)
		},
		DateChange() {
			this.btnSelected = null
			if (this.timeRange) {
				this.queryInfo.begin = parseInt(
					new Date(this.timeRange[0]).getTime() / 1000
				)
				this.queryInfo.end = parseInt(
					new Date(this.timeRange[1]).getTime() / 1000
				)
			} else {
				this.queryInfo.begin = ''
				this.queryInfo.end = ''
            }
            this.$emit('dateChange',this.queryInfo)
		}
	}
}
</script>

<style lang='less' scoped>
</style>