<template>
  <div class="date-picker-test">
    <a-page-header
      title="日期组件测试"
      sub-title="测试dayjs与Ant Design Vue日期组件的集成"
    />

    <a-card style="margin-top: 16px">
      <h3>基础日期选择器</h3>
      <a-date-picker 
        v-model:value="dateValue"
        placeholder="请选择日期"
        style="width: 200px"
      />
      <p style="margin-top: 10px">当前选择的值: {{ dateValue }}</p>
    </a-card>

    <a-card style="margin-top: 16px">
      <h3>范围日期选择器</h3>
      <a-range-picker 
        v-model:value="rangeValue"
        placeholder="请选择日期范围"
      />
      <p style="margin-top: 10px">当前选择的范围: {{ rangeValue }}</p>
    </a-card>

    <a-card style="margin-top: 16px">
      <h3>日期时间选择器</h3>
      <a-date-picker 
        v-model:value="dateTimeValue"
        show-time
        placeholder="请选择日期时间"
        style="width: 250px"
      />
      <p style="margin-top: 10px">当前选择的时间: {{ dateTimeValue }}</p>
    </a-card>

    <a-card style="margin-top: 16px">
      <h3>手动测试dayjs</h3>
      <p>当前日期: {{ formattedToday }}</p>
      <p>5天后: {{ formattedFuture }}</p>
      <p>5天前: {{ formattedPast }}</p>
    </a-card>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'

const dateValue = ref(null)
const rangeValue = ref(null)
const dateTimeValue = ref(null)

// 使用我们配置的dayjs实例
  // 手动创建一个函数来获取全局配置的dayjs实例
  const getGlobalDayjs = () => {
    // 访问全局配置的dayjs实例
    const { $dayjs } = window.app.config.globalProperties
    return $dayjs
  }

// 格式化日期进行显示
const formattedToday = computed(() => {
  const dayjs = getGlobalDayjs()
  return dayjs().format('YYYY年MM月DD日')
})

const formattedFuture = computed(() => {
  const dayjs = getGlobalDayjs()
  return dayjs().add(5, 'day').format('YYYY年MM月DD日')
})

const formattedPast = computed(() => {
  const dayjs = getGlobalDayjs()
  return dayjs().subtract(5, 'day').format('YYYY年MM月DD日')
})

onMounted(() => {
  console.log('日期组件测试页面已加载')
  // 这里可以添加更多测试逻辑
})
</script>

<style scoped>
.date-picker-test {
  padding: 0;
}
</style>