/** @format */
import { FunctionComponent, Suspense } from "react";
import { CheckCard, ProCard } from "@ant-design/pro-components";
import styles from "./index.module.less";

import { Outlet, useNavigate } from "react-router-dom";
import { Button, Empty } from "antd";
import StorageIcon from "@/constant/stroage-icon.ts";
import { ReloadOutlined } from "@ant-design/icons";

const Bucket: FunctionComponent = () => {
	const navigate = useNavigate();
	const checkList = ["minio", "ali", "tencent", "huawei", "baidu", "jd"];
	return (
		<div className={styles.div_proCard}>
			<ProCard
				extra={<Button type="primary" shape={"circle"} icon={<ReloadOutlined />}></Button>}
				title="存储商"
				headerBordered
				className={styles.proCard}
				boxShadow={true}
				colSpan={"100%"}
				bordered>
				<CheckCard.Group>
					<div className={styles.div_checkCardArea}>
						{checkList.map((item) => {
							return (
								<CheckCard
									key={item}
									avatar={StorageIcon[item]}
									style={{ width: "100%" }}
									title={item}
									description="点击查看"
									value={item}
									onChange={() => {
										navigate(`/main/bucket/${item}`);
									}}
								/>
							);
						})}
					</div>
				</CheckCard.Group>
			</ProCard>
			<ProCard className={styles.proCardBucket} bordered boxShadow>
				{location.pathname === "/main/bucket" || location.pathname === "/main/bucket/" ? (
					<>
						<div></div>
						<Empty description={"请选择存储商"} />
					</>
				) : (
					<>
						<Suspense>
							<Outlet />
						</Suspense>
					</>
				)}
			</ProCard>
		</div>
	);
};
export default Bucket;