<template>
  <div>
 <el-date-picker v-model="listQuery" :type="type" :shortcuts="shortcuts" range-separator="至" start-placeholder="开始时间"
    :value-format="valueFrmat" :format="valueFrmat" end-placeholder="结束时间" @change="changeTime" />
  </div>

</template>

<script setup>
import { ref, watch } from 'vue'
const props = defineProps({
 type: {
    type: String,
    default: "datetimerange"
  },
  valueFrmat: {
    type: String,
    default: "YYYY-MM-DD HH:mm:ss"
  }

})
const listQuery = ref([])
const emit = defineEmits(['changeTime'])

// 日期变化时发出事件
const changeTime = (val) => {
  const promes = {
    startTime:val?.[0] || '',
    endTime: val?.[1] || ''
  }
  emit('changeTime', promes);
};

const shortcuts = [
  {
    text: '近3天',
    value: () => {
      // 结束时间：当前日期的23:59:59
      const end = new Date()
      end.setHours(23, 59, 59, 999)
      // 开始时间：3天前的00:00:00
      const start = new Date()
      start.setDate(start.getDate() - 3)
      start.setHours(0, 0, 0, 0)
      return [start, end]
    },
  },
  {
    text: '近7天',
    value: () => {
      // 结束时间：当前日期的23:59:59
      const end = new Date()
      end.setHours(23, 59, 59, 999)
      // 开始时间：3天前的00:00:00
      const start = new Date()
      start.setDate(start.getDate() - 7)
      start.setHours(0, 0, 0, 0)
      return [start, end]
    },
  },
  {
    text: '近30天',
    value: () => {
      const end = new Date()
      end.setHours(23, 59, 59, 999)
      const start = new Date()
      start.setMonth(start.getMonth() - 1)
      start.setHours(0, 0, 0, 0)
      return [start, end]
    },
  },
]

</script>


<style lang="scss" scoped>
@import "@/assets/css/homeScreen.scss";
</style>
