import { useEffect, useState } from "react";
import SearchInput from "@/components/BusinessComponents/SearchInput";
import MyButton from "@/components/mui/MyButton";
import MySelect from "@/components/mui/MySelect";
import Add from "@mui/icons-material/Add";
import CardTable from "@/components/CommonComponents/CardTable";
import useMyRequest from "@/hooks/useMyRequest";
import { getWorkflowspecList } from "@/api/resourceCenter";
import style from "./index.module.css";

const UserResourcesTemplate = () => {
	const [title, setTitle] = useState("");
	const [product, setProduct] = useState("");
	const [list, setList] = useState([]);
	const renderItem = (item: any) => {
		return (
			<div className={style.templateBox}>
				<div className={style.templateTop}>
					<div className={style.templateTopItem}>{item.productId}</div>
					<div className={style.templateTopLine}></div>
					<div className={style.templateTopItem}>{item.version}</div>
					<div className={style.templateTopLine}></div>
					<div className={style.templateTopItem}>{item.updatedTime}</div>
				</div>
				<div className={style.templateTitleBox}>
					<img src="" alt="" />
					<div className={style.templateTitle}>{item.title}</div>
				</div>
				<div className={style.templateDesc}>
					{item.description}
					啊手动阀卡拉实际付款啦世界的分厘卡就是啊手动阀卡拉实际付款啦世界的分厘卡就是啊手动阀卡拉实际付款啦世界的分厘卡就是啊手动阀卡拉实际付款啦世界的分厘卡就是啊手动阀卡拉实际付款啦世界的分厘卡就是啊手动阀卡拉实际付款啦世界的分厘卡就是啊手动阀卡拉实际付款啦世界的分厘卡就是啊手动阀卡拉实际付款啦世界的分厘卡就是啊手动阀卡拉实际付款啦世界的分厘卡就是
				</div>
				<div className={style.templateButtons}>
					<div className={style.templateBL}>
						<span className={style.button}>升级</span>
					</div>
					<div className={style.templateBR}>
						<MyButton
							text="删除"
							variant="outlined"
							style={{
								border: "1px solid rgba(221, 225, 230, 1)",
								color: "rgba(138, 144, 153, 1)",
								marginRight: "12px",
							}}
						></MyButton>
						<MyButton text="查看" variant="outlined"></MyButton>
					</div>
				</div>
			</div>
		);
	};
	//   createdAt
	// createdTime
	// creator
	// :
	// description
	// favorited
	// id
	// productId
	// title
	// updatedAt
	// updatedTime
	// updater
	// version

	// 获取模板列表
	const { run } = useMyRequest(getWorkflowspecList, {
		onSuccess: (result: any) => {
			setList(result.data);
		},
	});

	useEffect(() => {
		run({
			productId: "cadd",
		});
	}, [run]);

	return (
		<div className={style.template}>
			<div className={style.top}>
				<div className={style.topLeft}>
					<SearchInput
						sx={{ width: 340, marginRight: "16px" }}
						onKeyUp={(e: any) => {
							if (e.keyCode === 13) {
								setTitle(e.target.value);
							}
						}}
					></SearchInput>
					<MySelect
						title="产品类型"
						isTitle={true}
						options={[
							{
								label: "全部",
								value: "ALL",
							},
							{
								label: "批式",
								value: "BATCH",
							},
							{
								label: "流式",
								value: "FLOW",
							},
						]}
						value={product}
						onChange={(e: any) => setProduct(e)}
						sx={{ width: "150px", height: "32px" }}
					></MySelect>
				</div>
				<div className={style.topRight}>
					<MyButton
						text="新建自定义模板"
						// onClick={() => setAddopen(true)}
						startIcon={<Add />}
					></MyButton>
				</div>
			</div>
			<div className={style.tableBox}>
				<CardTable data={list} renderItem={renderItem}></CardTable>
			</div>
		</div>
	);
};

export default UserResourcesTemplate;
