<template>
  <z-paging
    v-model="listdata"
    ref="paging"
    @query="loadMoreData"
    :default-page-no="1"
    :default-page-size="5"
    :auto-show-back-to-top="true"
    bg-color="#f3f3f3"
  >
    <view class="card-wrapper" v-for="item in listdata" :key="item.id">
      <MaintainOrderCard
        :key="item.id"
        :item="item"
        @click="handleOrderClick"
      />
    </view>
  </z-paging>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import MaintainOrderCard from "./components/maintainOrderCard.vue";
import navigator from "@/utils/navigator.js";
import * as api from "@/utils/api.js";

const paging = ref();
const listdata = ref([]);

const loadMoreData = (pageNo, pageSize) => {
  const params = {
    pageParam: {
      pageNum: pageNo,
      pageSize: pageSize,
    },
  };

  api
    .callEbikeOrder(
      `pageMaintenanceOrders?pageNum=${pageNo}&pageSize=${pageSize}`,
      {},
      "get"
    )
    .then((res) => {
      if (res.code === 200) {
        const { records } = res.data;
        paging.value.complete(records);
      } else {
        paging.value.complete(false);
      }
    });

  //   paging.value.complete([{}, {}, {}, {}, {}, {}]); // 模拟数据加载
};

const handleOrderClick = (item) => {
  console.log("Order clicked:", item);
  navigator.to("/pages/warehouse/maintainOrder/maintainOrderDetail", {
    bikeCode: item.bikeCode,
  });
};

onMounted(() => {
  console.log("组件挂载");
  uni.$on("refresh", (params) => {
    console.log("通过事件接收参数：", params);
    // 处理参数逻辑...
  });
});

onUnmounted(() => {
  uni.$off("refresh");
});
</script>

<style lang="scss" scoped>
.card-wrapper {
  width: 100%;
}
</style>
