<template>
  <div class="simple-test">
    <h2>简单Dayjs测试</h2>
    
    <div class="test-section">
      <h3>1. 直接使用dayjs</h3>
      <p>当前时间: {{ currentTime }}</p>
      <p>格式化测试: {{ formattedTime }}</p>
      <p>dayjs实例类型: {{ dayjsType }}</p>
      <p>dayjs.locale方法存在: {{ hasLocaleMethod }}</p>
    </div>

    <div class="test-section">
      <h3>2. 简单日期选择器</h3>
      <a-date-picker 
        v-model:value="testDate" 
        style="width: 200px;"
      />
      <p>选择的值: {{ testDate ? testDate.format('YYYY-MM-DD') : '未选择' }}</p>
      <p>值类型: {{ testDate ? typeof testDate : 'null' }}</p>
      <p v-if="testDate">有locale方法: {{ testDate && typeof testDate.locale === 'function' }}</p>
    </div>
  </div>
</template>

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

const currentTime = ref(dayjs().format());
const formattedTime = ref(dayjs().format('YYYY-MM-DD HH:mm:ss'));
const dayjsType = ref(typeof dayjs);
const hasLocaleMethod = ref(typeof dayjs.locale === 'function');
const testDate = ref(dayjs());

onMounted(() => {
  console.log('简单Dayjs测试:');
  console.log('dayjs:', dayjs);
  console.log('dayjs.locale:', dayjs.locale);
  console.log('dayjs实例:', dayjs());
  console.log('dayjs实例locale方法:', dayjs().locale);
});
</script>

<style scoped>
.simple-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>