<template>
  <van-calendar :show-mark="false"
    :min-date="searchMinDate"
    :max-date="searchMaxDate"
    :default-date="innerDefaultDate"
    type="range"
    allow-same-day
    teleport="body" />
</template>

<script setup>
const props = defineProps({
  setNextMaxMonth: { // 设置下一个月为最大日期
    type: Boolean,
    default: false
  },
  setNowMaxMonth: { // 设置当前月为最大日期
    type: Boolean,
    default: false
  },
  defaultDate: { // 默认日期
    type: [Array, Date, String],
    default: () => {
      return new Date()
    }
  }
})

const innerDefaultDate = ref(props.defaultDate)
watch(() => props.defaultDate, (newVal) => {
  if (typeof newVal === 'string') {
    innerDefaultDate.value = new Date() 
  } else {
    innerDefaultDate.value = newVal 
  } 
})

// 设置最小日期选择范围
const searchMinDate = computed(() => {
  // 默认为今年 1 月 1 日
  return new Date(new Date().getFullYear(), 0, 1)
})

// 设置最大日期选择范围
const searchMaxDate = computed(() => {
  if (props.setNextMaxMonth) {
    // 设置当月最后一日为最大范围
    if (props.setNowMaxMonth) {
      return new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0)
    }
    // 设置下个月最后一日为最大范围
    return new Date(new Date().getFullYear(), new Date().getMonth() + 2, 0)
  } else {
    // 默认为当前日期的六个月后
    return new Date(new Date().getFullYear(), new Date().getMonth() + 6, new Date().getDate())
  }
})
</script>
