<template>
	<div>
		<el-card :body-style="cardBodyStyle">

			<el-date-picker v-model="date" type="date" value-format="YYYY-MM-DD" format="YYYY-MM-DD"
				style="width: 200px;"></el-date-picker>
			<el-date-picker v-model="dateRange" type="daterange" value-format="YYYY-MM-DD" format="YYYY-MM-DD"
				style="width: 200px;"></el-date-picker>
			<el-date-picker v-model="datetimeRange" type="datetimerange" align="right" unlink-panels range-separator="至"
				start-placeholder="开始时间" end-placeholder="结束时间" style="width: 350px;" value-format="YYYY-MM-DD HH:mm:ss"
				format="YYYY-MM-DD HH:mm:ss">
			</el-date-picker>
		</el-card>

		<el-card :body-style="cardBodyStyle">
			<el-button type="primary" @click="handleNow">当天</el-button>
			<el-button type="primary" @click="handleMonth">当月</el-button>
			<el-button type="primary" @click="handleBefore">7天前</el-button>
			<el-button type="primary" @click="handleAfter">10天后</el-button>
		</el-card>
	</div>
</template>


<script setup>
	import {
		ref,
		reactive,
		onMounted,
		onBeforeMount,
		getCurrentInstance
	} from 'vue'
	const {
		proxy
	} = getCurrentInstance()
	import style from '@/tools/style'
	const cardBodyStyle = ref(style.card)



	const date = ref('')
	const dateRange = ref(['', ''])
	const datetimeRange = ref(['', ''])


	const handleNow = () => {
		let val = proxy.$dayjs()
		date.value = val
		dateRange.value[0] = val
		dateRange.value[1] = val

		// datetimeRange.value[0] = proxy.$dayjs().format('YYYY-MM-DD HH:mm:ss')  
		datetimeRange.value[0] = val.startOf('day')
		datetimeRange.value[1] = val.endOf('day')


		console.log(typeof val) //object 类型
		console.log(val)
		console.log(typeof val.format('YYYY-MM-DD HH:mm:ss')) //字符串类型
		console.log(val.format('YYYY-MM-DD HH:mm:ss'))
	}

	const handleMonth = () => {
		let val = proxy.$dayjs()
		date.value = val.startOf('month')
		dateRange.value[0] = val.startOf('month')
		dateRange.value[1] = val.endOf('month')

		// datetimeRange.value[0] = proxy.$dayjs().format('YYYY-MM-DD HH:mm:ss')  
		datetimeRange.value[0] = val.startOf('month', 'day')
		datetimeRange.value[1] = val.endOf('month', 'day')
	}



	const handleBefore = () => {
		let now = proxy.$dayjs()
		date.value = now.subtract(7, 'day')
		dateRange.value[0] = now.subtract(7, 'day')
		dateRange.value[1] = now

		// datetimeRange.value[0] = proxy.$dayjs().format('YYYY-MM-DD HH:mm:ss')  
		datetimeRange.value[0] = now.subtract(7, 'day').startOf('day')
		datetimeRange.value[1] = now.endOf('day')
	}

	const handleAfter = () => {
		let now = proxy.$dayjs()
		date.value = now.add(10, 'day')
		dateRange.value[0] = now
		dateRange.value[1] = now.add(10, 'day')

		// datetimeRange.value[0] = proxy.$dayjs().format('YYYY-MM-DD HH:mm:ss')  
		datetimeRange.value[0] = now.startOf('day')
		datetimeRange.value[1] = now.add(10, 'day').endOf('day')
	}
</script>

<style>
</style>