/** @format */
import { FunctionComponent, useEffect, useState } from "react";
import { Avatar, Card, Skeleton, Space, Tag } from "antd";
import Meta from "antd/es/card/Meta";
import styles from "./index.module.less";
import ReactECharts from "echarts-for-react";
import { ProCard, ProList } from "@ant-design/pro-components";
import storage from "@/assets/icons/storage.svg";
import bucket from "@/assets/icons/bucket.svg";
import file from "@/assets/icons/file.svg";
import flux from "@/assets/icons/flux.svg";
import aliyun from "@/assets/icons/aliyun.svg";
// import * as echarts from "echarts/core";
import CalendarHeatmap from "react-calendar-heatmap";
import "react-calendar-heatmap/dist/styles.css";
const defaultData = [
	{
		id: "1",
		name: "语雀的天空",
		image: aliyun,
		desc: "我是一条测试的描述",
	},
	{
		id: "2",
		name: "Ant Design",
		image: "https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg",
		desc: "我是一条测试的描述",
	},
	{
		id: "3",
		name: "蚂蚁金服体验科技",
		image: "https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg",
		desc: "我是一条测试的描述",
	},
	{
		id: "4",
		name: "TechUI",
		image: "https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg",
		desc: "我是一条测试的描述",
	},
];

type DataItem = (typeof defaultData)[number];
const MainHome: FunctionComponent = () => {
	const [loading, setLoading] = useState(true);
	const [dataSource, setDataSource] = useState<DataItem[]>(defaultData);
	const option = {
		tooltip: {
			trigger: "axis",
		},
		legend: {
			color: ["#F58080", "#47D8BE", "#F9A589"],
			data: ["文件", "流量", "存储桶"],
			left: "center",
			bottom: "bottom",
		},
		grid: {
			top: "middle",
			left: "3%",
			right: "4%",
			bottom: "3%",
			height: "80%",
			containLabel: true,
		},
		xAxis: {
			type: "category",
			data: [100, 200, 20, 30, 60, 89],
			axisLine: {
				lineStyle: {
					color: "#999",
				},
			},
		},
		yAxis: {
			type: "value",

			splitLine: {
				lineStyle: {
					type: "dashed",
					color: "#DDD",
				},
			},
			axisLine: {
				show: false,
				lineStyle: {
					color: "#333",
				},
			},
			nameTextStyle: {
				color: "#999",
			},
			splitArea: {
				show: false,
			},
		},
		series: [
			{
				name: "文件",
				type: "line",
				data: [800, 900, 220, 130, 660, 289],
				color: "#F58080",
				lineStyle: {
					width: 5,
					color: {
						type: "linear",

						colorStops: [
							{
								offset: 0,
								color: "#FFCAD4", // 0% 处的颜色
							},
							{
								offset: 0.4,
								color: "#F58080", // 100% 处的颜色
							},
							{
								offset: 1,
								color: "#F58080", // 100% 处的颜色
							},
						],
						globalCoord: false, // 缺省为 false
					},
					shadowColor: "rgba(245,128,128, 0.5)",
					shadowBlur: 10,
					shadowOffsetY: 7,
				},
				itemStyle: {
					color: "#F58080",
					borderWidth: 10,
					/*shadowColor: 'rgba(72,216,191, 0.3)',
					 shadowBlur: 100,*/
					borderColor: "#F58080",
				},
				smooth: true,
			},
			{
				name: "流量",
				type: "line",
				data: [123, 568, 111, 222, 123, 56],
				lineStyle: {
					width: 5,
					color: {
						type: "linear",

						colorStops: [
							{
								offset: 0,
								color: "#AAF487", // 0% 处的颜色
							},
							{
								offset: 0.4,
								color: "#47D8BE", // 100% 处的颜色
							},
							{
								offset: 1,
								color: "#47D8BE", // 100% 处的颜色
							},
						],
						globalCoord: false, // 缺省为 false
					},
					shadowColor: "rgba(71,216,190, 0.5)",
					shadowBlur: 10,
					shadowOffsetY: 7,
				},
				itemStyle: {
					color: "#AAF487",
					borderWidth: 10,
					/*shadowColor: 'rgba(72,216,191, 0.3)',
						 shadowBlur: 100,*/
					borderColor: "#AAF487",
				},
				smooth: true,
			},
			{
				name: "存储桶",
				type: "line",
				data: [125, 568, 25, 36, 784, 56],
				lineStyle: {
					width: 5,
					color: {
						type: "linear",

						colorStops: [
							{
								offset: 0,
								color: "#F6D06F", // 0% 处的颜色
							},
							{
								offset: 0.4,
								color: "#F9A589", // 100% 处的颜色
							},
							{
								offset: 1,
								color: "#F9A589", // 100% 处的颜色
							},
						],
						globalCoord: false, // 缺省为 false
					},
					shadowColor: "rgba(249,165,137, 0.5)",
					shadowBlur: 10,
					shadowOffsetY: 7,
				},
				itemStyle: {
					color: "#F6D06F",
					borderWidth: 10,
					/*shadowColor: 'rgba(72,216,191, 0.3)',
						 shadowBlur: 100,*/
					borderColor: "#F6D06F",
				},
				smooth: true,
			},
		],
	};

	useEffect(() => {
		setTimeout(() => {
			setLoading(false);
		}, 2000);
	}, []);
	return (
		<>
			<div className={styles.home_content_main}>
				<div className={styles.home_content_head}>
					<div className={styles.home_content_head_left}>
						<Card
							style={{ width: "13.5vw", height: "21vh" }}
							loading={false}
							bordered
							hoverable>
							<Skeleton loading={loading} active avatar>
								<Meta
									avatar={<Avatar shape="square" size="large" src={storage} />}
									title="存储"
									description="This is the description"
								/>
							</Skeleton>
						</Card>
						<Card
							style={{ width: "13.5vw", height: "21vh" }}
							loading={false}
							bordered
							hoverable>
							<Skeleton loading={loading} active avatar>
								<Meta
									avatar={<Avatar shape="square" size="large" src={bucket} />}
									title="存储桶"
									description="This is the description"
								/>
							</Skeleton>
						</Card>
						<Card
							style={{ width: "13.5vw", height: "21vh" }}
							loading={false}
							bordered
							hoverable>
							<Skeleton loading={loading} active avatar>
								<Meta
									avatar={<Avatar shape="square" size="large" src={file} />}
									title="文件"
									description="This is the description"
								/>
							</Skeleton>
						</Card>
						<Card
							style={{ width: "13.5vw", height: "21vh" }}
							loading={false}
							bordered
							hoverable>
							<Skeleton loading={loading} active avatar>
								<Meta
									avatar={<Avatar shape="square" size="large" src={flux} />}
									title="总量"
									description="This is the description"
								/>
							</Skeleton>
						</Card>
					</div>
					<div style={{ width: "55%" }}>
						<ProCard bordered boxShadow>
							<Skeleton loading={loading} active>
								<ReactECharts option={option} />
							</Skeleton>
						</ProCard>
					</div>
				</div>
				<div>
					<ProCard
						bordered
						boxShadow
						style={{
							marginTop: "30px",
						}}
						title={"文件上传热力图"}>
						<CalendarHeatmap
							startDate={new Date("2024-01-01")}
							endDate={new Date("2024-12-31")}
							showMonthLabels={true}
							horizontal={true}
							showWeekdayLabels={false}
							monthLabels={[
								"一月",
								"二月",
								"三月",
								"四月",
								"五月",
								"六月",
								"七月",
								"八月",
								"九月",
								"十月",
								"十一月",
								"十二月",
							]}
							weekdayLabels={["周日", "周一", "周二", "周三", "周四", "周五", "周六"]}
							gutterSize={3}
							values={[
								{ date: "2024-01-02", count: 12 },
								{ date: "2024-05-3", count: 122 },
								{ date: "2024-06-30", count: 38 },
							]}></CalendarHeatmap>
					</ProCard>
				</div>
				<div className={styles.home_content_list}>
					<ProCard bordered boxShadow style={{ width: "49%" }}>
						<ProList<DataItem>
							rowKey="id"
							headerTitle="最近上传文件"
							dataSource={dataSource}
							showActions="hover"
							editable={{
								onSave: async (key, record, originRow) => {
									console.log(key, record, originRow);
									return true;
								},
							}}
							onDataSourceChange={setDataSource}
							metas={{
								title: {
									dataIndex: "name",
								},
								avatar: {
									dataIndex: "image",
									editable: false,
								},
								description: {
									dataIndex: "desc",
								},
								subTitle: {
									render: () => {
										return (
											<Space size={0}>
												<Tag color="blue">Ant Design</Tag>
												<Tag color="#5BD8A6">TechUI</Tag>
											</Space>
										);
									},
								},
							}}
						/>
					</ProCard>
					<ProCard bordered boxShadow style={{ width: "49%" }}>
						<ProList<DataItem>
							rowKey="id"
							headerTitle="最近浏览文件"
							dataSource={dataSource}
							showActions="hover"
							editable={{
								onSave: async (key, record, originRow) => {
									console.log(key, record, originRow);
									return true;
								},
							}}
							onDataSourceChange={setDataSource}
							metas={{
								title: {
									dataIndex: "name",
								},
								avatar: {
									dataIndex: "image",
									editable: false,
								},
								description: {
									dataIndex: "desc",
								},
								subTitle: {
									render: () => {
										return (
											<Space size={0}>
												<Tag color="blue">Ant Design</Tag>
												<Tag color="#5BD8A6">TechUI</Tag>
											</Space>
										);
									},
								},
							}}
						/>
					</ProCard>
				</div>
			</div>
		</>
	);
};
export default MainHome;
