<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>
    </view>
  </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";

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

  goodsData.value = res.data;
};

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

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