<template>
  <div class="range-test">
    <h2>范围选择器测试</h2>
    
    <div class="test-section">
      <h3>1. 使用 range 属性的日期选择器</h3>
      <a-date-picker 
        v-model:value="rangeDate1" 
        range
        @change="logRangeChange1"
        style="width: 300px; margin-bottom: 20px;"
      />
      <p>选择的值: {{ rangeDate1 ? rangeDate1.map(d => d && d.format ? d.format('YYYY-MM-DD') : String(d)).join(' ~ ') : '未选择' }}</p>
      <p>值类型: {{ Array.isArray(rangeDate1) ? 'array' : typeof rangeDate1 }}</p>
      <p v-if="Array.isArray(rangeDate1)">数组元素类型: {{ rangeDate1.map(d => typeof d).join(', ') }}</p>
      <p v-if="Array.isArray(rangeDate1)">元素有locale方法: {{ rangeDate1.map(d => d && typeof d.locale === 'function').join(', ') }}</p>
    </div>

    <div class="test-section">
      <h3>2. 使用 a-range-picker 组件</h3>
      <a-range-picker 
        v-model:value="rangeDate2" 
        @change="logRangeChange2"
        style="width: 300px; margin-bottom: 20px;"
      />
      <p>选择的值: {{ rangeDate2 ? rangeDate2.map(d => d && d.format ? d.format('YYYY-MM-DD') : String(d)).join(' ~ ') : '未选择' }}</p>
      <p>值类型: {{ Array.isArray(rangeDate2) ? 'array' : typeof rangeDate2 }}</p>
      <p v-if="Array.isArray(rangeDate2)">数组元素类型: {{ rangeDate2.map(d => typeof d).join(', ') }}</p>
      <p v-if="Array.isArray(rangeDate2)">元素有locale方法: {{ rangeDate2.map(d => d && typeof d.locale === 'function').join(', ') }}</p>
    </div>

    <div class="test-section">
      <h3>3. 手动验证dayjs实例</h3>
      <button @click="testDayjsInstances" style="margin-right: 16px;">测试dayjs实例</button>
      <p>测试结果: {{ testResult }}</p>
    </div>
  </div>
</template>

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

const rangeDate1 = ref([dayjs().subtract(7, 'day'), dayjs()]);
const rangeDate2 = ref([dayjs().subtract(7, 'day'), dayjs()]);
const testResult = ref('');

const logRangeChange1 = (dates) => {
  console.log('range属性选择器变化:', 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 logRangeChange2 = (dates) => {
  console.log('RangePicker组件变化:', 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 testDayjsInstances = () => {
  try {
    // 测试当前使用的dayjs实例
    const testDate1 = dayjs('2023-01-01');
    const testDate2 = dayjs('2023-12-31');
    
    const hasLocale1 = testDate1 && typeof testDate1.locale === 'function';
    const hasLocale2 = testDate2 && typeof testDate2.locale === 'function';
    
    testResult.value = `测试成功! 日期1有locale: ${hasLocale1}, 日期2有locale: ${hasLocale2}`;
    console.log('手动dayjs实例测试:', {
      date1: testDate1,
      date2: testDate2,
      hasLocale1,
      hasLocale2
    });
  } catch (error) {
    testResult.value = `测试失败: ${error.message}`;
    console.error('手动dayjs实例测试错误:', error);
  }
};
</script>

<style scoped>
.range-test {
  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>