<template>
  <view class="product-detail" v-if="product">
    <!-- 自定义导航栏 -->
    <view class="custom-navbar" :style="{ paddingTop: statusBarHeight + 'px' }">
      <view class="custom-navbar__content" :style="{ height: navBarHeight + 'px' }">
        <image class="custom-navbar__back" src="/static/ic_back.png" mode="aspectFit" @click="goBack" />
        <text class="custom-navbar__title">商品详情</text>
        <view class="custom-navbar__placeholder" />
      </view>
    </view>

    <!-- 导航栏占位 -->
    <view :style="{ height: (statusBarHeight + navBarHeight) + 'px' }" />

    <!-- Banner 轮播 -->
    <view class="banner-wrapper">
      <BannerSwiper :images="product.bannerImages || []" :video="product.bannerVideo" />
    </view>

    <!-- 基础信息 -->
    <view class="base-info">
      <view class="base-info__top">
        <text class="base-info__name">{{ product.name }}</text>
        <view class="base-info__price">
          <text class="base-info__price-symbol">¥</text>
          <text class="base-info__price-num">{{ product.basePrice }}</text>
          <text class="base-info__price-unit">元</text>
        </view>
      </view>
      <view class="base-info__attrs">
        <view class="attr-row">
          <text class="attr-label">款 号</text>
          <text class="attr-value">{{ product.styleNo }}</text>
          <text class="attr-label">库存</text>
          <text class="attr-value">{{ product.stock }}</text>
        </view>
        <view class="attr-row">
          <text class="attr-label">损 耗</text>
          <text class="attr-value">{{ product.loss }}%</text>
          <text class="attr-label">工费</text>
          <text class="attr-value">¥{{ product.laborCost }}</text>
        </view>
      </view>
    </view>

    <!-- 发货公告 -->
    <ShippingNotice />

    <!-- 商品详情（大图展示） -->
    <view class="detail-section">
      <view class="detail-section__title">商品详情</view>
      <view class="detail-section__images">
        <image
          v-for="(img, idx) in (product.detailImages || [])"
          :key="idx"
          class="detail-section__img"
          :src="fullUrl(img)"
          mode="widthFix"
        />
      </view>
    </view>

    <!-- 底部操作栏 -->
    <view class="bottom-bar">
      <view class="bottom-bar__icons">
        <view class="bottom-bar__icon-item" @click="showQrCode = true">
          <image class="bottom-bar__icon-img" src="/static/ic_customer.png" mode="aspectFit" />
          <text class="bottom-bar__icon-text">客服</text>
        </view>
        <view class="bottom-bar__icon-item" @click="goCart">
          <view class="cart-icon-wrap">
            <image class="bottom-bar__icon-img" src="/static/tab/car.png" mode="aspectFit" />
            <text v-if="cartCount > 0" class="cart-badge">{{ cartCount > 99 ? '99+' : cartCount }}</text>
          </view>
          <text class="bottom-bar__icon-text">购物车</text>
        </view>
      </view>
      <view class="bottom-bar__main-btn" @click="showSpecPanel = true">
        <text>空托—查看详细参数</text>
      </view>
    </view>

    <!-- 详细参数面板 -->
    <SpecPanel v-if="showSpecPanel" :product-id="product.id" :product="product" @close="showSpecPanel = false" />

    <!-- 客服二维码弹窗 -->
    <CustomerServiceBtn v-if="showQrCode" mode="qrcode" @close="showQrCode = false" />
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import type { Product } from '../../types'
import { getProductDetail } from '../../api/product'
import { BASE_URL } from '../../utils/request'
import { useCartStore } from '../../store/cart'
import BannerSwiper from '../../components/BannerSwiper.vue'
import ShippingNotice from '../../components/ShippingNotice.vue'
import SpecPanel from '../../components/SpecPanel.vue'
import CustomerServiceBtn from '../../components/CustomerServiceBtn.vue'

const cartStore = useCartStore()
const cartCount = computed(() => cartStore.items.length)

const product = ref<Product | null>(null)
const showSpecPanel = ref(false)
const showQrCode = ref(false)

const statusBarHeight = ref(20)
const navBarHeight = ref(44)
try {
  const sysInfo = uni.getSystemInfoSync()
  statusBarHeight.value = sysInfo.statusBarHeight || 20
  // #ifdef MP-WEIXIN
  const menuBtn = uni.getMenuButtonBoundingClientRect()
  navBarHeight.value = (menuBtn.top - (sysInfo.statusBarHeight || 20)) * 2 + menuBtn.height
  // #endif
} catch { /* fallback */ }

function goBack() {
  uni.navigateBack({ delta: 1 })
}

function fullUrl(path: string): string {
  if (!path) return ''
  if (path.startsWith('http')) return path
  return BASE_URL + path
}

function goCart() {
  uni.switchTab({ url: '/pages/cart/index' })
}

onMounted(() => {
  const pages = getCurrentPages()
  const currentPage = pages[pages.length - 1] as { options?: { id?: string } }
  const id = Number(currentPage.options?.id)
  if (id) loadProduct(id)
  cartStore.fetchCart()
})

async function loadProduct(id: number) {
  try {
    product.value = await getProductDetail(id)
  } catch {
    uni.showToast({ title: '加载商品失败', icon: 'none' })
  }
}
</script>

<style scoped>
.product-detail {
  padding-bottom: 140rpx;
  background: #f5f5f5;
}

/* 自定义导航栏 */
.custom-navbar {
  background: linear-gradient(to right, #FFCFDE, #FFA6C4);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}
.custom-navbar__content {
  display: flex;
  align-items: center;
  padding: 0 24rpx;
}
.custom-navbar__back {
  width: 44rpx;
  height: 44rpx;
}
.custom-navbar__title {
  flex: 1;
  text-align: center;
  font-size: 34rpx;
  font-weight: bold;
  color: #333;
}
.custom-navbar__placeholder {
  width: 44rpx;
}

/* Banner 容器 */
.banner-wrapper {
  margin: 20rpx 24rpx 0;
  border-radius: 20rpx;
  overflow: hidden;
}

/* 基础信息卡片 */
.base-info {
  background: #fff;
  margin: 20rpx 24rpx 0;
  border-radius: 20rpx;
  padding: 30rpx;
}
.base-info__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.base-info__name {
  font-size: 32rpx;
  color: #333;
  font-weight: 600;
  flex: 1;
  margin-right: 20rpx;
}
.base-info__price {
  display: flex;
  align-items: baseline;
    color: #FF6D9B;
  flex-shrink: 0;
}
.base-info__price-symbol {
  font-size: 30rpx;
  font-weight: bold;
}
.base-info__price-num {
  font-size: 48rpx;
  font-weight: bold;
}
.base-info__price-unit {
  font-size: 24rpx;
  margin-left: 4rpx;
}

/* 属性行 - 两列布局 */
.base-info__attrs {
  margin-top: 20rpx;
  border-top: 1rpx solid #f0f0f0;
  padding-top: 20rpx;
}
.attr-row {
  display: flex;
  align-items: center;
  padding: 8rpx 0;
}
.attr-label {
  font-size: 26rpx;
  color: #999;
  width: 80rpx;
  flex-shrink: 0;
  letter-spacing: 4rpx;
}
.attr-value {
  font-size: 28rpx;
  color: #333;
  min-width: 180rpx;
  margin-right: 40rpx;
}

/* 商品详情大图 */
.detail-section {
  background: #fff;
  margin: 20rpx 24rpx 0;
  border-radius: 20rpx;
  padding: 30rpx;
}
.detail-section__title {
  text-align: center;
  font-size: 30rpx;
  color: #333;
  font-weight: 600;
  padding-bottom: 24rpx;
  border-bottom: 1rpx solid #eee;
  margin-bottom: 24rpx;
}
.detail-section__images {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}
.detail-section__img {
  width: 100%;
  border-radius: 12rpx;
}

/* 底部操作栏 */
.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  padding: 16rpx 24rpx;
  padding-bottom: calc(16rpx + env(safe-area-inset-bottom));
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  gap: 20rpx;
}
.bottom-bar__icons {
  display: flex;
  gap: 32rpx;
  flex-shrink: 0;
}
.bottom-bar__icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4rpx;
}
.bottom-bar__icon-img {
  width: 44rpx;
  height: 44rpx;
}
.cart-icon-wrap {
  position: relative;
}
.cart-badge {
  position: absolute;
  top: -10rpx;
  right: -16rpx;
  background: #e91e63;
  color: #fff;
  font-size: 20rpx;
  min-width: 32rpx;
  height: 32rpx;
  line-height: 32rpx;
  text-align: center;
  border-radius: 16rpx;
  padding: 0 8rpx;
  box-sizing: border-box;
}
.bottom-bar__icon-text {
  font-size: 20rpx;
  color: #666;
}
.bottom-bar__main-btn {
  flex: 1;
  background: linear-gradient(to right, #f5a0b8, #e4393c);
  color: #fff;
  text-align: center;
  padding: 24rpx 0;
  border-radius: 44rpx;
  font-size: 30rpx;
  font-weight: 500;
}
</style>
