import { resolveComponent, openBlock, createElementBlock, createElementVNode, createVNode, withCtx, createTextVNode, toDisplayString, Fragment, renderList, normalizeStyle } from "vue";
import { _ as _export_sfc } from "../../_plugin-vue_export-helper.js";
const _style_0 = { "page": { "": { "flex": 1, "backgroundColor": "#f5f6fa", "height": 100 } }, "controls": { "": { "paddingTop": 20, "paddingRight": 20, "paddingBottom": 20, "paddingLeft": 20, "backgroundColor": "#ffffff" } }, "row": { "": { "flexDirection": "row", "alignItems": "center", "marginBottom": 10 } }, "btn": { "": { "paddingTop": 10, "paddingRight": 14, "paddingBottom": 10, "paddingLeft": 14, "borderRadius": 6, "backgroundColor": "#2d8cf0", "color": "#ffffff", "marginRight": 10 } }, "stat": { "": { "marginRight": 14, "fontSize": 28 } }, "hint": { "": { "color": "#888888", "fontSize": 24, "marginTop": 6 } }, "list": { "": { "flex": 1 } }, "item": { "": { "height": 160, "paddingTop": 12, "paddingRight": 12, "paddingBottom": 12, "paddingLeft": 12, "flexDirection": "row", "alignItems": "center", "borderBottomWidth": 1, "borderBottomStyle": "solid", "borderBottomColor": "rgba(0,0,0,0.06)", "backgroundColor": "#ffffff" } }, "thumb": { "": { "width": 120, "height": 120, "borderRadius": 8, "marginRight": 12 } }, "meta": { "": { "flex": 1 } }, "title": { "": { "fontSize": 30, "fontWeight": "bold", "marginBottom": 8 } }, "desc": { "": { "fontSize": 24, "color": "#666666", "lineHeight": 32 } } };
const _sfc_main = {
  data() {
    return {
      items: [],
      // FPS 测量
      measuring: false,
      fpsDisplay: 0,
      avgFrameMsDisplay: 0,
      // 内部用
      _frames: [],
      _rafId: null,
      _idleTO: null
    };
  },
  methods: {
    generate(n) {
      const list = [];
      for (let i = 0; i < n; i++) {
        list.push({
          id: i + 1,
          color: this._randColor()
        });
      }
      this.items = list;
      this.fpsDisplay = 0;
      this.avgFrameMsDisplay = 0;
    },
    clearList() {
      this.items = [];
      this.fpsDisplay = 0;
      this.avgFrameMsDisplay = 0;
    },
    _randColor() {
      const h = Math.floor(Math.random() * 360);
      const s = 60 + Math.floor(Math.random() * 20);
      const l = 55 + Math.floor(Math.random() * 10);
      return `hsl(${h} ${s}% ${l}%)`;
    },
    // 滚动回调（来自原生 nvue scroll-view）
    onScroll(e) {
      if (!this.measuring)
        this._startMeasure();
      clearTimeout(this._idleTO);
      this._idleTO = setTimeout(() => {
        this._stopMeasure();
      }, 300);
    },
    _startMeasure() {
      this.measuring = true;
      this._frames = [];
      const pushFrame = (t) => {
        this._frames.push(t);
        if (this._frames.length > 120)
          this._frames.shift();
        this._rafId = requestAnimationFrame(pushFrame);
      };
      this._rafId = requestAnimationFrame(pushFrame);
    },
    _stopMeasure() {
      this.measuring = false;
      if (this._rafId) {
        cancelAnimationFrame(this._rafId);
        this._rafId = null;
      }
      if (this._frames.length < 2) {
        this.fpsDisplay = 0;
        this.avgFrameMsDisplay = 0;
        return;
      }
      const intervals = [];
      for (let i = 1; i < this._frames.length; i++) {
        intervals.push(this._frames[i] - this._frames[i - 1]);
      }
      const sum = intervals.reduce((a, b) => a + b, 0);
      const avg = sum / intervals.length;
      const fps = 1e3 / avg;
      this.avgFrameMsDisplay = avg.toFixed(2);
      this.fpsDisplay = Math.round(fps);
    }
  }
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_button = resolveComponent("button");
  return openBlock(), createElementBlock("scroll-view", {
    scrollY: true,
    showScrollbar: true,
    enableBackToTop: true,
    bubble: "true",
    style: { flexDirection: "column" }
  }, [
    createElementVNode("div", { class: "page" }, [
      createElementVNode("div", { class: "controls" }, [
        createElementVNode("div", { class: "row" }, [
          createVNode(_component_button, {
            class: "btn",
            onClick: _cache[0] || (_cache[0] = ($event) => $options.generate(2e3))
          }, {
            default: withCtx(() => [
              createTextVNode("生成 2000 项")
            ]),
            _: 1
            /* STABLE */
          }),
          createVNode(_component_button, {
            class: "btn",
            onClick: _cache[1] || (_cache[1] = ($event) => $options.generate(5e3))
          }, {
            default: withCtx(() => [
              createTextVNode("生成 5000 项")
            ]),
            _: 1
            /* STABLE */
          }),
          createVNode(_component_button, {
            class: "btn",
            onClick: $options.clearList
          }, {
            default: withCtx(() => [
              createTextVNode("清空")
            ]),
            _: 1
            /* STABLE */
          }, 8, ["onClick"])
        ]),
        createElementVNode("div", { class: "row" }, [
          createElementVNode(
            "u-text",
            { class: "stat" },
            "FPS: " + toDisplayString($data.fpsDisplay),
            1
            /* TEXT */
          ),
          createElementVNode(
            "u-text",
            { class: "stat" },
            "平均帧(ms): " + toDisplayString($data.avgFrameMsDisplay),
            1
            /* TEXT */
          ),
          createElementVNode(
            "u-text",
            { class: "stat" },
            "items: " + toDisplayString($data.items.length),
            1
            /* TEXT */
          )
        ]),
        createElementVNode("div", { class: "hint" }, [
          createElementVNode("u-text", null, "说明：向下快速滚动列表以测试渲染/滚动性能；nvue 将使用原生渲染。")
        ])
      ]),
      createElementVNode(
        "scroll-view",
        {
          class: "list",
          scrollY: true,
          showScrollbar: "true",
          onScroll: _cache[2] || (_cache[2] = (...args) => $options.onScroll && $options.onScroll(...args))
        },
        [
          (openBlock(true), createElementBlock(
            Fragment,
            null,
            renderList($data.items, (item) => {
              return openBlock(), createElementBlock("div", {
                class: "item",
                key: item.id
              }, [
                createElementVNode(
                  "div",
                  {
                    class: "thumb",
                    style: normalizeStyle({ backgroundColor: item.color })
                  },
                  null,
                  4
                  /* STYLE */
                ),
                createElementVNode("div", { class: "meta" }, [
                  createElementVNode(
                    "u-text",
                    { class: "title" },
                    "Item #" + toDisplayString(item.id),
                    1
                    /* TEXT */
                  ),
                  createElementVNode(
                    "u-text",
                    { class: "desc" },
                    "这是第 " + toDisplayString(item.id) + " 个条目，用于增加每个 DOM 的复杂度以测试渲染成本。多行文本强制布局多次换行，模拟真实列表。",
                    1
                    /* TEXT */
                  )
                ])
              ]);
            }),
            128
            /* KEYED_FRAGMENT */
          ))
        ],
        32
        /* NEED_HYDRATION */
      )
    ])
  ]);
}
const ceshi = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["styles", [_style_0]], ["__file", "D:/hldy_app_mini/pages/login/ceshi.nvue"]]);
export {
  ceshi as default
};