{{/*
  全局脚本（js.html）—— 购物车角标同步 + 全局 toast + 列表页加购。
  ⚠️ 只输出脚本，不输出文档闭合：各页面自己负责 </body> 与 </html>。
  本文件必须在 footer.html 之后、</body> 之前 include。
*/}}
<script>
  // 购物车角标的全局同步（window.VMCartBadge）与全局 toast。
  //
  // 🚨 必须是全局函数：加购有多条互不相干的入口 ——
  //   ① 列表页 / 分类页的 [data-add-to-cart]（本文件里的 IIFE）
  //   ② 商品详情页的 #add-to-cart（product_detail.html 自己那份脚本）
  //   ③ 购物车页的改数量 / 删除 / 清空（cart.html 自己那份脚本）
  // 三条各自 fetch、各自写反馈。提成全局后，一处改三处受益。
  //
  // ⚠️ 数量口径与 nav.html 的 .Cart.TotalQty 完全一致（都是「已勾选行」的件数），
  // AddCart / UpdateCart / RemoveCart 返回的 data.total_qty 就是它。
  window.VMCartBadge = function (n) {
    n = parseInt(n, 10);
    if (!isFinite(n) || n < 0) return; // 接口没给数字就别动 DOM，宁可不更新也别清零

    // 头栏购物车入口。用稳定 id 而不是 a[href="/cart"] 兜底：
    // 商品详情页的「查看购物车」也是 /cart，选择器会挑错节点。
    var link = document.getElementById('cart-entry') || document.querySelector('a[href="/cart"]');
    if (!link) return;

    var badge = document.getElementById('cart-badge');

    // 🚨 n <= 0 必须**移除**角标而不是直接 return：删空购物车后角标还挂着旧数字，
    // 比不显示更误导。
    if (n <= 0) {
      if (badge) badge.remove();
      link.style.color = '';
      link.setAttribute('aria-label', '购物车');
      syncInlineCount(0);
      return;
    }

    if (badge) {
      badge.textContent = n;
    } else {
      // 首次加购：服务端渲染时 qty 为 0，角标元素压根不存在，要新建。
      // ⚠️ 新增节点用内联 style 而不是 Tailwind 类：CDN 未必会为运行时插入的
      // 节点补生成类名，用类会出现「角标在 DOM 里但看不见」。
      var color = (getComputedStyle(document.documentElement).getPropertyValue('--vm-primary') || '').trim();
      badge = document.createElement('span');
      badge.id = 'cart-badge';
      badge.style.cssText = 'position:absolute;right:-6px;top:-4px;min-width:17px;height:17px;' +
        'padding:0 4px;border-radius:999px;color:#fff;font-size:11px;line-height:17px;text-align:center;' +
        'background:' + (color || '#ff6700') + ';';
      link.appendChild(badge);
      badge.textContent = n;
    }

    // 有货时把入口染成主色（与空车的中性态区分）。
    link.style.color = 'var(--vm-primary)';
    link.setAttribute('aria-label', '购物车（' + n + ' 件）');
    syncInlineCount(n);
  };

  // 商品详情页「查看购物车（N）」里的件数，与角标是同一个数字，必须一起更新。
  function syncInlineCount(n) {
    var el = document.getElementById('cart-count-inline');
    if (!el) return;
    el.textContent = '（' + n + '）';
    // 用 hidden 属性而不是 Tailwind 的 hidden 类：UA 默认样式就生效，
    // 不依赖 CDN 有没有为这个节点生成类名。
    el.hidden = n <= 0;
  }

  // 全局 toast：保证「失败一定是红的」，各页不再自己写反馈样式。
  window.VMCartToast = function (msg, ok) {
    var old = document.getElementById('vm-shop-toast');
    if (old) old.remove();
    var box = document.createElement('div');
    box.id = 'vm-shop-toast';
    box.textContent = msg;
    box.style.cssText = 'position:fixed;left:50%;top:84px;transform:translateX(-50%);z-index:9999;' +
      'padding:10px 20px;border-radius:6px;color:#fff;font-size:14px;' +
      'box-shadow:0 8px 24px rgba(0,0,0,.18);' +
      (ok ? 'background:#059669;' : 'background:#dc2626;');
    document.body.appendChild(box);
    setTimeout(function () { box.remove(); }, 2200);
  };

  // 「回到顶部」：按钮 DOM 在 footer.html（每个页面都有），绑定放这里统一维护。
  // 🚨 footer.html 里不许出现 <script>（校验器会判 ERROR），所以逻辑必须落在本文件。
  (function () {
    var btn = document.getElementById('vv-back-to-top');
    if (!btn) return;
    function toggle() {
      btn.style.display = window.scrollY > 400 ? 'flex' : 'none';
    }
    window.addEventListener('scroll', toggle, { passive: true });
    toggle();
    btn.addEventListener('click', function () {
      window.scrollTo({ top: 0, behavior: 'smooth' });
    });
  })();
</script>

<script>
  // 列表页 / 分类页的「加入购物车」。
  //
  // 🚨 只提交商品 ID，数量固定 1，**不提交价格**：价格由服务端按 content.price
  // 现算并在结算时快照。传价格等于把定价权交给浏览器。
  // ⚠️ 判 code 不判 HTTP 状态：业务失败（售罄、下架、商城已关闭）同样返回 200，
  // 只看状态码会把「库存不足」当成成功。
  (function () {
    var btns = document.querySelectorAll('[data-add-to-cart]');
    if (!btns.length) return;

    btns.forEach(function (btn) {
      btn.addEventListener('click', function () {
        var id = parseInt(btn.getAttribute('data-add-to-cart'), 10);
        if (!id) return;
        var label = btn.textContent;
        btn.disabled = true;
        btn.textContent = '加入中…';
        fetch('/api/public/shop/cart/add', {
          method: 'POST',
          credentials: 'same-origin',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ content_id: id, qty: 1 })
        })
          .then(function (r) { return r.json(); })
          .then(function (j) {
            if (j && j.code === 200) {
              window.VMCartToast('已加入购物车', true);
              window.VMCartBadge(j.data && j.data.total_qty);
            } else {
              window.VMCartToast((j && (j.message || j.msg)) || '加入购物车失败', false);
            }
          })
          .catch(function () { window.VMCartToast('网络错误，请稍后重试', false); })
          .then(function () {
            btn.disabled = false;
            btn.textContent = label;
          });
      });
    });
  })();
</script>

<script>
  /*
    示例图加载失败兜底（2026-10-12）。

    主题 init_data 的示例图多是外链图床，图源失效时会 404 —— 原本表现为
    「空白 + 浏览器破图图标」，整块版面看着像页面坏了，而实际上只是图挂了。
    这里统一换成内联 SVG 占位（data URI，零网络依赖），保证版式完整。

    ⚠️ img 的 error 事件**不冒泡**，只能用捕获阶段（第三个参数 true）监听。
    ⚠️ 脚本执行前就已经失败的图不会再触发 error，所以 load 后再扫一遍
    （complete=false 或 naturalWidth=0 即视为失败）。
  */
  (function () {
    var PLACEHOLDER = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(
      '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300">'
      + '<rect width="400" height="300" fill="#f1f5f9"/>'
      + '<g fill="#cbd5e1"><rect x="150" y="100" width="100" height="72" rx="6"/>'
      + '<circle cx="174" cy="126" r="9"/><path d="M152 165l24-22 17 15 13-12 22 19z"/></g>'
      + '<text x="200" y="212" font-family="sans-serif" font-size="15" fill="#94a3b8" text-anchor="middle">图片暂缺</text>'
      + '</svg>');
    function fallback(img) {
      if (!img || img.getAttribute('data-img-fallback') === '1') return;
      img.setAttribute('data-img-fallback', '1');
      img.src = PLACEHOLDER;
    }
    document.addEventListener('error', function (e) {
      var el = e.target;
      if (el && el.tagName === 'IMG') fallback(el);
    }, true);
    window.addEventListener('load', function () {
      document.querySelectorAll('img').forEach(function (img) {
        if (img.loading === 'lazy' && !img.complete) return; // 懒加载还没轮到加载，不算失败（否则首屏以下的图会被误杀成占位图）
        if (!img.complete || img.naturalWidth === 0) fallback(img);
      });
    });
  })();
</script>