import { useState, useEffect } from "react";
import { Table, Button, Space } from "antd";
import axios from "axios";

export const Dashboard = () => {
  const [dataSource, setDatasource] = useState<[]>([]);

  useEffect(() => {
    const fetchData = async () => {
      const { data } = await axios.post("/api/top");
      if (data)
        setDatasource(
          data.map((i: any) => ({
            ...i,
            key: i.user_id,
            nickName: i.user_nickName,
            user_level: i.user_level,
            user_fans_club_level: i.user_fans_club_level,
          }))
        );
    };
    fetchData();
  }, []);

  const columns = [
    {
      title: "昵称",
      dataIndex: "nickName",
      key: "nickName",
    },
    {
      title: "身份",
      key: "base",
      render: (record) => {
        return (
          <Space>
            <span>{record.user_isAdmin == 1 ? "管" : ""}</span>
            <span>{record.user_is_super_admin == 1 ? "超" : ""}</span>
          </Space>
        );
      },
    },
    {
      title: "抖音级别",
      dataIndex: "user_level",
      key: "user_level",
    },
    {
      title: "粉丝团级别",
      dataIndex: "user_fans_club_level",
      key: "user_fans_club_level",
    },
    {
      title: "听大哥的话",
      key: "msg_content",
      render: (record) => {
        return record.msg_contents.map((item) => {
          const { msg_content } = item;
          return <div>{msg_content}</div>;
        });
      },
    },
  ];

  return <Table dataSource={dataSource} columns={columns}></Table>;
};