<template>
  <view class="teach-container">
    <!-- 搜索 -->
    <view class="search">
      <view class="search-btn">属地</view>
      <u-input
        v-model="listQuery.Sd"
        placeholder=""
        border
        border-color="#F8F8F8"
        @confirm="search($event, 'Sd')"
      />
      <uni-search-bar
        placeholder="关键词"
        bgColor="#ffffff"
        clearButton="auto"
        cancelButton="none"
        @confirm="search($event)"
      />
    </view>
    <view v-if="teachPointsList.length">
      <!-- <text class="fund">为您找到{{ 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>
    <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 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: "",
  Sd: "",
});

const search = (val: any, type?: string) => {
  if (type !== "Sd") listQuery.Area = val.value;
  teachPointsList.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 }: any = 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 32rpx 64rpx;
  padding-top: 20rpx;

  .search {
    width: 100%;
    display: flex;
    align-items: center;
    height: 72rpx;
    margin: 32rpx 0 48rpx;

    .search-btn {
      width: 72rpx;
      background: #05a8ff;
      border-radius: 24rpx 0rpx 0rpx 24rpx;
      line-height: 72rpx;
      text-align: center;
      color: #ffffff;
      font-size: 24rpx;
    }

    .u-input {
      flex: 1;
      height: 100%;
      // margin-right: 1rpx;
      background-color: #ffffff;

      :deep(.u-input__input) {
        background-color: #ffffff;
      }
    }

    .uni-searchbar {
      margin: 0;
      padding: 0 !important;
      width: 446rpx;
      height: 100%;
      // box-shadow: 0rpx 8rpx 60rpx 0rpx rgba(0, 0, 0, 0.05) !important;
      border-radius: 0 24rpx 24rpx 0;
      border: 1rpx solid #f8f8f8;

      :deep(.uni-searchbar__box) {
        border-radius: 0 24rpx 24rpx 0 !important;
        padding: 0;
        background-color: #ffffff;
      }
    }
  }
}
</style>
