<template>
  <div class="min-h-screen bg-[#f8f8f8]">
    <van-tabs v-model:active="current" color="#FD9A00" sticky>
      <van-tab title="全部订单" name="">
        <ProfileTravelOrders :orders="orderList" />
      </van-tab>
      <van-tab title="未完成" name="0">
        <ProfileTravelOrders :orders="orderList" />
      </van-tab>
      <van-tab title="已完成" name="1">
        <ProfileTravelOrders :orders="orderList" />
      </van-tab>
    </van-tabs>
  </div>
</template>

<script setup>
const current = ref(null);
const loading = ref(false);
const orderList = ref([]);

watch(current, (val) => {
  getOrderList();
});

async function getOrderList() {
  loading.value = true;
  try {
    const { data } = await request("/website/tourism/myOrder/list", {
      query: {
        orderStatus: current.value,
        pageNum: 1,
        pageSize: 999,
      },
    });
    orderList.value = data.dataList;
  } finally {
    loading.value = false;
  }
}
</script>

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