sundynix-pets/pets-fe/pages/record/record.js

const store = require('../../utils/store.js');
const api = require('../../utils/api.js');
const { toastErr } = require('../../utils/ui.js');
const { syncTabBar } = require('../../utils/tabbar.js');
const recordTypes = require('../../utils/recordTypes.js');

function pad(n) {
  return n < 10 ? '0' + n : '' + n;
}
function fmtTime(iso) {
  if (!iso) return '';
  const d = new Date(iso);
  const now = new Date();
  const hm = pad(d.getHours()) + ':' + pad(d.getMinutes());
  if (d.toDateString() === now.toDateString()) return '今天 ' + hm;
  const y = new Date(now.getTime() - 86400000);
  if (d.toDateString() === y.toDateString()) return '昨天 ' + hm;
  return d.getMonth() + 1 + '月' + d.getDate() + '日';
}
// 记录类型 → 配色。和首页快速记录入口用同一套分组：
// 体重/疫苗=橙、便便/饮食=绿、异常/用药=蓝、消费/照片=紫
// 时间轴每条记录的色调跟着它所属的分组走，和「记一笔」的宫格是同一套色。
// 原来这里是 9 种写死的映射，新类型会全掉到 tone-1，一片橙色分不出类别
function toneOf(type) {
  const t = recordTypes.get(type);
  return (t && t.tone) || 'tone-1';
}

// 「记一笔」的入口不再写死在这里：类型和分组由后端 record_types 表提供
// （后台可配），前端只负责渲染。utils/recordTypes.js 是两处共用的缓存。

function mapRecord(r) {
  return {
    id: r.id,
    // 图标按 type 取（9 值枚举，可靠）；老数据 icon 字段里的 emoji 只作兜底
    type: r.type || r.icon || '',
    tone: toneOf(r.type),
    title: r.title,
    desc: fmtTime(r.occurred_at) + (r.description ? '｜' + r.description : ''),
    image: r.image_url || '',
  };
}

// 时间轴类型筛选
const REC_FILTERS = [
  { key: '', label: '全部' },
  { key: 'weight', label: '体重' },
  { key: 'poop', label: '便便' },
  { key: 'food', label: '饮食' },
  { key: 'symptom', label: '异常' },
  { key: 'medicine', label: '用药' },
  { key: 'vaccine', label: '疫苗' },
  { key: 'cost', label: '消费' },
  { key: 'photo', label: '照片' },
];

function fmtDay(iso) {
  if (!iso) return '';
  const d = new Date(iso);
  return d.getMonth() + 1 + '月' + d.getDate() + '日';
}

// 用真实体重点生成趋势图：返回 { svg(折线), dots(可点圆点，坐标为百分比) }
function buildChart(points) {
  const vals = points.map((p) => Number(p.value) || 0);
  const W = 300, H = 100, pad = 12, n = vals.length;
  let min = Math.min.apply(null, vals);
  let max = Math.max.apply(null, vals);
  if (max === min) max = min + 1;
  const xs = (i) => (n === 1 ? W / 2 : pad + ((W - 2 * pad) * i) / (n - 1));
  const ys = (v) => H - pad - ((H - 2 * pad) * (v - min)) / (max - min);
  const pts = vals.map((v, i) => xs(i).toFixed(1) + ',' + ys(v).toFixed(1)).join(' ');
  const svg =
    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ' + W + ' ' + H + '" preserveAspectRatio="none">' +
    '<polyline points="' + pts + '" fill="none" stroke="#73BE9D" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>' +
    '</svg>';
  const dots = points.map((p, i) => ({
    xp: Number(((xs(i) / W) * 100).toFixed(2)),
    yp: Number(((ys(vals[i]) / H) * 100).toFixed(2)),
    value: vals[i],
    date: fmtDay(p.occurred_at),
    note: p.note || '',
    delta: i > 0 ? Number((vals[i] - vals[i - 1]).toFixed(2)) : null,
  }));
  return { svg: 'data:image/svg+xml,' + encodeURIComponent(svg), dots };
}

// 洞察等级 → 图标。alert 用警告号，其余按类别给
const INS_ICON = { alert: 'warn', warn: 'warn', info: 'trend' };
function mapInsight(i) {
  return { ...i, icon: i.level === 'info' ? (INS_ICON.info) : INS_ICON.alert };
}

const REC_PAGE = 6;

Page({
  data: {
    pet: {},
    timeline: [],
    recPage: 1,
    recTotal: 0,
    recHasMore: false,
    recFilters: REC_FILTERS,
    recFilterIdx: 0,
    typeGroups: [],
    insights: [],
    trendSvg: '',
    trendStats: null,
    trendDots: [],
    selDot: null,
    selIdx: -1,
    sheetShow: false,
    sheetType: '',
  },
  onLoad() {
    this._unsub = store.subscribe((pet) => {
      this.setData({ pet });
      if (!this._inited) return; // 首次由 onShow 加载
      this.loadRecords();
    });
  },
  onUnload() {
    if (this._unsub) this._unsub();
  },
  onShow() {
    syncTabBar(this);
    this.loadTypes();
    store
      .ready()
      .then(() => {
        this._inited = true;
        this.setData({ pet: store.getPet() });
        this.loadRecords();
      })
      .catch((e) => wx.showToast({ title: e.message || '加载失败', icon: 'none' }));
  },
  curFilter() {
    return this.data.recFilters[this.data.recFilterIdx].key;
  },
  // 来自 seg-tabs 的 change 事件
  onFilterTap(e) {
    const i = Number(e.detail.index);
    if (i === this.data.recFilterIdx) return;
    this.setData({ recFilterIdx: i }, () => this.loadRecords());
  },
  // 长按删除一条记录
  onDeleteRecord(e) {
    const r = this.data.timeline[e.currentTarget.dataset.index];
    if (!r || !r.id) return;
    wx.showModal({
      title: '删除记录',
      content: '确定删除「' + r.title + '」？删除后不可恢复。',
      confirmColor: '#D9534F',
      success: (res) => {
        if (!res.confirm) return;
        api
          .deleteRecord(r.id)
          .then(() => {
            wx.showToast({ title: '已删除', icon: 'success' });
            this.loadRecords();
          })
          .catch((err) => wx.showToast({ title: err.message || '删除失败', icon: 'none' }));
      },
    });
  },
  // 健康洞察：把散落的记录变成结论。点一条直接跳到对应的记录入口
  loadInsights() {
    const id = store.currentPetId();
    if (!id) return this.setData({ insights: [] });
    api
      .petInsights(id)
      .then((list) => this.setData({ insights: (list || []).map(mapInsight) }))
      .catch(() => this.setData({ insights: [] }));
  },
  onTapInsight(e) {
    const it = this.data.insights[e.currentTarget.dataset.index];
    if (it && it.action) this.openSheetType(it.action);
  },
  // 类型只在缓存没热时真正请求；弹层也读这份缓存判断走哪种表单，
  // 所以这一步必须在用户能点开弹层之前完成
  loadTypes() {
    if (this.data.typeGroups.length) return;
    recordTypes
      .load()
      .then((groups) => this.setData({ typeGroups: groups }))
      .catch(() => {});
  },
  loadRecords() {
    const id = store.currentPetId();
    if (!id) return;
    api
      .getRecords(id, { page: 1, pageSize: REC_PAGE, type: this.curFilter() })
      .then((res) => {
        const list = (res.list || []).map(mapRecord);
        this.setData({ timeline: list, recPage: 1, recTotal: res.total || 0, recHasMore: list.length < (res.total || 0) });
      })
      .catch((e) => toastErr(e));
    this.loadTrend();
    this.loadInsights();
  },
  loadMoreRecords() {
    const id = store.currentPetId();
    if (!id) return;
    const next = this.data.recPage + 1;
    api
      .getRecords(id, { page: next, pageSize: REC_PAGE, type: this.curFilter() })
      .then((res) => {
        const merged = this.data.timeline.concat((res.list || []).map(mapRecord));
        this.setData({ timeline: merged, recPage: next, recTotal: res.total || 0, recHasMore: merged.length < (res.total || 0) });
      })
      .catch(() => {});
  },
  collapseRecords() {
    this.loadRecords();
  },
  loadTrend() {
    const id = store.currentPetId();
    if (!id) {
      this.setData({ trendSvg: '', trendStats: null, trendDots: [], selDot: null, selIdx: -1 });
      return;
    }
    api
      .weightTrend(id)
      .then((points) => {
        points = points || [];
        if (points.length < 2) {
          this.setData({ trendSvg: '', trendStats: null, trendDots: [], selDot: null, selIdx: -1 });
          return;
        }
        const vals = points.map((p) => Number(p.value) || 0);
        const latest = vals[vals.length - 1];
        const delta = Number((latest - vals[0]).toFixed(2));
        const chart = buildChart(points);
        const lastIdx = chart.dots.length - 1;
        this.setData({
          trendSvg: chart.svg,
          trendDots: chart.dots,
          selDot: chart.dots[lastIdx], // 默认选中最新一次
          selIdx: lastIdx,
          trendStats: { latest, delta, count: points.length },
        });
      })
      .catch(() => {});
  },
  onTapPoint(e) {
    const i = e.currentTarget.dataset.index;
    this.setData({ selDot: this.data.trendDots[i], selIdx: i });
  },
  previewImage(e) {
    const src = e.currentTarget.dataset.src;
    if (src) wx.previewImage({ urls: [src], current: src });
  },
  openSheet(e) {
    this.openSheetType(e.currentTarget.dataset.type);
  },
  openSheetType(type) {
    this.setData({ sheetType: type, sheetShow: true });
  },
  closeSheet() {
    this.setData({ sheetShow: false });
  },
  onSheetSaved() {
    this.loadRecords();
  },
  onAddPet() {
    this.openSheetType('addPet');
  },
  onShareAppMessage() {
    return { title: '用肉垫计划记录毛孩子的成长', path: '/pages/record/record' };
  },
  onShareTimeline() {
    return { title: '用肉垫计划记录毛孩子的成长' };
  },
});