import React, { useState } from "react";
import { Table, StatusTip, RadioGroup, Radio } from "@tencent/tea-component";

export default function TableTipsExample() {
  const [status, setStatus] = useState("none");
  return (
    <>
      <RadioGroup value={status} onChange={value => setStatus(value)}>
        <Radio name="none">无</Radio>
        <Radio name="loading">加载中</Radio>
        <Radio name="empty">空数据</Radio>
        <Radio name="found">找到数据</Radio>
        <Radio name="error">加载失败</Radio>
      </RadioGroup>
      <Table
        columns={[
          {
            key: "movie",
            header: "电影",
          },
          {
            key: "director",
            header: "导演",
          },
          {
            key: "type",
            header: "类型",
          },
        ]}
        records={
          status === "empty"
            ? []
            : [
                { movie: "流浪地球", director: "张帆", type: "科幻" },
                { movie: "大话西游", director: "周星驰", type: "喜剧" },
              ]
        }
        topTip={
          status !== "none" && (
            <StatusTip
              // @ts-ignore
              status={status}
              onClear={() => setStatus("loading")}
              onRetry={() => setStatus("loading")}
            />
          )
        }
      />
    </>
  );
}