<template>
	<div class="searchBox">
		<div class="timeSearchBtn">
			<el-button
				:type="btnSelected == '1' ? 'blueInfo' : 'grayInfo'"
				size="mini"
				plain
				@click="timeBtnClick(1)"
				>24小时</el-button
			>
			<el-button
				:type="btnSelected == '2' ? 'blueInfo' : 'grayInfo'"
				size="mini"
				plain
				@click="timeBtnClick(2)"
				>近一周</el-button
			>
			<el-button
				:type="btnSelected == '3' ? 'blueInfo' : 'grayInfo'"
				size="mini"
				plain
				@click="timeBtnClick(3)"
				>近一月</el-button
			>
			<el-button
				:type="btnSelected == '4' ? 'blueInfo' : 'grayInfo'"
				size="mini"
				plain
				@click="timeBtnClick(4)"
				>近半年</el-button
			>
			<el-button
				:type="btnSelected == '5' ? 'blueInfo' : 'grayInfo'"
				size="mini"
				plain
				@click="timeBtnClick(5)"
				>近一年</el-button
			>
			<el-date-picker
				style="cursor: pointer"
				size="mini"
				v-model="timeRange"
				type="daterange"
				range-separator="至"
				start-placeholder="开始日期"
				end-placeholder="结束日期"
				@change="DateChange"
			></el-date-picker>
		</div>	
		<div>
			<el-button
				v-if="!switcState"
				type="orangeInfo"
				size="mini"
				@click="switcStateClick()"
				>图表数据</el-button
			>
			<el-button
				v-if="!switcState"
				type="blueInfo"
				size="mini"
				@click="exportDataFun()"
				>导出</el-button
			>
			<el-button
				v-if="switcState"
				type="orangeInfo"
				size="mini"
				@click="switcStateClick()"
				>详细数据</el-button
			>
		</div>
	</div>
	
</template>

<script>
export default {
	data() {
		return {
			btnSelected: '2',
			queryInfo: {
				begin: '',
				end: ''
			},
			timeRange: '',
			switcState:true
		}
	},
	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() + 24 * 3600000) / 1000)
			} else if (i == 2) {
				this.queryInfo.begin = parseInt((Date.now() - 24 * 3600000 * 7) / 1000)
				this.queryInfo.end = parseInt((Date.now() + 24 * 3600000) / 1000)
			} else if (i == 3) {
				this.queryInfo.begin = parseInt((Date.now() - 24 * 3600000 * 30) / 1000)
				this.queryInfo.end = parseInt((Date.now() + 24 * 3600000) / 1000)
			} else if (i == 4) {
				this.queryInfo.begin = parseInt(
					(Date.now() - 24 * 3600000 * 30 * 6) / 1000
				)
				this.queryInfo.end = parseInt((Date.now() + 24 * 3600000) / 1000)
			} else if (i == 5) {
				this.queryInfo.begin = parseInt(
					(Date.now() - 24 * 3600000 * 30 * 12) / 1000
				)
				this.queryInfo.end = parseInt((Date.now() + 24 * 3600000) / 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.btnSelected = 2
				this.queryInfo.begin = parseInt((Date.now() - 24 * 3600000 * 30) / 1000)
				this.queryInfo.end = parseInt((Date.now() + 24 * 3600000) / 1000)
            }
            this.$emit('dateChange',this.queryInfo)
		},
		switcStateClick(){
			this.switcState=!this.switcState
            this.$emit('toggleSwitcState',this.switcState)
		},
		exportDataFun(){
            this.$emit('exportData',this.queryInfo)
		},
	}
}
</script>

<style lang='less' scoped>
.searchBox{
	display: flex;
	justify-content: space-between;
	align-content: center;
}
</style>