<template>
  <z-paging
    :bg-color="'linear-gradient(180deg, ' + $theme-color-100 + ' 0%, #F5F7FA 100%) 0 86px / 100% 100px no-repeat'"
    ref="paging" v-model="dataList" use-virtual-list :force-close-inner-list="true" cell-height-mode="dynamic"
    safe-area-inset-bottom @query="queryList">
    <template #top>
      <TopNavBar title="全部订单" />
    </template>

    <template #empty>
      <CustomEmpty statusText="您暂无订单" />
    </template>

    <OrderCard v-for="(item, index) in dataList" :key="item.id || index" :orderData="item" @click="handleOrderClick" />
  </z-paging>
</template>

<script setup>
import { ref } from "vue";
import TopNavBar from "@/components/TopNavBar/index.vue";
import CustomEmpty from "@/components/CustomEmpty/index.vue";
import OrderCard from "./components/OrderCard/index.vue";
import { userOrderList } from "@/request/api/OrderApi";

const dataList = ref([]);
const paging = ref(null);

const queryList = async (pageNum, pageSize) => {
  try {
    const res = await userOrderList({ pageNum, pageSize });
    console.log("API响应:", res);

    if (res && res.data && res.data.records) {
      const records = res.data.records;

      // 完成数据加载，第二个参数表示是否还有更多数据
      paging.value.complete(records);
    } else {
      // 没有数据
      paging.value.complete([]);
    }
  } catch (error) {
    console.error("查询列表失败:", error);
    // 加载失败
    paging.value.complete(false);
  }
};

// 处理订单点击
const handleOrderClick = ({ orderId }) => {
  // 这里可以添加订单详情跳转逻辑
  uni.navigateTo({
    url: `/pages-order/order/detail?orderId=${orderId}`,
    events: {
      refreshOrderList: (event) => {
        console.log("订单详情页面请求刷新订单列表", event);
        if (event.success) {
          queryList(1, 10);
        }
      },
    },
  });
};
</script>

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