<script setup>
import TopNav from "@/components/topNav.vue";
import Search from "@/components/search.vue";
import { onMounted, reactive, ref } from "vue";
import ListItemWrapper from "@/pages/collectPage/copmonents/listItemWrapper.vue";
import router from "@/router";
import { getSelectPage } from "@/api/collectPage";

const finished = ref(false);
const loading = ref(false);
const loadingRefresh = ref(false);
const searchValue = ref("");
const pageData = reactive({
  pageSize: 10,
  pageCurrent: 1,
  total: 0,
});

const data = reactive({
  list: [],
});

const onSearch = (value) => {
  loading.value = true;
  pageData.pageCurrent = 1;
  data.list = [];
  getData();
};

const onRefresh = () => {
  loading.value = false;
  loadingRefresh.value = true;
  finished.value = false;
  pageData.pageCurrent = 1;
  data.list = [];
  getData();
};

const getData = async () => {
  loading.value = true;
  try {
    const { total, ...ret } = pageData;
    const res = await getSelectPage({ ...ret, bddMc: searchValue.value });
    if (res?.records.length > 0) {
      data.list = data.list.concat(res?.records) || [];
      pageData.total = res?.total;
      loading.value = false;
    } else {
      finished.value = true;
    }
    loadingRefresh.value = false;
  } catch (error) {
    loading.value = false;
    loadingRefresh.value = false;
  }
};
const onLoad = () => {
  if (data.list.length >= pageData?.total) {
    finished.value = true;
    return;
  }

  pageData.pageCurrent++;
  getData();
};

onMounted(() => {
  data.list = [];
  getData();
});

const handleTo = () => {
  router.push("/collectAndAdd");
};
</script>

<template>
  <div>
    <TopNav navTitle="必到点采集列表" :showLeft="true" />

    <van-sticky>
      <div class="header">
        <search
          placeholder="请输入部门、所属方格或必到点名称进行查询"
          v-model="searchValue"
          @update:modelValue="onSearch"
        />
      </div>
    </van-sticky>

    <div class="content">
      <van-pull-refresh v-model="loadingRefresh" @refresh="onRefresh">
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text=""
          @load="onLoad"
          offset="1"
          :immediate-check="false"
        >
          <list-item-wrapper :list="data.list" />

          <van-empty
            description="暂无采集数据"
            image="default"
            v-if="data.list.length <= 0 && loadingRefresh === false"
          />
        </van-list>
      </van-pull-refresh>
    </div>

    <div class="footer" @click="handleTo">
      <van-button round native-type="submit" block type="primary">
        新增必到点采集
      </van-button>
    </div>
  </div>
</template>

<style scoped lang="scss">
@import "@/assets/styles/mixin.scss";

.header {
  margin-top: 13vw;
  @include bg_color($background-color-theme);
}

.content {
  margin-bottom: 16vw;
}

.footer {
  position: fixed;
  padding: 2vw;
  bottom: 0;
  left: 0;
  width: calc(100% - 4vw);
}
</style>
