{{include "header.html"}}
{{include "nav.html"}}

{{if index .ThemesExt "show_breadcrumb"}}
{{if .Nav}}
<nav class="border-b border-slate-200 bg-white">
  <div class="vm-container py-3">
    <div class="vm-crumb">
      <a href="/">首页</a>
      {{range .Nav}}
      <span class="vm-crumb-sep">/</span>
      <a href="{{.URL}}">{{.Name}}</a>
      {{end}}
      <span class="vm-crumb-sep">/</span>
      <span id="vv-crumb-title" class="text-slate-900">{{.Content.Title}}</span>
    </div>
  </div>
</nav>
{{end}}
{{end}}

{{if .Content}}
<article class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
  <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
    {{if .Content.Img}}
    <div>
      <div class="vm-hover-image rounded-lg">
        <img id="vv-main-img" src="{{.Content.Img}}" alt="{{.Content.Title}}" class="w-full rounded-lg">
      </div>
    </div>
    {{end}}
    <div>
      <h1 id="vv-title" class="text-4xl font-bold text-gray-900 mb-4">{{.Content.Title}}</h1>
      {{/* 评分紧贴标题下方（价格上方）：对标里 PDP 评分放这个位置平均提升加购 11% */}}
      {{if .Content.Ext}}
      {{$rating := index .Content.Ext "rating"}}
      {{$reviews := index .Content.Ext "reviews"}}
      {{if $rating}}
      <div class="mb-4 flex items-center gap-2">
        <span class="text-amber-500" aria-hidden="true">★</span>
        <span class="text-sm font-semibold text-slate-700">{{$rating}}</span>
        {{if $reviews}}<span class="text-sm text-slate-500">{{$reviews}} 条评价</span>{{end}}
      </div>
      {{end}}
      {{end}}
      <div id="vv-price" class="text-3xl font-bold text-primary mb-4">¥{{printf "%.2f" .Content.Price}}</div>
      {{if .Content.Ext}}
      {{$spec := index .Content.Ext "spec"}}
      {{if $spec}}
      <div class="mb-4">
        <h3 class="text-lg font-semibold mb-2">规格参数</h3>
        <p class="text-gray-600">{{$spec}}</p>
      </div>
      {{end}}

      {{$model := index .Content.Ext "model"}}
      {{$version := index .Content.Ext "version"}}
      {{$delivery := index .Content.Ext "delivery"}}
      {{$warranty := index .Content.Ext "warranty"}}
      {{$support := index .Content.Ext "support"}}
      {{if or $model $version $delivery $warranty $support}}
      <div class="mb-6">
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 text-sm">
          {{if $model}}
          <div class="flex justify-between bg-gray-50 rounded-lg px-4 py-2">
            <span class="text-gray-500">型号</span>
            <span class="text-gray-900 font-medium" data-attr-cell="model">{{$model}}</span>
          </div>
          {{end}}
          {{if $version}}
          <div class="flex justify-between bg-gray-50 rounded-lg px-4 py-2">
            <span class="text-gray-500">版本</span>
            <span class="text-gray-900 font-medium" data-attr-cell="version">{{$version}}</span>
          </div>
          {{end}}
          {{if $delivery}}
          <div class="flex justify-between bg-gray-50 rounded-lg px-4 py-2">
            <span class="text-gray-500">交付周期</span>
            <span class="text-gray-900 font-medium" data-attr-cell="delivery">{{$delivery}}</span>
          </div>
          {{end}}
          {{if $warranty}}
          <div class="flex justify-between bg-gray-50 rounded-lg px-4 py-2">
            <span class="text-gray-500">质保</span>
            <span class="text-gray-900 font-medium" data-attr-cell="warranty">{{$warranty}}</span>
          </div>
          {{end}}
          {{if $support}}
          <div class="flex justify-between bg-gray-50 rounded-lg px-4 py-2">
            <span class="text-gray-500">技术支持</span>
            <span class="text-gray-900 font-medium" data-attr-cell="support">{{$support}}</span>
          </div>
          {{end}}
        </div>
      </div>
      {{end}}
      {{end}}
      <p class="text-gray-600 leading-relaxed mb-6">{{.Content.Description}}</p>

      {{/*
        SPU 复合选择器（京东式，2026-10-08）。

        spu 字段只做 **id 关联**（索引查询起点）；规格维度 = 栏目字段模型里
        indexed 的 ext 属性字段，可选值 = 组内商品在这些字段上的取值**并集**。
        点击属性组合 → 前端匹配出对应商品 id → **就地**切换标题/相册/价格/库存/
        加购 id，页面不跳转。全量变体数据通过 JSON 数据岛一次性下发。
        服务端先渲染初始按钮态（当前商品的属性值高亮），JS 接管后续交互。
      */}}
      {{with .Content.SpuPicker}}
      <div id="vv-spu-picker" class="mb-6">
        {{range .Dimensions}}
        <div class="mb-3">
          <div class="text-sm font-semibold text-gray-900 mb-1">{{if .Label}}{{.Label}}{{else}}{{.Key}}{{end}}</div>
          <div class="flex flex-wrap gap-2" data-dim="{{.Key}}">
            {{range .Values}}
            <button type="button" data-value="{{.}}"
                    class="vv-spu-opt px-3 py-1.5 text-sm rounded-lg border border-gray-300 text-gray-700 bg-white hover:border-primary transition-colors">{{.}}</button>
            {{end}}
          </div>
        </div>
        {{end}}
      </div>
      {{/*
        🚨 数据岛必须直接 {{.}}（结构体）：html/template 在 <script> 上下文
        会把结构体序列化成 JSON 对象字面量；若包一层 Json 函数（返回字符串），
        字符串会被再包一层引号并转义，JSON.parse 出来是 string 不是对象。
      */}}
      <script id="vv-spu-data" type="application/json">{{.}}</script>
      {{end}}

      {{/*
        购买区。

        ⚠️ 售罄判定必须用 Content.IsSoldOut —— 它内部看的是 StockLimit 标记位，
        不能写成「Stock == 0 即不限量」：限量商品卖到 0 之后那样判会显示成
        「不限量」，用户点进去却买不了。

        🚨 2026-10-06 加了商城开关判断，三态不能混：
          · 商城关闭（.ShopEnabled=false）→ 整块购买区不渲染，只留「立即咨询」；
            商城三页（/cart /checkout /orders）此时本身是 404，渲染出加购按钮
            等于「按钮在、点下去 404」，比不显示更糟。
          · 商城开着但售罄 → 仍显示「已售罄」（这是商品状态，与商城开关无关）。
          · 商城开着且有货 → 正常显示数量选择 + 加入购物车 + 查看购物车。
        顺序上先判商城关闭、后判售罄：两者同时成立时，「商城没开」对用户更有意义。
      */}}
      {{if not .ShopEnabled}}
      {{/* 商城关闭：不给「加购」入口，改为引导咨询 —— 页面仍可作为商品介绍展示。 */}}
      <div class="mb-6 rounded-lg bg-gray-50 px-4 py-3 flex items-center gap-3 flex-wrap">
        <span class="text-sm text-gray-600">在线购买暂未开放</span>
        <a href="/contact" class="text-sm text-primary hover:underline">留下联系方式咨询 →</a>
      </div>
      {{else}}
      <div class="mb-6" data-content-id="{{.Content.Id}}">
        {{if .Content.IsSoldOut}}
        <div class="flex items-center gap-4">
          <button disabled
                  class="vm-btn vm-btn-light cursor-not-allowed opacity-60">
            已售罄
          </button>
          <span class="text-sm text-gray-500">商品暂时缺货，可先收藏或留下联系方式咨询</span>
        </div>
        {{else}}
        <div class="flex items-center gap-4 flex-wrap">
          <div class="flex items-center overflow-hidden rounded-lg border border-slate-300">
            <button id="qty-minus" type="button"
                    class="px-3 py-3 text-gray-600 hover:bg-gray-50 disabled:opacity-40"
                    {{if le .Content.Stock 1}}disabled{{end}}>−</button>
            {{/*
              限量商品的 max 用 Stock，不限量不给 max（HTML 上限变成无限制）。
              条件写「StockLimit != 2」而不是「== 1」：模型默认值是 1，
              而老数据行（迁移前建的）该列可能为 0，按 ==1 判断会让它们
              意外走进限量分支。
            */}}
            <input id="qty-input" type="number" value="1" min="1"
                   {{if ne .Content.StockLimit 2}}max="{{.Content.Stock}}"{{end}}
                   class="w-14 text-center border-0 focus:outline-none text-sm py-3">
            <button id="qty-plus" type="button"
                    class="px-3 py-3 text-gray-600 hover:bg-gray-50 disabled:opacity-40"
                    {{if ne .Content.StockLimit 2}}disabled{{end}}>+</button>
          </div>
          <button id="add-to-cart" type="button"
                  class="vm-btn vm-btn-primary">
            加入购物车
          </button>
          {{/*
            「查看购物车（N）」。
            🚨 N 用 span 包起来并给 id：它是服务端渲染的快照，加购后必须由
            js.html 的 VMCartBadge 同步 —— 同一个页面上头栏角标变了、
            这个数字没变，用户会以为加购没生效。
          */}}
          <a href="/cart"
             class="vm-btn vm-btn-outline">
            查看购物车<span id="cart-count-inline"{{if not (and .Cart (gt .Cart.TotalQty 0))}} hidden{{end}}>（{{if .Cart}}{{.Cart.TotalQty}}{{end}}）</span>
          </a>
        </div>
      {{/* 购买区信任集群：对标里 CTA 附近 3 条图标化承诺横排，比整段文字更能促决策 */}}
      <ul class="mb-4 flex flex-wrap items-center gap-x-4 gap-y-2 text-xs text-gray-500">
        <li class="flex items-center gap-1.5"><svg class="h-3.5 w-3.5 shrink-0 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m5 13 4 4L19 7"/></svg>7天无理由退换</li>
        <li class="flex items-center gap-1.5"><svg class="h-3.5 w-3.5 shrink-0 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m5 13 4 4L19 7"/></svg>满99包邮</li>
        <li class="flex items-center gap-1.5"><svg class="h-3.5 w-3.5 shrink-0 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m5 13 4 4L19 7"/></svg>一年质保</li>
      </ul>
        <p id="vv-stock-line" class="text-xs text-gray-500 mt-2">
          {{if ne .Content.StockLimit 2}}库存 {{.Content.Stock}} 件{{else}}不限量{{end}}
          {{if gt .Content.Sales 0}} · 已售 {{.Content.Sales}} 件{{end}}
        </p>
        {{end}}
        {{/* 加购反馈区：只在「有货可加购」时存在（ID 被上面那段 JS 监听）。 */}}
        <p id="add-feedback" class="text-sm mt-2"></p>
      </div>
      {{end}}

      <a href="/contact" class="vm-btn vm-btn-light">立即咨询</a>
    </div>
  </div>

  <div class="vm-rich mt-10 border-t border-slate-100 pt-8">
    <h2 class="vm-head-title mb-4">产品详情</h2>
    {{.Content.Content|Str2Html}}
  </div>

  {{$albums := .Content.Albums}}
  {{if and $albums (ne (index $albums 0) "[]")}}
  <div id="vv-albums-box" class="mt-10">
    <h2 class="text-2xl font-bold mb-6">产品相册</h2>
    <div id="vv-albums-grid" class="grid grid-cols-2 md:grid-cols-3 gap-4">
      {{range $albums}}
      {{if and . (ne . "[]")}}
      <div class="vm-hover-image rounded-xl bg-white shadow-sm border border-gray-100 overflow-hidden">
        <img src="{{.}}" alt="{{$.Content.Title}} 相册图" class="w-full h-40 object-cover">
      </div>
      {{end}}
      {{end}}
    </div>
  </div>
  {{end}}

  {{if .Content.Tags}}
  <div class="mt-8 pt-8 border-t">
    <h3 class="text-lg font-semibold mb-4">标签</h3>
    <div class="flex flex-wrap gap-2">
      {{range .Content.Tags}}
      <a href="{{.URL}}" class="px-3 py-1 bg-gray-100 text-gray-700 rounded-full text-sm hover:bg-gray-200 transition-colors">{{.Name}}</a>
      {{end}}
    </div>
  </div>
  {{end}}

  <div class="mt-8 pt-8 border-t">
    <h3 class="text-2xl font-bold mb-6">相关产品</h3>
    {{$related := Related .Content.Id 4}}
    {{if $related}}
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
      {{range $related}}
      <div class="vm-card vm-card-hover">
        {{if .Img}}
        <div class="vm-hover-image">
          <img src="{{.Img}}" alt="{{.Title}}" class="w-full h-32 object-cover">
        </div>
        {{end}}
        <div class="p-4">
          <h4 class="text-lg font-semibold mb-2">
            <a href="{{.URL}}" class="hover:text-primary transition-colors">{{.Title}}</a>
          </h4>
        </div>
      </div>
      {{end}}
    </div>
    {{end}}
  </div>
</article>
{{end}}

{{if .Content.SpuPicker}}
<style>
  .vv-spu-selected { border-color: #0f172a; box-shadow: 0 0 0 1px #0f172a inset; font-weight: 500; }
  .vv-spu-disabled { opacity: .4; cursor: not-allowed; text-decoration: line-through; }
</style>
<script>
  (function () {
    var dataEl = document.getElementById('vv-spu-data');
    var pickerEl = document.getElementById('vv-spu-picker');
    if (!dataEl || !pickerEl) return;
    var data;
    try { data = JSON.parse(dataEl.textContent); } catch (e) { return; }
    var dims = data.dimensions || [];
    var variants = data.variants || [];
    if (!dims.length || !variants.length) return;

    // 初始选中态 = 当前商品的属性值。
    var selected = {};
    variants.forEach(function (v) { if (v.current) selected = Object.assign({}, v.attrs); });

    // 命中「已选维度的全部取值都一致」的变体；部分选择时按已选维度过滤。
    function match(sel) {
      var keys = Object.keys(sel).filter(function (k) { return sel[k]; });
      return variants.filter(function (v) {
        return keys.every(function (k) { return v.attrs[k] === sel[k]; });
      });
    }

    // 就地切换：标题 / 主图 / 相册 / 价格 / 库存文案 / 加购 id，页面不跳转。
    function apply(v) {
      var t = document.getElementById('vv-title');
      if (t && v.title) t.textContent = v.title;
      var crumb = document.getElementById('vv-crumb-title');
      if (crumb && v.title) crumb.textContent = v.title;
      var img = document.getElementById('vv-main-img');
      if (img && v.img) { img.src = v.img; img.alt = v.title; }
      var price = document.getElementById('vv-price');
      if (price) price.textContent = '¥' + Number(v.price).toFixed(2);
      var box = document.getElementById('vv-albums-box');
      var grid = document.getElementById('vv-albums-grid');
      if (box && grid) {
        var albums = (v.albums || []).filter(function (u) { return u && u !== '[]'; });
        if (!albums.length) {
          box.hidden = true;
        } else {
          box.hidden = false;
          grid.innerHTML = albums.map(function (u) {
            return '<div class="vm-hover-image rounded-xl bg-white shadow-sm border border-gray-100 overflow-hidden">'
              + '<img src="' + u + '" alt="' + v.title + ' 相册图" class="w-full h-40 object-cover"></div>';
          }).join('');
        }
      }
      // 属性表同步：静态 ext 表格在切换后仍写着原商品的值，会与选择器矛盾
      // （选择器已选 50g、表格还写 30ml）。按字段 key 覆写；表格没渲染该行则跳过。
      Object.keys(v.attrs || {}).forEach(function (k) {
        var cell = document.querySelector('[data-attr-cell="' + k + '"]');
        if (cell) cell.textContent = v.attrs[k];
      });
      var line = document.getElementById('vv-stock-line');
      if (line) {
        var txt = v.stock_limit === 2 ? '不限量' : ('库存 ' + v.stock + ' 件');
        if (v.sales > 0) txt += ' · 已售 ' + v.sales + ' 件';
        line.textContent = txt;
      }
      var wrap = document.querySelector('[data-content-id]');
      if (wrap) wrap.setAttribute('data-content-id', v.id);
      var qty = document.getElementById('qty-input');
      if (qty) {
        if (v.stock_limit === 2) { qty.removeAttribute('max'); }
        else {
          qty.setAttribute('max', v.stock);
          if (Number(qty.value) > v.stock) qty.value = v.stock;
        }
      }
      var add = document.getElementById('add-to-cart');
      if (add) {
        var sold = v.stock_limit !== 2 && v.stock <= 0;
        add.disabled = sold;
        add.classList.toggle('cursor-not-allowed', sold);
        add.classList.toggle('opacity-60', sold);
        add.textContent = sold ? '已售罄' : '加入购物车';
      }
    }

    // 🚨 置灰是**值级**的：某维度值只要「存在该取值的变体」就可点（售罄也可点，
    //    切过去后购买区显示已售罄）。组合级置灰会把可选路径全部锁死
    //    （例如当前是 红/L 时，绿/XL 会因「绿+L 不存在」被误灰，用户无路可走）。
    //    组合冲突在点击后处理：未命中时回退到只保留本次点击的维度。
    function refreshButtons() {
      dims.forEach(function (d) {
        pickerEl.querySelectorAll('[data-dim="' + d.key + '"] .vv-spu-opt').forEach(function (btn) {
          var val = btn.getAttribute('data-value');
          var alive = variants.some(function (v) { return v.attrs[d.key] === val; });
          var isSel = selected[d.key] === val;
          btn.classList.toggle('vv-spu-selected', isSel);
          if (!alive && !isSel) {
            btn.classList.add('vv-spu-disabled');
            btn.setAttribute('disabled', 'disabled');
          } else {
            btn.classList.remove('vv-spu-disabled');
            btn.removeAttribute('disabled');
          }
        });
      });
    }

    pickerEl.addEventListener('click', function (ev) {
      var btn = ev.target.closest('.vv-spu-opt');
      if (!btn || btn.hasAttribute('disabled')) return;
      var dimEl = btn.closest('[data-dim]');
      if (!dimEl) return;
      var dimKey = dimEl.getAttribute('data-dim');
      selected[dimKey] = btn.getAttribute('data-value');

      // 京东式回退：全组合未命中 → 清掉其他维度的旧选中（只保留本次点击），
      // 让用户从新维度重新收敛，而不是被旧组合锁死。
      if (!match(selected).length) {
        var keep = {};
        keep[dimKey] = selected[dimKey];
        selected = keep;
      }
      refreshButtons();

      // 唯一命中才切换；多个候选（部分选择）保持当前，等继续选。
      var hits = match(selected);
      if (hits.length === 1) apply(hits[0]);
    });

    refreshButtons();
  })();
</script>
{{end}}
{{include "footer.html"}}
{{include "js.html"}}

<script>
  // 商品详情页的加购交互。
  //
  // ⚠️ 只提交「商品 ID + 数量」，**不提交价格**：价格由服务端按
  // content.price 现算并在结算时快照。传价格等于把定价权交给浏览器。
  (function () {
    var wrap = document.querySelector('[data-content-id]');
    if (!wrap) return;

    var input = document.getElementById('qty-input');
    var minus = document.getElementById('qty-minus');
    var plus = document.getElementById('qty-plus');
    var btn = document.getElementById('add-to-cart');
    var feedback = document.getElementById('add-feedback');
    if (!input || !btn) return;

    var max = parseInt(input.getAttribute('max') || '0', 10); // 0 = 不限量

    function say(msg, ok) {
      if (!feedback) return;
      feedback.textContent = msg;
      feedback.className = 'text-sm mt-2 ' + (ok ? 'text-green-600' : 'text-red-500');
    }

    function bump(delta) {
      var v = parseInt(input.value || '1', 10);
      if (!isFinite(v) || v < 1) v = 1;
      v += delta;
      if (max > 0 && v > max) v = max; // 限量：夹到库存
      if (v < 1) v = 1;
      input.value = v;
    }

    if (minus) minus.addEventListener('click', function () { bump(-1); });
    if (plus) plus.addEventListener('click', function () { bump(1); });

    btn.addEventListener('click', function () {
      var qty = parseInt(input.value || '1', 10);
      if (!isFinite(qty) || qty < 1) qty = 1;
      if (max > 0 && qty > max) { say('超出库存（最多 ' + max + ' 件）', false); return; }

      btn.disabled = true;
      fetch('/api/public/shop/cart/add', {
        method: 'POST',
        credentials: 'same-origin',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ content_id: parseInt(wrap.getAttribute('data-content-id'), 10), qty: qty })
      })
        .then(function (r) { return r.json(); })
.then(function (j) {
            // ⚠️ 判 code 不判 HTTP 状态：业务失败（售罄、下架）也返回 200。
            if (j && j.code === 200) {
              var n = (j.data && j.data.total_qty) || 0;
              say('已加入购物车，当前共 ' + n + ' 件', true);
              // 🚨 必须同步头栏角标，否则用户要刷新才看得到数量变化。
              // VMCartBadge 是 js.html 挂在 window 上的全局函数 —— 详情页的
              // 加购脚本和列表页那份是两个独立的 IIFE，改造前彼此看不见。
              if (window.VMCartBadge) window.VMCartBadge(n);
            } else {
              say((j && (j.message || j.msg)) || '加入购物车失败', false);
            }
          })
        .catch(function () { say('网络错误，请稍后重试', false); })
        .finally(function () { btn.disabled = false; });
    });
  })();
</script>

{{/* vv-pdp-deepened */}}