import React, { useState } from "react";
import { ProTable, PageContainer } from "@ant-design/pro-components";
import {
  Card,
  Col,
  Row,
  Button,
  Input,
  Breadcrumb,
  Empty,
  Pagination,
} from "antd";
import { useRequest } from "umi";
import { AppstoreOutlined, MenuOutlined } from "@ant-design/icons";
import { FlowchartMindMapList } from "@/api/systemDesigner";
import ProjectCard from "./ProjectCard";

export default function Template() {
  const [display, setDisplay] = useState("card");
  const [dataSource, setDataSource] = useState<any[]>([]);
  const [total, setTotal] = useState(0);

  // const { loading, run, refresh } = useRequest(FlowchartMindMapList, {
  //   defaultParams: [
  //     {
  //       currentPage: 1,
  //       pageSize: 12,
  //     },
  //   ],
  //   onSuccess: (res) => {
  //     setDataSource(res?.result?.model || []);
  //     setTotal(res?.result?.totalCount || 0);
  //   },
  // });

  return (
    <>
      <PageContainer
        extra={[
          <Button
            key="1"
            onClick={() => {
              setDisplay(display === "card" ? "list" : "card");
            }}
            icon={<i className="iconfont icon-shaixuan" />}
          />,
          <Button
            key="2"
            onClick={() => {
              setDisplay(display === "card" ? "list" : "card");
            }}
            icon={display === "card" ? <MenuOutlined /> : <AppstoreOutlined />}
          />,
        ]}
        title={
          <Input
            placeholder="搜索模版"
            prefix={<i className="iconfont icon-chazhao" />}
          />
        }
        footer={[]}
      >
          <Breadcrumb
            items={[
              {
                title: "我的模版",
              },
            ]}
          ></Breadcrumb>
          {display === "card" ? (
            <>
              {/* <div className="text-12px color-#999 my-8px">文件</div> */}
              <Row gutter={[8, 16]}>
                {dataSource.map((item, index) => {
                  return (
                    <Col
                      xs={12}
                      sm={8}
                      md={6}
                      lg={6}
                      xl={6}
                      xxl={6}
                      key={index}
                    >
                      {/* <ProjectCard record={item} onFresh={refresh} onDelete={refresh}/> */}
                    </Col>
                  );
                })}
              </Row>
              <div className="flex justify-end py-16px">
                <Pagination
                  total={total}
                  defaultCurrent={1}
                  pageSize={12}
                  pageSizeOptions={["12", "24", "36"]}
                  onChange={(page, pageSize) => {
                    // run({
                    //   currentPage: page,
                    //   pageSize: pageSize,
                    // });
                  }}
                  hideOnSinglePage
                />
              </div>
              {dataSource.length == 0 ? <Empty description="暂无数据" /> : null}
            </>
          ) : (
            <ProTable
              // loading={loading}
              columns={[
                {
                  title: "名称",
                  dataIndex: "name",
                },
                {
                  title: "类型",
                  dataIndex: "type",
                },
                {
                  title: "修改时间",
                  dataIndex: "updatedTime",
                  sorter: (a, b) => a.updateTime - b.updateTime,
                },
              ]}
              dataSource={dataSource}
              rowKey={"id"}
              search={false}
              pagination={{
                total: total,
                pageSize: 10,
                defaultCurrent: 1,
                pageSizeOptions: ["12", "24", "36"],
                onChange: (page, pageSize) => {
                  // run({
                  //   currentPage: page,
                  //   pageSize: pageSize,
                  // });
                },
              }}
            />
          )}
      </PageContainer>
    </>
  );
}
