<template>
  <div class="debug-container">
    <h2>Ant Design Vue 配置调试页面</h2>
    
    <div class="test-section">
      <h3>1. Ant Design Vue 版本信息</h3>
      <p>Ant Design Vue 版本: {{ antdVersion }}</p>
      <p>Vue 版本: {{ vueVersion }}</p>
    </div>

    <div class="test-section">
      <h3>2. 日期选择器配置测试</h3>
      <div class="test-group">
        <h4>单个日期选择器</h4>
        <a-date-picker 
          v-model:value="singleDate" 
          @change="logSingleChange"
          style="width: 200px; margin-right: 16px;"
        />
        <p>选择的值: {{ singleDate ? singleDate.format('YYYY-MM-DD') : '未选择' }}</p>
        <p>值类型: {{ singleDate ? typeof singleDate : 'null' }}</p>
      </div>

      <div class="test-group">
        <h4>范围选择器 (range属性)</h4>
        <a-date-picker 
          v-model:value="rangeDate" 
          range
          @change="logRangeChange"
          style="width: 300px; margin-right: 16px;"
        />
        <p>选择的值: {{ rangeDate ? rangeDate.map(d => d.format('YYYY-MM-DD')).join(' ~ ') : '未选择' }}</p>
        <p>值类型: {{ Array.isArray(rangeDate) ? 'array' : typeof rangeDate }}</p>
        <p v-if="Array.isArray(rangeDate)">数组元素类型: {{ rangeDate.map(d => typeof d).join(', ') }}</p>
      </div>

      <div class="test-group">
        <h4>RangePicker 组件</h4>
        <a-range-picker 
          v-model:value="rangePickerDate" 
          @change="logRangePickerChange"
          style="width: 300px;"
        />
        <p>选择的值: {{ rangePickerDate ? rangePickerDate.map(d => d.format('YYYY-MM-DD')).join(' ~ ') : '未选择' }}</p>
        <p>值类型: {{ Array.isArray(rangePickerDate) ? 'array' : typeof rangePickerDate }}</p>
        <p v-if="Array.isArray(rangePickerDate)">数组元素类型: {{ rangePickerDate.map(d => typeof d).join(', ') }}</p>
      </div>
    </div>

    <div class="test-section">
      <h3>3. 手动创建dayjs实例测试</h3>
      <button @click="testDayjsCreation" style="margin-right: 16px;">测试dayjs实例创建</button>
      <p>测试结果: {{ dayjsTestResult }}</p>
    </div>

    <div class="test-section">
      <h3>4. 全局配置检查</h3>
      <p>全局$dayjs存在: {{ hasGlobalDayjs }}</p>
      <p>Antd配置中的getDayjsInstance类型: {{ getDayjsInstanceType }}</p>
      <p>Antd配置中的getDayjsInstance返回值类型: {{ getDayjsInstanceReturnType }}</p>
    </div>
  </div>
</template>

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

const antdVersion = ref('未知');
const vueVersion = ref('未知');
const singleDate = ref(dayjs());
const rangeDate = ref([dayjs().subtract(7, 'day'), dayjs()]);
const rangePickerDate = ref([dayjs().subtract(7, 'day'), dayjs()]);
const dayjsTestResult = ref('');

const instance = getCurrentInstance();
const hasGlobalDayjs = ref(!!(instance?.appContext.config.globalProperties.$dayjs));
const getDayjsInstanceType = ref('未知');
const getDayjsInstanceReturnType = ref('未知');

const logSingleChange = (date) => {
  console.log('单个日期选择器变化:', date, '类型:', typeof date);
  if (date && typeof date.locale === 'function') {
    console.log('日期对象有locale方法');
  } else {
    console.log('日期对象缺少locale方法');
  }
};

const logRangeChange = (dates) => {
  console.log('范围选择器变化:', dates, '类型:', Array.isArray(dates) ? 'array' : typeof dates);
  if (Array.isArray(dates)) {
    dates.forEach((date, index) => {
      console.log(`日期 ${index + 1}:`, date, '类型:', typeof date);
      if (date && typeof date.locale === 'function') {
        console.log(`日期 ${index + 1} 有locale方法`);
      } else {
        console.log(`日期 ${index + 1} 缺少locale方法`);
      }
    });
  }
};

const logRangePickerChange = (dates) => {
  console.log('RangePicker变化:', dates, '类型:', Array.isArray(dates) ? 'array' : typeof dates);
  if (Array.isArray(dates)) {
    dates.forEach((date, index) => {
      console.log(`日期 ${index + 1}:`, date, '类型:', typeof date);
      if (date && typeof date.locale === 'function') {
        console.log(`日期 ${index + 1} 有locale方法`);
      } else {
        console.log(`日期 ${index + 1} 缺少locale方法`);
      }
    });
  }
};

const testDayjsCreation = () => {
  try {
    const testDate = dayjs('2023-01-01');
    const hasLocale = typeof testDate.locale === 'function';
    const hasFormat = typeof testDate.format === 'function';
    
    dayjsTestResult.value = `创建成功! 有locale方法: ${hasLocale}, 有format方法: ${hasFormat}`;
    console.log('手动创建dayjs测试:', testDate, '有locale:', hasLocale, '有format:', hasFormat);
  } catch (error) {
    dayjsTestResult.value = `创建失败: ${error.message}`;
    console.error('手动创建dayjs错误:', error);
  }
};

onMounted(() => {
  // 获取版本信息
  try {
    antdVersion.value = instance?.appContext.config.globalProperties?.$ANTD?.version || '未知';
    vueVersion.value = instance?.appContext.config.globalProperties?.$vue?.version || '未知';
  } catch (error) {
    console.log('获取版本信息失败:', error);
  }

  // 检查Antd配置
  try {
    const antdConfig = instance?.appContext.config.globalProperties?.$ANTD?.config;
    if (antdConfig && antdConfig.getDayjsInstance) {
      getDayjsInstanceType.value = typeof antdConfig.getDayjsInstance;
      const result = antdConfig.getDayjsInstance();
      getDayjsInstanceReturnType.value = typeof result;
      console.log('Antd getDayjsInstance配置:', {
        functionType: typeof antdConfig.getDayjsInstance,
        returnType: typeof result,
        returnValue: result
      });
    }
  } catch (error) {
    console.log('检查Antd配置失败:', error);
  }

  console.log('Antd配置调试页面加载完成');
});
</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-group {
  margin-bottom: 20px;
  padding: 15px;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  background-color: white;
}

.test-group h4 {
  color: #52c41a;
  margin-bottom: 10px;
}

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