<template>
  <view class="lecturer-container">
    <!-- 搜索 -->
    <uni-search-bar
      placeholder="关键词"
      bgColor="#ffffff"
      clearButton="auto"
      cancelButton="none"
      @confirm="search"
      @clear="clear"
    />

    <view v-if="lecturerList.length">
      <block v-for="(item, index) in lecturerList" :key="index">
        <lecturerItem :lecturerItem="item" @init="initLecturerItem" />
      </block>
      <view style="padding: 20rpx">
        <u-loadmore :status="status" icon-type="flower" />
      </view>
    </view>
    <u-empty
      v-else
      text="暂无数据~"
      icon-size="506"
      :margin-top="220"
      src="../../static/img/noData.png"
    ></u-empty>
  </view>
</template>

<script setup lang="ts">
import { getLecturerList } from "@/api/lecturer";
import lecturerItem from "./components/lecturerItem.vue";

const listQuery = reactive({
  PageIndex: 1,
  PageSize: 10,
  total: 0,
  KeyWords: "",
});

const lecturerList = ref([] as any);
const status = ref("loadmore");

const search = (val: any) => {
  listQuery.KeyWords = val.value;
  lecturerList.value = [];
  init();
};

const clear = () => {
  listQuery.KeyWords = "";
};

const initLecturerItem = () => {};

// 上拉加载数据
onReachBottom(() => {
  // 判断是否还有下一页数据
  if (listQuery.PageIndex * listQuery.PageSize >= listQuery.total)
    return (status.value = "nomore");
  // // 判断是否正在请求其它数据，如果是，则不发起额外的请求
  if (status.value === "loading") return;
  listQuery.PageIndex += 1;
  init();
});

const init = async () => {
  status.value = "loading";
  const { data: res } = await getLecturerList(listQuery);
  if (res.code == 200) {
    if (res.total > 10) status.value = "loadmore";
    else status.value = "nomore";
    lecturerList.value = [...lecturerList.value, ...res.data];
    listQuery.total = res.total;
  }
};
init();
</script>

<style lang="scss" scoped>
.lecturer-container {
  padding: 0 32rpx 64rpx;
}
</style>
