<template>
  <view class="order-detail-page">
    <TopNavBar
      titleAlign="center"
      :backgroundColor="backgroundColor"
      :backIconColor="backIconColor"
      :shadow="shadow"
      fixed
    >
      <template #title>
        {{ title }}
      </template>
    </TopNavBar>

    <view class="order-detail-wrapper">
      <OrderStatusInfo :orderData="orderData" />
      <OrderQrcode
        v-if="orderData.orderStatus === '2'"
        size="132"
        unit="px"
        :val="orderData.orderId"
      />
      <GoodsInfo :orderData="orderData" />
      <UserInfo :orderData="orderData" />
      <NoticeInfo :orderData="orderData" />
      <OrderInfo
        :orderData="orderData"
        @show-refund-popup="showRefundPopup"
        @pay-success="handlePaySuccess"
      />

      <!-- 退款状态显示 -->
      <RefundPopup
        v-model="refundVisible"
        :orderData="orderData"
        @confirm="handleRefundConfirm"
      />
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { onLoad, onPageScroll } from "@dcloudio/uni-app";
import { userOrderDetail, orderRefund } from "@/request/api/OrderApi";
import TopNavBar from "@/components/TopNavBar/index.vue";
import OrderQrcode from "./components/OrderQrcode/index.vue";
import OrderStatusInfo from "./components/OrderStatusInfo/index.vue";
import GoodsInfo from "./components/GoodsInfo/index.vue";
import UserInfo from "./components/UserInfo/index.vue";
import NoticeInfo from "./components/NoticeInfo/index.vue";
import OrderInfo from "./components/OrderInfo/index.vue";
import RefundPopup from "./components/RefundPopup/index.vue";

const refundVisible = ref(false);
const orderData = ref({});

onLoad(({ orderId }) => getOrderDetail(orderId));

// 获取订单详情
const getOrderDetail = async (orderId) => {
  const res = await userOrderDetail({ orderId });
  orderData.value = res.data;
  console.log(res);
};

// 监听页面滚动事件
const backgroundColor = ref("transparent");
const backIconColor = ref("#fff");
const title = ref("");
const shadow = ref(false);
onPageScroll(({ scrollTop }) => {
  // 当滚动到顶部时，显示返回按钮
  if (scrollTop <= 0) {
    backgroundColor.value = "transparent";
    backIconColor.value = "#fff";
    title.value = "";
    shadow.value = false;
  } else {
    backgroundColor.value = "#ffffff";
    backIconColor.value = "#333333";
    title.value = "订单详情";
    shadow.value = true;
  }
});

// 显示退款弹窗
const showRefundPopup = () => {
  refundVisible.value = true;
};

// 确认退款
const handleRefundConfirm = async ({ orderId }) => {
  try {
    // 调用退款API
    await orderRefund({ orderId });

    uni.showToast({
      title: "退款申请已提交",
      icon: "success",
    });

    // 刷新订单状态
    const res = await userOrderDetail({ orderId });
    orderData.value = res.data;
  } catch (error) {
    console.error("退款失败:", error);
    uni.showToast({
      title: "退款申请失败，请重试",
      icon: "none",
    });
  }
};

// 再次预定
const handlePaySuccess = ({ orderId }) => {
  getOrderDetail(orderId);
};
</script>

<style lang="scss" scoped>
@import "./styles/detail.scss";
</style>
