<template>
  <div class="debug-container">
    <h2>日期选择器调试页面</h2>
    
    <div class="test-section">
      <h3>1. 普通日期选择器</h3>
      <a-date-picker 
        v-model:value="singleDate" 
        @change="handleSingleChange"
        style="width: 200px; margin-right: 16px;"
      />
      <p>当前值: {{ singleDate ? singleDate.format('YYYY-MM-DD') : '未选择' }}</p>
    </div>

    <div class="test-section">
      <h3>2. 范围选择器 (range模式)</h3>
      <a-date-picker 
        v-model:value="rangeDate" 
        :range="true"
        @change="handleRangeChange"
        style="width: 300px; margin-right: 16px;"
      />
      <p>当前值: {{ rangeDate ? rangeDate.map(d => d.format('YYYY-MM-DD')).join(' ~ ') : '未选择' }}</p>
    </div>

    <div class="test-section">
      <h3>3. 范围选择器 (使用range属性)</h3>
      <a-date-picker 
        v-model:value="rangeDate2" 
        range
        @change="handleRangeChange2"
        style="width: 300px; margin-right: 16px;"
      />
      <p>当前值: {{ rangeDate2 ? rangeDate2.map(d => d.format('YYYY-MM-DD')).join(' ~ ') : '未选择' }}</p>
    </div>

    <div class="test-section">
      <h3>4. 使用RangePicker组件</h3>
      <a-range-picker 
        v-model:value="rangePickerDate" 
        @change="handleRangePickerChange"
        style="width: 300px; margin-right: 16px;"
      />
      <p>当前值: {{ rangePickerDate ? rangePickerDate.map(d => d.format('YYYY-MM-DD')).join(' ~ ') : '未选择' }}</p>
    </div>
  </div>
</template>

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

const singleDate = ref(dayjs());
const rangeDate = ref([dayjs().subtract(7, 'day'), dayjs()]);
const rangeDate2 = ref([dayjs().subtract(7, 'day'), dayjs()]);
const rangePickerDate = ref([dayjs().subtract(7, 'day'), dayjs()]);

const handleSingleChange = (date) => {
  console.log('单日期选择:', date);
};

const handleRangeChange = (dates) => {
  console.log('范围选择:', dates);
};

const handleRangeChange2 = (dates) => {
  console.log('范围选择2:', dates);
};

const handleRangePickerChange = (dates) => {
  console.log('RangePicker选择:', dates);
};
</script>

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

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

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