<template>
  <ie-page bg-color="#F6F8FA">
    <z-paging ref="paging" v-model="list" :auto="false" :default-page-size="30" @query="handleQuery">
      <template #top>
        <view>
          <ie-navbar title="选择学校" />
          <view class="bg-white px-30 py-20">
            <uv-input placeholder="请输入关键字" border="surround" shape="circle" prefixIcon="search"
              prefixIconStyle="font-size: 22px;color: #909399" v-model="keyword" @confirm="handleConfirm"></uv-input>
          </view>
        </view>
      </template>
      <view class="mt-16">
        <view class="p-20 bg-white" v-for="item in list" :key="item.id" @click="handleItemClick(item)">
          {{ item.name }}
        </view>
      </view>
    </z-paging>
  </ie-page>
</template>

<script lang="ts" setup>
import { getSchoolList } from '@/api/modules/user';
import { SchoolItem } from '@/types/user';
import { useTransferPage } from '@/hooks/useTransferPage';
const { transferTo, transferBack } = useTransferPage();
const keyword = ref<string>('');
const list = ref<SchoolItem[]>([]);
const paging = ref();
const handleQuery = (pageNum: number, pageSize: number) => {
  uni.$ie.showLoading();
  getSchoolList({
    keyword: keyword.value,
    pageNum,
    pageSize
  }).then(res => {
    paging.value.complete(res.rows, res.total);
  }).catch(e => {
    paging.value.complete(false);
  }).finally(() => {
    uni.$ie.hideLoading();
  });
};
const handleItemClick = (item: SchoolItem) => {
  transferBack(item);
};
const handleConfirm = () => {
  paging.value.reload();
};
onMounted(() => {
  paging.value.reload();
});
</script>

<style lang="scss" scoped></style>
