<template>
  <div class="debug-container">
    <h2>Dayjs 配置调试页面</h2>
    
    <div class="test-section">
      <h3>1. Dayjs 基本功能测试</h3>
      <p>当前时间: {{ currentTime }}</p>
      <p>格式化测试: {{ formattedTime }}</p>
      <p>相对时间测试: {{ relativeTime }}</p>
      <p>语言设置: {{ localeInfo }}</p>
    </div>

    <div class="test-section">
      <h3>2. Dayjs 实例检查</h3>
      <p>dayjs 函数类型: {{ typeof dayjs }}</p>
      <p>dayjs.locale 类型: {{ typeof dayjs.locale }}</p>
      <p>dayjs.extend 类型: {{ typeof dayjs.extend }}</p>
      <p>当前语言: {{ currentLocale }}</p>
    </div>

    <div class="test-section">
      <h3>3. 全局属性检查</h3>
      <p>$dayjs 是否存在: {{ hasGlobalDayjs }}</p>
      <p>$dayjs 类型: {{ globalDayjsType }}</p>
      <p v-if="hasGlobalDayjs">$dayjs.locale 类型: {{ globalDayjsLocaleType }}</p>
    </div>

    <div class="test-section">
      <h3>4. 手动创建日期选择器</h3>
      <a-date-picker 
        v-model:value="testDate" 
        @change="handleTestChange"
        style="width: 200px; margin-right: 16px;"
      />
      <p>测试日期: {{ testDate ? testDate.format('YYYY-MM-DD') : '未选择' }}</p>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance } from 'vue';
import dayjs from 'dayjs';

const currentTime = ref(dayjs().format());
const formattedTime = ref(dayjs().format('YYYY-MM-DD HH:mm:ss'));
const relativeTime = ref(dayjs().subtract(2, 'hour').fromNow());
const localeInfo = ref(dayjs.locale());
const currentLocale = ref(dayjs.locale());
const testDate = ref(dayjs());

const instance = getCurrentInstance();
const hasGlobalDayjs = ref(!!(instance?.appContext.config.globalProperties.$dayjs));
const globalDayjsType = ref(hasGlobalDayjs.value ? typeof instance.appContext.config.globalProperties.$dayjs : 'N/A');
const globalDayjsLocaleType = ref(hasGlobalDayjs.value ? typeof instance.appContext.config.globalProperties.$dayjs.locale : 'N/A');

const handleTestChange = (date) => {
  console.log('测试日期选择:', date);
};

// 检查dayjs插件是否正常
onMounted(() => {
  console.log('Dayjs 调试信息:');
  console.log('dayjs:', dayjs);
  console.log('dayjs.locale:', dayjs.locale);
  console.log('dayjs.extend:', dayjs.extend);
  console.log('当前语言:', dayjs.locale());
  
  if (hasGlobalDayjs.value) {
    console.log('$dayjs:', instance.appContext.config.globalProperties.$dayjs);
    console.log('$dayjs.locale:', instance.appContext.config.globalProperties.$dayjs.locale);
  }
});
</script>

<style scoped>
.debug-container {
  padding: 20px;
}

.test-section {
  margin-bottom: 30px;
  padding: 20px;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  background-color: #fafafa;
}

.test-section h3 {
  color: #1890ff;
  margin-bottom: 15px;
}

.test-section p {
  margin: 5px 0;
  font-family: monospace;
}
</style>