/* 11-02 首页「孕妈广场」效果稿 V1 · 广场头条（杂志式精选）：左大图故事卡 + 右「本期要目」3 条，细文字 tab 切换分类 */
(function () {
  var sec = document.getElementById('gcHome');
  var T = window.GC_TOPICS;
  if (!sec || !T || !T.length) return;

  var esc = function (s) { return String(s).replace(/[&<>"']/g, function (c) { return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]; }); };
  var kfmt = function (n) { return n >= 10000 ? (n / 10000).toFixed(1).replace(/\.0$/, '') + '万' : n >= 1000 ? (n / 1000).toFixed(1).replace(/\.0$/, '') + 'k' : String(n); };
  var fmtNum = function (n) { return String(n).replace(/\B(?=(\d{3})+(?!\d))/g, ','); };
  var byId = {}; T.forEach(function (t) { byId[t.id] = t; });
  var CAT = { family: { name: '家庭婚姻', ink: '#E0566F' }, work: { name: '职场', ink: '#3A72B8' }, baby: { name: '经验', ink: '#2E8A7C' } };

  /* 精选头条（摘自 guangchang/data.js 各话题第一篇照片笔记，占位） */
  var LEAD = {
    all:    { t: 'f01', title: '怀孕后我妈每天三个电话，第四个是我爸打的', author: '栗子慢慢', stage: '孕 22 周', av: 'm03', photo: 'guangchang/img/28953c83dbbc.jpg' },
    family: { t: 'm01', title: '孕12周起，倒垃圾和换猫砂彻底归他了', author: '小满月', stage: '孕 26 周', av: 'm08', photo: 'guangchang/img/17c2ced9b0fb.jpg' },
    work:   { t: 'w01', title: '孕 11 周还没告诉领导，周会上差点没忍住吐出来', author: '青柠半杯', stage: '孕 16 周', av: 'm12', photo: 'guangchang/img/fdcdb8d99742.jpg' },
    baby:   { t: 'b08', title: '孕32周，大家都在期待，我却在被窝里偷偷哭了一次', author: '胆小的兔', stage: '孕 33 周', av: 'p05', photo: 'guangchang/img/bc1f4f0145b6.jpg' }
  };
  var LIST = {
    all:    ['m10', 'w10', 'b01'],
    family: ['f02', 'f05', 'm06'],
    work:   ['w02', 'w10', 'w04'],
    baby:   ['b01', 'b03', 'b05']
  };
  var talkAll = T.reduce(function (a, t) { return a + (t.talk || 0); }, 0);
  var d = new Date(Date.now() + (new Date().getTimezoneOffset() + 480) * 6e4);   /* 北京时间 */

  var tabs = [['', '全部'], ['family', '家庭婚姻'], ['work', '职场'], ['baby', '经验']].map(function (c, i) {
    return '<button type="button" role="tab" data-cat="' + c[0] + '"' + (i ? '' : ' class="on" aria-selected="true"') + '>' + c[1] + '</button>';
  }).join('');

  sec.innerHTML =
    '<div class="v1-head">' +
      '<h2 class="v1-title"><span>孕妈广场</span></h2>' +
      '<nav class="v1-tabs" role="tablist" aria-label="话题分类">' + tabs + '</nav>' +
    '</div>' +
    '<div class="v1-kicker"><span>本期头条</span><i></i><em>' + (d.getMonth() + 1) + '月' + d.getDate() + '日 · 效果稿 V1</em></div>' +
    '<div class="v1-body" id="v1Body"></div>' +
    '<div class="v1-foot">' +
      '<button type="button" class="v1-live" data-go="all"><span class="v1-avs" aria-hidden="true">' +
        ['m05', 'p02'].map(function (a) { return '<img src="assets/img/mom/' + a + '.jpg" alt="" loading="lazy">'; }).join('') +
      '</span><span class="v1-lv"><b>' + fmtNum(talkAll) + '</b> 位妈妈在聊</span></button>' +
      '<button type="button" class="v1-gift" data-go="all">投稿选中 <b>¥30+500兜豆</b><i aria-hidden="true">›</i></button>' +
    '</div>';
  sec.classList.remove('hide');
  sec.classList.add('gv1');

  var body = sec.querySelector('#v1Body');
  function render(cat) {
    var k = cat || 'all', L = LEAD[k], lt = byId[L.t], lc = CAT[lt.cat];
    var items = LIST[k].map(function (id, i) {
      var t = byId[id], c = CAT[t.cat];
      return '<button type="button" class="v1-item" data-t="' + t.id + '" style="--ink:' + c.ink + '">' +
        '<span class="v1-it"><span class="v1-row"><span class="v1-no">0' + (i + 2) + '</span><span class="v1-tag">' + c.name + '</span></span>' +
        '<span class="v1-name">' + esc(t.name) + '</span>' +
        '<span class="v1-talk"><i></i>' + kfmt(t.talk) + ' 在聊</span></span></button>';
    }).join('');
    body.innerHTML =
      '<button type="button" class="v1-lead" data-t="' + lt.id + '" style="--ink:' + lc.ink + '">' +
        '<img class="v1-ph" src="' + L.photo + '" alt="" loading="lazy">' +
        '<span class="v1-shade"></span>' +
        '<span class="v1-badge"><b>01</b>' + lc.name + '</span>' +
        '<span class="v1-cap">' +
          '<span class="v1-lt">' + esc(L.title) + '</span>' +
          '<span class="v1-by"><img src="assets/img/mom/' + L.av + '.jpg" alt="" loading="lazy"><span class="v1-au">' + esc(L.author) + '</span><span class="v1-st">' + L.stage.replace(/ /g, '') + '</span></span>' +
        '</span>' +
      '</button>' +
      '<div class="v1-list"><span class="v1-lh">本期要目</span>' + items + '</div>';
    body.classList.remove('in'); void body.offsetWidth; body.classList.add('in');
  }
  render('');

  sec.addEventListener('click', function (e) {
    var b = e.target.closest('button');
    if (!b || !sec.contains(b)) return;
    if (b.hasAttribute('data-cat')) {
      if (b.classList.contains('on')) return;
      sec.querySelectorAll('.v1-tabs button').forEach(function (x) { x.classList.remove('on'); x.removeAttribute('aria-selected'); });
      b.classList.add('on'); b.setAttribute('aria-selected', 'true');
      render(b.getAttribute('data-cat'));
    } else if (b.hasAttribute('data-t')) {
      location.href = 'guangchang/?t=' + b.getAttribute('data-t') + location.hash;
    } else if (b.hasAttribute('data-go')) {
      location.href = 'guangchang/' + location.hash;
    }
  });
})();