use wasm_bindgen::prelude::*;
use yew::prelude::*;

#[wasm_bindgen]
extern "C" {
    #[wasm_bindgen(js_namespace = ["window", "__TAURI__", "tauri"])]
    async fn invoke(cmd: &str, args: JsValue) -> JsValue;

    #[wasm_bindgen(js_namespace = console)]
    fn log(s: &str);
}

#[function_component]
pub fn App() -> Html {
    let body = vec![
        "BodyCell1".to_owned(),
        "BodyCell2".to_owned(),
        "BodyCell3".to_owned(),
        "BodyCell4".to_owned(),
        "BodyCell5".to_owned(),
    ];

    let mut data = vec![];
    for _ in 0..2000 {
        data.push(body.clone());
    }
    html! {
        <TestTable {data}/>
    }
}

#[derive(PartialEq, Properties)]
pub struct TableProps {
    onwheel: Callback<TableMsg>,
    children: Children,
}

pub struct Table;

pub enum TableMsg {
    LoadNextPage,
}

impl Component for Table {
    type Message = ();
    type Properties = TableProps;

    fn create(ctx: &Context<Self>) -> Self {
        Self {}
    }

    fn view(&self, ctx: &Context<Self>) -> Html {
        let onwheel = ctx.props().onwheel.reform(move |_| TableMsg::LoadNextPage);
        html! {
            <table {onwheel}>
            <thead>
                <tr>
                    <th>{""}</th>
                    <th>{"HeadCell1"}</th>
                    <th>{"HeadCell2"}</th>
                    <th>{"HeadCell3"}</th>
                    <th>{"HeadCell4"}</th>
                    <th>{"HeadCell5"}</th>
                </tr>
            </thead>
            <tbody>
                {for ctx.props().children.iter()}
            </tbody>
            </table>
        }
    }
}

pub struct TestTable {
    page: usize,
    per_page: usize,
    total: usize,
}

#[derive(PartialEq, Properties)]
pub struct TestTableProps {
    data: Vec<Vec<String>>,
}

impl Component for TestTable {
    type Message = TableMsg;
    type Properties = TestTableProps;

    fn create(ctx: &Context<Self>) -> Self {
        Self {
            page: 0,
            per_page: 16,
            total: ctx.props().data.len(),
        }
    }

    fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
        match msg {
            TableMsg::LoadNextPage => {
                self.page += 1;
                if self.page > self.total / self.per_page {
                    self.page = 0;
                }
            }
        }
        true
    }

    fn view(&self, ctx: &Context<Self>) -> Html {
        let mut rows = vec![];
        for i in 0..self.per_page {
            let index = i + self.page * self.per_page;
            if index >= self.total {
                break;
            }
            rows.push(html! {
                <tr>
                    <td>{index}</td>
                    <td>{format!("{}--{}", ctx.props().data[index][0].to_owned(), index)}</td>
                    <td>{format!("{}--{}", ctx.props().data[index][1].to_owned(), index)}</td>
                    <td>{format!("{}--{}", ctx.props().data[index][2].to_owned(), index)}</td>
                    <td>{format!("{}--{}", ctx.props().data[index][3].to_owned(), index)}</td>
                    <td>{format!("{}--{}", ctx.props().data[index][4].to_owned(), index)}</td>
                </tr>
            });
        }

        html! {
            <Table onwheel={ctx.link().callback(|_|TableMsg::LoadNextPage)}>
            {for rows}
            </Table>
        }
    }
}

这段代码是一个可滚动表格组件的Rust实现。App函数返回一个TestTable组件，该组件将Vecas作为其数据。TestTable组件使用Table组件呈现一个带有表头和表体的表格。当用户使用鼠标滚轮滚动表格时，Table组件会更新其状态。通过增加当前页索引来更新表格。用于对数据进行切片，并将当前部分的数据呈现在表体中。
使用鼠标滚轮滚动时发生内存泄漏。