<template>
  <t-date-range-picker
    style="width: 240px"
    v-model="range"
    :presets="presets"
    @pick="timeChange"
    @preset-click="presetClick"
  />
</template>
<script setup name="CustomDatePicker">
import { ref, onMounted } from 'vue';
import dayjs from 'dayjs';
import { useVModel } from '@vueuse/core';
import { dateFormat } from '@/utils/tool';
const props = defineProps({
  modelValue: Array,
});
const emit = defineEmits(['update:modelValue', 'timeChange']);
const timeChange = (e, obj) => {
  if (obj.partial === 'end') {
    emit('timeChange', range.value);
  }
};
const presetClick = () => {
  emit('timeChange', range.value);
};
const range = useVModel(props, 'modelValue', emit);

onMounted(() => {
  if (!props.modelValue?.length) {
    const now = Date.now();
    range.value = [
      // dayjs().startOf('year').format('YYYY-MM-DD'),
      // dayjs().endOf('year').format('YYYY-MM-DD'),
      dateFormat(now - 31536000000, 'yyyy-MM-dd'),
      dateFormat(now, 'yyyy-MM-dd'),
    ];
    emit('timeChange', [
      // dayjs().startOf('year').format('YYYY-MM-DD'),
      // dayjs().endOf('year').format('YYYY-MM-DD'),
      dateFormat(now - 31536000000, 'yyyy-MM-dd'),
      dateFormat(now, 'yyyy-MM-dd'),
    ]);
  }
});

const presets = ref({
  本年度: [
    dayjs().startOf('year').format('YYYY-MM-DD'),
    dayjs().endOf('year').format('YYYY-MM-DD'),
  ],
  上一年度: [
    dayjs().add(-1, 'year').startOf('year').format('YYYY-MM-DD'),
    dayjs().add(-1, 'year').endOf('year').format('YYYY-MM-DD'),
  ],
  下一年度: [
    dayjs().add(1, 'year').startOf('year').format('YYYY-MM-DD'),
    dayjs().add(1, 'year').endOf('year').format('YYYY-MM-DD'),
  ],
  上半年度: [
    dayjs().startOf('year').format('YYYY-MM-DD'),
    dayjs().endOf('year').subtract(6, 'month').format('YYYY-MM-DD'),
  ],
  下半年度: [
    dayjs().startOf('year').add(6, 'month').format('YYYY-MM-DD'),
    dayjs().endOf('year').format('YYYY-MM-DD'),
  ],
  本季度: [
    dayjs().startOf('quarter').format('YYYY-MM-DD'),
    dayjs().endOf('quarter').format('YYYY-MM-DD'),
  ],
  上一季度: [
    dayjs().add(-1, 'quarter').startOf('quarter').format('YYYY-MM-DD'),
    dayjs().add(-1, 'quarter').endOf('quarter').format('YYYY-MM-DD'),
  ],
  下一季度: [
    dayjs().add(1, 'quarter').startOf('quarter').format('YYYY-MM-DD'),
    dayjs().add(1, 'quarter').endOf('quarter').format('YYYY-MM-DD'),
  ],
  本月: [
    dayjs().startOf('month').format('YYYY-MM-DD'),
    dayjs().endOf('month').format('YYYY-MM-DD'),
  ],
  上月: [
    dayjs().add(-1, 'month').startOf('month').format('YYYY-MM-DD'),
    dayjs().add(-1, 'month').endOf('month').format('YYYY-MM-DD'),
  ],
  下月: [
    dayjs().add(1, 'month').startOf('month').format('YYYY-MM-DD'),
    dayjs().add(1, 'month').endOf('month').format('YYYY-MM-DD'),
  ],
  本周: [
    dayjs().startOf('week').add(1, 'day').format('YYYY-MM-DD'),
    dayjs().endOf('week').add(1, 'day').format('YYYY-MM-DD'),
  ],
  上周: [
    dayjs().add(-1, 'week').startOf('week').add(1, 'day').format('YYYY-MM-DD'),
    dayjs().add(-1, 'week').endOf('week').add(1, 'day').format('YYYY-MM-DD'),
  ],
  下周: [
    dayjs().add(1, 'week').startOf('week').add(1, 'day').format('YYYY-MM-DD'),
    dayjs().add(1, 'week').endOf('week').add(1, 'day').format('YYYY-MM-DD'),
  ],
  今天: [dayjs().format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')],
  昨天: [
    dayjs().add(-1, 'day').format('YYYY-MM-DD'),
    dayjs().add(-1, 'day').format('YYYY-MM-DD'),
  ],
  明天: [
    dayjs().add(1, 'day').format('YYYY-MM-DD'),
    dayjs().add(1, 'day').format('YYYY-MM-DD'),
  ],
  过去7天: [
    dayjs().add(-7, 'day').format('YYYY-MM-DD'),
    dayjs().format('YYYY-MM-DD'),
  ],
  过去30天: [
    dayjs().add(-30, 'day').format('YYYY-MM-DD'),
    dayjs().format('YYYY-MM-DD'),
  ],
  未来7天: [
    dayjs().format('YYYY-MM-DD'),
    dayjs().add(7, 'day').format('YYYY-MM-DD'),
  ],
  未来30天: [
    dayjs().format('YYYY-MM-DD'),
    dayjs().add(30, 'day').format('YYYY-MM-DD'),
  ],
});
</script>
