import { mockStats } from '../../services/api';

Page({
  data: {
    loading: true,
    stats: mockStats,
    w: 300,
  },
  onLoad() {
    const sys = wx.getSystemInfoSync();
    this.setData({
      stats: mockStats,
      loading: false,
      w: (sys.windowWidth || 320) - 40,
    });
  },
  onReady() {
    this.drawChart();
  },
  drawChart() {
    const curve = mockStats.equity_curve;
    const query = wx.createSelectorQuery().in(this);
    query.select('#chart').fields({ node: true, size: true }).exec((res: any) => {
      const canvas = res[0]?.node;
      if (!canvas) return;
      const ctx = canvas.getContext('2d');
      const dpr = wx.getSystemInfoSync().pixelRatio || 2;
      canvas.width = this.data.w * dpr;
      canvas.height = 200 * dpr;
      ctx.scale(dpr, dpr);
      const w = this.data.w;
      const h = 200;
      const min = Math.min(...curve);
      const max = Math.max(...curve);
      const range = max - min || 1;
      ctx.strokeStyle = '#5a9';
      ctx.lineWidth = 2;
      ctx.beginPath();
      curve.forEach((v: number, i: number) => {
        const x = (i / (curve.length - 1)) * (w - 20) + 10;
        const y = h - 20 - ((v - min) / range) * (h - 40);
        if (i === 0) ctx.moveTo(x, y);
        else ctx.lineTo(x, y);
      });
      ctx.stroke();
    });
  },
});