<template>
  <view class="goods-container">
    <TopNavBar title="商品详情" :fixed="true" />

    <view class="content-wrapper">
      <ImageSwiper :border-radius="0" :images="goodsData.commodityPhotoList" />

      <view class="goods-content">
        <!-- 商品信息组件 -->
        <GoodInfo :goodsData="goodsData" />

        <ModuleTitle title="购买须知" />

        <zero-markdown-view :markdown="goodsData.commodityTip" :fontSize="14" />

        <!-- 立即抢购 -->
        <view class="footer">
          <button class="buy-button" @click="showConfirmPopup">立即抢购</button>
        </view>
      </view>
    </view>

    <!-- 商品确认弹窗 -->
    <GoodConfirm
      ref="goodConfirmRef"
      :goodsData="goodsData"
      @confirm="handleConfirmOrder"
      @close="handleCloseConfirm"
    />
  </view>
</template>

<script setup>
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { goodsDetail } from "@/request/api/GoodsApi";
import TopNavBar from "@/components/TopNavBar/index.vue";
import ImageSwiper from "@/components/ImageSwiper/index.vue";
import GoodInfo from "./components/GoodInfo/index.vue";
import ModuleTitle from "@/components/ModuleTitle/index.vue";
import GoodConfirm from "./components/GoodConfirm/index.vue";

const goodsData = ref({});
const goodConfirmRef = ref(null);

// 获取商品详情数据
const goodsInfo = async (params) => {
  const res = await goodsDetail(params);

  goodsData.value = res.data;
};

// 显示确认弹窗
const showConfirmPopup = () => {
  goodConfirmRef.value?.showPopup();
};

// 处理确认订单
const handleConfirmOrder = (orderData) => {
  console.log("确认订单:", orderData);
  uni.showToast({
    title: "订单确认成功",
    icon: "success",
  });
  // 这里可以跳转到订单页面或支付页面
  // uni.navigateTo({
  //   url: '/pages/order/detail?orderId=' + orderData.orderId
  // });
};

// 处理关闭弹窗
const handleCloseConfirm = () => {
  console.log("关闭确认弹窗");
};

onLoad(({ commodityId = "1950766939442774018" }) => {
  goodsInfo({ commodityId });
});
</script>

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