<template>
  <div class="demo-date-picker">
    <ui-date-picker
      v-model="value1"
      placeholder="选择预设快捷选项"
      mode="range"
      format="yyyy-MM-dd"
      shortcuts="today,thisWeek,nextWeek,thisMonth,nextMonth,thisSeason,nextSeason,thisYear"
      value-type="date"></ui-date-picker>

    <ui-date-picker
      v-model="value2"
      :shortcuts="shortcuts"
      placeholder="自定义快捷选项"
      mode="range"
      format="yyyy-MM-dd"
      value-type="date"
      type="date-time"></ui-date-picker>
  </div>
</template>

<script>
import { DatePicker } from "amumu-ui"

export default {
  components: {
    "ui-date-picker": DatePicker,
  },
  data() {
    return {
      value1: "",
      value2: "",
      shortcuts: [
        DatePicker.RANGE_SHORTCUTS.lastWeek,
        {
          text: "今天",
          onClick(picker) {
            const now = new Date()
            const year = now.getFullYear()
            const month = now.getMonth()
            const date = now.getDate()

            const start = new Date(year, month, date, 0, 0, 0)
            const end = new Date(year, month, date, 23, 59, 59)
            picker.$emit("input", [start, end])
          },
        },
        {
          text: "昨天",
          onClick(picker) {
            const now = new Date()
            const year = now.getFullYear()
            const month = now.getMonth()
            const date = now.getDate()

            const start = new Date(year, month, date - 1, 0, 0, 0)
            const end = new Date(year, month, date - 1, 23, 59, 59)
            picker.$emit("input", [start, end])
          },
        },
        {
          text: "最近一周",
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit("input", [start, end])
          },
        },
      ],
    }
  },
}
</script>
