<template>
  <Navbar title="测试pc-component组件" :is-go-back="true">
    <a-button>你好</a-button>
    <!-- <template #default> 您好 </template> -->
  </Navbar>
  <YearPicker
    v-model="selectedYear"
    :placeholder="'测试年份'"
    @selected="textChanged"
  />
  <a-divider />
  <VueMonthlyPicker
    id="month-picker"
    v-model="selectedMonth"
    @selected="textChanged"
  />
  <a-divider />
  <Date
    :model-value="selectedDate"
    :data-vv-name="'test0'"
    :name="'test0'"
    :data-vv-value-path="selectedDate"
    :readonly="readOnly"
    style="width: 100%"
    @update:model-value="textChanged"
  />
  <a-divider />
  <DateTime
    :model-value="selectDateTime"
    :readonly="readOnly"
    style="width: 100%"
    @update:model-value="textChanged"
  />
  <a-divider />
  <Time
    v-model="selectedTime"
    :data-vv-name="'test'"
    :name="'test'"
    :data-vv-value-path="selectedTime"
    :readonly="readOnly"
    @update:model-value="textChanged"
  />
  <a-divider />
  <a-button type="primary" @click="backFirstPage">回到第一页</a-button>
  <div class="pagination-right">
    <AntdPagination
      ref="paginationRef"
      :pagination="pagination"
      :options="options"
      :size="size"
      :disabled="disabled"
      @get-page-params="getPageParams"
    />
  </div>
  <a-divider />
  <div>
    <a-button type="primary" @click="open1 = true">打开模态框</a-button>
    <Modal
      v-model:show="open1"
      :force="true"
      :show-canel-button="false"
      :show-ok-button="false"
      :show-top-right-close-button="true"
      @ok="handleOk"
      @cancel="handleCancel"
      @close="handleClose"
    >
      <template #header>
        <h1>测试</h1>
      </template>
      <p>标题+内容+自定义结尾</p>
      <a-button @click="open2 = true">打开另一个模态框</a-button>
      <template #footer> 结尾 </template>
    </Modal>
    <Modal
      v-model:show="open2"
      title="无插槽标题"
      @ok="handleOk"
      @cancel="handleCancel"
      @close="handleClose"
    >
      <p>标题+内容+默认结尾按钮</p>
    </Modal>
  </div>
</template>

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

const readOnly = ref(false);
const selectedYear = ref('2026');
const selectedMonth = ref('2026-05');
const selectedDate = ref('2026-05-05');
const selectDateTime = ref('2021-10-09 12:00:01');
const selectedTime = ref('15:03:04');

const size = ref('small'); // 大小
const disabled = ref(false); // 是否禁用
const paginationRef = ref(null); // 分页组件实例

// 分页配置
const pagination = ref({
  total: 100, // 总条数
  per_page: 20, // 每页条数
  current_page: 1, // 当前页
});
// 分页配置(以下为默认值可不传)
const options = ref({
  showTotal: true, // 显示总条数
  showSizeChanger: true, // 显示每页条数
  showQuickJumper: true, // 显示快速跳转
  pageSizeOptions: ['10', '20', '50', '100', '200', '500'], // 每页条数选项
});

const open1 = ref(false);
const open2 = ref(false);

// 页数改变
const getPageParams = (page, pageSize) => {
  console.log(page, pageSize, 'getPageParams');
  pagination.value.current_page = page;
  pagination.value.per_page = pageSize;
  console.log('执行查询---');
};

// 回到第一页
const backFirstPage = () => {
  paginationRef.value.backFirstPage();
  //   pagination.value.current_page = 1;
  //   console.log('执行查询---');
};

const handleOk = () => {
  console.log('handleOk');
};
const handleCancel = () => {
  console.log('handleCancel');
};
const handleClose = () => {
  console.log('handleClose');
};

const textChanged = value => {
  console.log('变化了', value);
};
</script>
<style scoped>
.pagination-right {
  float: right;
}
</style>