<template>
  <n-space>
    <n-input-group>
      <n-input-group>
        <span class="w-80px mr-5px line-height-33.99px">学科名称</span>
        <n-input :style="{ width: '31%', marginRight: '2%' }" clearable />
        <span class="w-80px mr-5px line-height-33.99px">学科描述</span>
        <n-input :style="{ width: '31%', marginRight: '2%' }" clearable />
        <span class="w-100px line-height-33.99px">创建用户ID</span>
        <n-input-number :style="{ width: '22%', marginRight: '10%' }" clearable />
      </n-input-group>
      <n-input-group>
        <span class="line-height-33.99px mr-5px w-70px">创建时间</span>
        <n-date-picker :style="{ width: '13%' }" />
        <n-time-picker :style="{ width: '14.2%', marginRight: '2%' }" />
        <span class="line-height-33.99px mr-5px w-70px">修改时间</span>
        <n-date-picker :style="{ width: '13%' }" />
        <n-time-picker :style="{ width: '14.2%', marginRight: '2%' }" />
        <span class="w-50px line-height-33.99px">状态</span>
        <n-select :options="selectOptions" :style="{ width: '21%', marginRight: '2%' }" clearable />
      </n-input-group>
      <span class="w-40px mr-5px line-height-33.99px">页码</span>
      <n-input-number
        v-model="pagination.page"
        :style="{ width: '48%', marginRight: '2%' }"
        placeholder="请输入页码..."
        clearable
        @change="searchCondition"
      />
      <span class="w-40px mr-5px line-height-33.99px">条数</span>
      <n-input-number
        v-model="pagination.pageSize"
        :style="{ width: '48%' }"
        placeholder="请输入数据条数..."
        clearable
        @change="searchCondition"
      />
      <n-button type="primary" ghost @click="searchCondition()"> 搜索 </n-button>
    </n-input-group>
  </n-space>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import type { PaginationProps } from 'naive-ui';
import { selectByCondition_1 } from '~/src/service/api/sort';
import type { SelectByCondition_1Params } from '~/src/service/api/sort';

const searchData = ref<any[]>([]);
const pagination: PaginationProps = ref({
  page: 1,
  pageSize: 10,
  showSizePicker: true,
  pageSizes: [10, 20, 50],
  onChange: (page: number) => {
    // 处理页码变化
    pagination.page = page;
  },
  onUpdatePageSize: (pageSize: number) => {
    // 处理每页显示数量变化
    pagination.pageSize = pageSize;
    pagination.page = 1;
  }
}).value;

function searchCondition() {
  const pageNum = pagination.page as number;
  const pageSize = pagination.pageSize as number;
  const params: SelectByCondition_1Params = {};

  selectByCondition_1(pageNum, pageSize, params).then(res => {
    searchData.value = res.data as [];
  });
}

export default defineComponent({
  setup() {
    return {
      searchCondition,
      searchData,
      pagination,
      selectOptions: ref([
        {
          label: 'Y',
          value: 'Y'
        },
        {
          label: 'N',
          value: 'N'
        }
      ])
    };
  }
});
</script>
