{jv:include file='header.html' /}
<link rel="stylesheet" href="/Template/default/mobile/skin/css/mall.css?v=8">

<nav class="crumb" aria-label="{jv:lang name='main_nav' /}">
  <div class="container">
    <a href="{jv:url}">{jv:lang name='home' /}</a><span class="sep">/</span>
    <a href="{jv:mall_home_url}">{jv:lang name='mall_home_title' /}</a><span class="sep">/</span>
    <a href="{jv:mall_cat_url}">{jv:mall_cat_name}</a><span class="sep">/</span>
    <span class="cur">{jv:title}</span>
  </div>
</nav>

<div class="container">
  <div class="pd-layout">

    <div class="pd-gallery">
      <div class="pd-thumbs" id="galleryThumbs">
        {jv:mallgallery}
        <img class="pd-thumb" src="{jv:mall_gallery_img}" onclick="document.getElementById('galleryMain').src=this.src" alt="{jv:title}">
        {/jv:mallgallery}
      </div>
      <img class="pd-main-img" id="galleryMain" src="{jv:mall_default_img}" alt="{jv:title}" onclick="openLightbox(this.src)">
    </div>

    <div class="pd-info">
      <h1 class="pd-name">{jv:title}</h1>
      {jv:if condition="subtitle"}
      <p class="pd-sub">{jv:subtitle}</p>
      {/jv:if}

      {jv:if condition="mall_review_count > 0"}
      <div class="pd-rate">
        <span class="stars" id="pdStars"></span>
        <span><b id="pdAvgRating">{jv:mall_avg_rating}</b> {jv:lang name='mall_avg_rating' /} · {jv:mall_review_count} {jv:lang name='mall_reviews_count' /}</span>
      </div>
      {/jv:if}

      <div class="pd-price-row">
        <span class="pd-price" id="skuPrice">{jv:lang name='mall_currency' /}{jv:mall_price}</span>
      </div>

      {jv:if condition="brand_name"}
      <div class="pd-spec">
        <div class="pd-spec-label">{jv:lang name='mall_brand' /}</div>
        <div class="spec-opts"><span class="spec-opt active">{jv:brand_name}</span></div>
      </div>
      {/jv:if}
      {jv:if condition="origin"}
      <div class="pd-spec">
        <div class="pd-spec-label">{jv:lang name='mall_origin' /}</div>
        <div class="spec-opts"><span class="spec-opt active">{jv:origin}</span></div>
      </div>
      {/jv:if}

      {jv:mall_sku_selector_html}

      <div class="pd-spec">
        <div class="pd-spec-label">{jv:lang name='mall_quantity' /}</div>
        <div class="pd-qty">
          <button type="button" onclick="changeQty(-1)" aria-label="{jv:lang name='mall_minus' /}">−</button>
          <input type="text" id="qty" value="1" min="1" aria-label="{jv:lang name='mall_quantity' /}">
          <button type="button" onclick="changeQty(1)" aria-label="{jv:lang name='mall_plus' /}">+</button>
        </div>
      </div>

      {jv:if condition="mall_agent_mode == 1"}
      <div class="pd-spec">
        <div class="pd-spec-label">{jv:lang name='mall_select_merchant' /}</div>
        <select id="merchantSelect" class="pd-merchant-select">
          {jv:mallmerchant}
          <option value="{jv:id}">{jv:mall_merchant_name} ({jv:lang name='mall_stock' /}: {jv:mall_merchant_stock})</option>
          {/jv:mallmerchant}
        </select>
      </div>
      {/jv:if}

      <form class="pd-btns" method="post" action="{jv:url}mall/cart/add" id="addCartForm">
        <input type="hidden" name="sku_id" id="skuId" value="{jv:mall_first_sku_id}">
        <input type="hidden" name="merchant_id" id="merchantId" value="{jv:mall_first_merchant_id}">
        <input type="hidden" name="quantity" value="1" id="cartQty">
        <button type="button" class="btn btn-ghost" id="addCartBtn">{jv:lang name='mall_add_to_cart' /}</button>
        <button type="button" class="btn btn-warn pd-buy" id="buyNowBtn">{jv:lang name='buy_now' /}</button>
      </form>

      <div class="pd-services">
        <span>✓ {jv:lang name='mall_service_authentic' /}</span>
        <span>✓ {jv:lang name='mall_service_fast' /}</span>
        <span>✓ {jv:lang name='mall_service_return' /}</span>
        <span>✓ {jv:lang name='mall_service_warranty' /}</span>
        <span>✓ {jv:lang name='mall_service_freeship' /}</span>
      </div>
    </div>

  </div>

  <div class="pd-desc-tabs">
    <a class="active" data-tab="detail" onclick="switchTab(this,'detail')">{jv:lang name='mall_description' /}</a>
    <a data-tab="reviews" onclick="switchTab(this,'reviews')">{jv:lang name='mall_reviews' /} ({jv:mall_review_count})</a>
  </div>

  <div class="pd-tab-pane active" id="tab-detail">
    {jv:if condition="content"}
    <div class="doc-body">{jv:content}</div>
    {jv:else /}
    <p class="pd-no-content">{jv:lang name='mall_no_content' /}</p>
    {/jv:if}
  </div>

  <div class="pd-tab-pane" id="tab-reviews">
    {jv:if condition="mall_review_count > 0"}
    <div class="pd-reviews-summary">
      <div class="pd-reviews-avg-box">
        <div class="pd-reviews-avg-num">{jv:mall_avg_rating}</div>
        <div class="pd-reviews-avg-label">{jv:lang name='mall_avg_rating' /}</div>
      </div>
      <div class="pd-reviews-count"><strong>{jv:mall_review_count}</strong> {jv:lang name='mall_reviews_count' /}</div>
    </div>
    {jv:mallreview}
    <div class="pd-review-item">
      {jv:if condition="avatar"}
      <img class="pd-review-avatar" src="{jv:avatar}" alt="">
      {jv:else /}
      <div class="pd-review-avatar-ph">{jv:author}</div>
      {/jv:if}
      <div class="pd-review-body">
        <div class="pd-review-meta">
          <span class="pd-review-author">{jv:author}</span>
          <span class="pd-review-stars" data-rating="{jv:rating}">{jv:stars_html}</span>
          <span class="pd-review-time">{jv:add_time}</span>
        </div>
        <div class="pd-review-content">{jv:review_content}</div>
      </div>
    </div>
    {/jv:mallreview}
    {jv:else /}
    <p class="pd-no-content">{jv:lang name='mall_no_reviews' /}</p>
    {/jv:if}
  </div>

  <section class="dl-related-section">
    <div class="block-head">
      <h2 class="block-title">{jv:lang name='pd_related' /}</h2>
      <a class="block-more" href="{jv:mall_home_url}">{jv:lang name='more' /}<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg></a>
    </div>
    <div class="mall-grid">
      {jv:mallproductlist num="4"}
      <a class="card card-v mall-card" href="{jv:arcurl}">
        <img class="card-img" src="{jv:litpic}" alt="{jv:title}">
        <div class="card-body">
          <h3 class="card-title">{jv:title}</h3>
          <div class="card-foot">
            <span class="dl-price">{jv:lang name='mall_currency' /}{jv:price}</span>
          </div>
        </div>
      </a>
      {/jv:mallproductlist}
    </div>
  </section>
</div>

{jv:mall_script}
<!-- 图片灯箱 -->
<div class="pd-lightbox" id="pdLightbox" onclick="closeLightbox()">
  <img id="pdLightboxImg" src="" alt="">
</div>
<script>
function openLightbox(src){
  document.getElementById("pdLightboxImg").src=src;
  document.getElementById("pdLightbox").classList.add("active");
}
function closeLightbox(){
  document.getElementById("pdLightbox").classList.remove("active");
}
document.addEventListener("keydown",function(e){if(e.key==="Escape")closeLightbox();});
function switchTab(btn,tabId){
document.querySelectorAll(".pd-desc-tabs a").forEach(function(b){b.classList.remove("active")});
btn.classList.add("active");
document.querySelectorAll(".pd-tab-pane").forEach(function(p){p.classList.remove("active")});
document.getElementById("tab-"+tabId).classList.add("active");
}
function renderStars(rating,el){
var s="";
for(var i=0;i<5;i++){s+=i<rating?"\u2605":"\u2606"}
el.textContent=s;
}
var pdAvgEl=document.getElementById("pdAvgRating");
if(pdAvgEl){
var pdStarsEl=document.getElementById("pdStars");
renderStars(Math.round(parseFloat(pdAvgEl.textContent)||0),pdStarsEl);
}
document.querySelectorAll(".pd-review-stars").forEach(function(el){
var r=parseInt(el.dataset.rating||"5");
renderStars(r,el);
});
</script>
{jv:include file='footer.html' /}