<template>
  <view class="teach-container">
    <view v-if="teachPointsList.length">
      <!-- 搜索 -->
      <uni-search-bar
        placeholder="现场教学点"
        bgColor="#ffffff"
        clearButton="auto"
        cancelButton="none"
        @confirm="search"
      />
      <text style="margin-bottom: 20rpx; display: block"
        >为你找到{{ listQuery.total }}个的现场教学点</text
      >

      <block v-for="(item, index) in teachPointsList" :key="index">
        <teachPointsItem :teachPointsItem="item" />
      </block>
      <view style="padding: 20rpx">
        <u-loadmore :status="status" icon-type="flower" />
      </view>
    </view>
    <view v-else class="empty">
      <u-empty text="暂无数据" mode="list" />
    </view>
  </view>
</template>

<script setup lang="ts">
import teachPointsItem from "./components/teachPointsItem.vue"
import { getTeachPointsList } from "@/api/teachPoints"

const teachPointsList = ref([] as any)
const status = ref("loadmore")
const listQuery = reactive({
  pageIndex: 1,
  pageSize: 10,
  total: 0,
  Area: "",
})

const search = (val: any) => {
  teachPointsList.value = []
  listQuery.Area = val.value
  init()
}

// 上拉加载数据
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 getTeachPointsList(listQuery)
  if (res.code == 200) {
    if (res.total > 10) status.value = "loadmore"
    else status.value = "nomore"
    teachPointsList.value = [...teachPointsList.value, ...res.data]
    listQuery.total = res.total
    console.log(teachPointsList.value)
  } else status.value = "nomore"
}

init()
</script>

<style lang="scss" scoped>
.teach-container {
  padding: 0 30rpx 30rpx;
  padding-top: 20rpx;
}
</style>
