import React, { useState } from "react";
import AutoTable from "@/components/AutoTable";
import DrawInitForm from "@/components/DrawInitForm";
import { Button } from "antd";

function Table({ route }) {
  const [vs, setvs] = useState();
  return (
    <div style={{ height: "200vh" }}>
      <AutoTable
        pagetitle={route.name}
        pageextra={
          <Button
            onClick={() => {
              setvs(true);
            }}
          >
            add
          </Button>
        }
        columns={[
          {
            title: "b",
            dataIndex: "a",
            key: "a",
            with: 50,
          },
          {
            title: "d",
            dataIndex: "c",
            key: "c",
          },
        ]}
        dataSource={[
          {
            a: "123",
            c: "456",
          },
          {
            a: "123",
            c: "456",
          },
          {
            a: "123",
            c: "456",
          },
        ]}
      ></AutoTable>
      <DrawInitForm
        title="Basic Drawer"
        onClose={() => {
          setvs(false);
        }}
        visible={vs}
        fields={{
          a: {
            value: null,
            type: "input",
            title: "b",
            name: ["a"],
            required: true,
          },
        }}
      ></DrawInitForm>
    </div>
  );
}

export default Table;