<template>
  <div class="min-h-screen bg-[#f8f8f8]">
    <van-tabs v-model:active="current" color="#FD9A00" sticky>
      <van-tab
        v-for="item in orderStatusEnum"
        :key="item.id"
        :title="item.label"
        :name="item.value"
      >
        <ProfileTravelOrders :orders="orderList" @onCancel="handleCancel" />
      </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;
  }
}

const orderStatusEnum = [
  {
    value: "",
    label: "全部",
  },
  {
    value: "0",
    label: "未确认",
  },
  {
    value: "1",
    label: "未完成",
  },
  {
    value: "2",
    label: "已完成",
  },
];

function handleCancel(item) {
  console.log(item);
  showConfirmDialog({
    title: "温馨提示",
    message: "取消取消该订单吗？",
  })
    .then(async () => {
      try {
        await request("/website/tourism/myOrder/delete", {
          method: "POST",
          body: {
            id: item.id,
          },
        });
        getOrderList();
      } catch (error) {}
    })
    .catch(() => {});
}
</script>

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