/*
 * @Author: rocosen
 * @Date: 2022-06-12 10:05:13
 * @LastEditors: 吴永生 15770852798@163.com
 * @LastEditTime: 2022-09-01 11:51:16
 * @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import { memo, useMemo } from "react";
import { Box } from "@mui/system";
import { observer } from "mobx-react-lite";
import { useLocation } from "react-router-dom";

import WorkbenchTemplate from "./workbenchTemplate";
import WorkbenchList from "./workbenchList";
import Tabs from "@/components/mui/Tabs";
import usePass from "@/hooks/usePass";
import Template from "@/assets/project/workbenchTemplate.svg";
import TemplateSelect from "@/assets/project/workbenchTemplate_select.svg";
import TemplateHover from "@/assets/project/workbenchTemplate_hover.svg";
import List from "@/assets/project/workbenchList.svg";
import ListHover from "@/assets/project/workbenchList_hover.svg";
import ListSelect from "@/assets/project/workbenchList_select.svg";

const ProjectWorkbench = observer(() => {
	const isPass = usePass();
	const location: any = useLocation();

	const tabList = useMemo(() => {
		return [
			{
				label: "工作流模版",
				value: "workbenchTemplate",
				component: <WorkbenchTemplate />,
				hide: !isPass("PROJECT_WORKBENCH_FLOES"),
				icon: Template,
				iconed: TemplateSelect,
				iconHover: TemplateHover,
			},
			{
				label: "任务列表",
				value: "workbenchList",
				component: <WorkbenchList />,
				hide: !isPass("PROJECT_WORKBENCH_JOBS"),
				icon: List,
				iconed: ListSelect,
				iconHover: ListHover,
			},
		];
	}, [isPass]);

	return (
		<div style={{ padding: "28px 24px 24px" }}>
			<div style={{ display: "flex", alignItems: "center" }}>
				<span
					style={{
						fontSize: "18px",
						lineHeight: "26px",
						fontWeight: "600",
						color: "#1E2633",
						marginBottom: "3px",
					}}
				>
					工作台
				</span>
			</div>
			<Box sx={{ width: "100%", typography: "body1" }}>
				<Tabs
					tabList={tabList}
					defaultValue={location?.state?.type || "workbenchTemplate"}
				/>
			</Box>
		</div>
	);
});

export default memo(ProjectWorkbench);
