<template>
  <div>
    <van-empty
      v-if="!listData.length && !loading"
      image="search"
      description="暂无相关车型"
    />
    <van-list
      v-else-if="listData.length"
      class=""
      v-model:loading="loading"
      :finished="finished"
      finished-text="-- 没有更多了 --"
      @load="onLoadMore"
      :immediate-check="false"
    >
      <CarSearchCarListItem
        v-for="item in listData"
        :key="item.id"
        :item-data="item"
        @on-select="$emit('on-select', item)"
      >
      </CarSearchCarListItem>
    </van-list>
  </div>
</template>

<script setup>
defineEmits(["on-select"]);

const route = useRoute();

const requestQuery = reactive({
  pageNum: 1,
  pageSize: 10,
  model: computed(() => route.query.carModel),
  startDate: computed(() => route.query.startDate),
  belongTab: computed(() => route.query.startPlace),
  days: computed(() => route.query.days),
  type: computed(() => route.query.type || 1),
  count: true,
});
const listData = ref([]);

const loading = ref(false);

const finished = ref(false);

async function getList() {
  try {
    loading.value = true;
    showLoadingToast({
      message: "加载中...",
      duration: 100000,
    });
    const { data } = await request("/website/app/tourCarCategory/list", {
      query: requestQuery,
    });
    listData.value = listData.value.concat(data.dataList);
    loading.value = false;
    if (data.totalCount <= listData.value.length) {
      finished.value = true;
    }
  } finally {
    closeToast();
    loading.value = false;
  }
}

function reSearch() {
  requestQuery.pageNum = 1;
  finished.value = false;
  listData.value = [];
  getList();
}

function onLoadMore() {
  requestQuery.pageNum++;
  getList();
}

watch(
  [
    () => route.query.startPlace,
    () => route.query.startDate,
    () => route.query.days,
    () => route.query.type,
    () => route.query.carModel,
  ],
  () => {
    reSearch();
  },
  { immediate: true }
);
</script>

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