// 【重要】必须使用 const Component 作为组件变量名
// 集成登录页 + 工作台 于单页面
const Component = function () {
	var _React$useState = React.useState("login");
	var page = _React$useState[0];
	var setPage = _React$useState[1];

	// 登录页状态
	var _React$useState2 = React.useState("");
	var account = _React$useState2[0];
	var setAccount = _React$useState2[1];
	var _React$useState3 = React.useState("");
	var password = _React$useState3[0];
	var setPassword = _React$useState3[1];
	var _React$useState4 = React.useState(false);
	var agreed = _React$useState4[0];
	var setAgreed = _React$useState4[1];

	// 工作台状态
	var _React$useState5 = React.useState(0);
	var activeTab = _React$useState5[0];
	var setActiveTab = _React$useState5[1];

	var todos = [
		{ id: 1, title: "审批设备巡检报告", status: "待处理", time: "今天" },
		{ id: 2, title: "处理加氢站异常告警", status: "进行中", time: "今天" },
		{ id: 3, title: "完成月度资产盘点", status: "待处理", time: "本周" }
	];
	var stats = [
		{ label: "待办任务", value: "8", color: "#07c160" },
		{ label: "本周完成", value: "23", color: "#576b95" },
		{ label: "告警待处理", value: "2", color: "#fa5151" }
	];
	var navItems = [
		{ key: 0, icon: "\uD83D\uDCCA", text: "工作台" },
		{ key: 1, icon: "\uD83D\uDCC4", text: "业务" },
		{ key: 2, icon: "\uD83D\uDC64", text: "我的" }
	];

	var handleLogin = function () {
		if (!agreed) {
			alert("请先阅读并同意用户服务协议和隐私政策");
			return;
		}
		setPage("workbench");
	};

	var styles = {
		loginPage: {
			minHeight: "100vh",
			backgroundColor: "#f7f7f7",
			padding: "40px 24px 24px",
			boxSizing: "border-box",
			display: "flex",
			flexDirection: "column",
			alignItems: "center"
		},
		logo: { width: "80px", height: "80px", backgroundColor: "#07c160", borderRadius: "16px", display: "flex", alignItems: "center", justifyContent: "center", marginBottom: "20px", color: "#fff", fontSize: "16px", fontWeight: "bold", textAlign: "center", lineHeight: "1.3" },
		title: { fontSize: "20px", fontWeight: "600", color: "#333", textAlign: "center", marginBottom: "40px", lineHeight: "1.5", maxWidth: "280px" },
		form: { width: "100%", maxWidth: "340px" },
		inputGroup: { marginBottom: "16px" },
		input: { width: "100%", height: "48px", padding: "0 16px", fontSize: "16px", border: "1px solid #e5e5e5", borderRadius: "8px", backgroundColor: "#fff", boxSizing: "border-box", outline: "none" },
		checkboxRow: { display: "flex", alignItems: "center", marginBottom: "24px", cursor: "pointer" },
		checkbox: { width: "18px", height: "18px", marginRight: "8px", accentColor: "#07c160", cursor: "pointer" },
		agreement: { fontSize: "14px", color: "#666", lineHeight: "1.5" },
		link: { color: "#07c160", textDecoration: "none" },
		loginBtn: { width: "100%", height: "48px", backgroundColor: "#07c160", color: "#fff", fontSize: "17px", fontWeight: "500", border: "none", borderRadius: "8px", cursor: "pointer", marginBottom: "32px" },
		loginBtnDisabled: { width: "100%", height: "48px", backgroundColor: "#b0b0b0", color: "#fff", fontSize: "17px", fontWeight: "500", border: "none", borderRadius: "8px", cursor: "not-allowed", marginBottom: "32px" },
		divider: { display: "flex", alignItems: "center", width: "100%", maxWidth: "340px", marginBottom: "24px" },
		dividerLine: { flex: 1, height: "1px", backgroundColor: "#e5e5e5" },
		dividerText: { padding: "0 16px", fontSize: "14px", color: "#999" },
		phoneLogin: { display: "flex", flexDirection: "column", alignItems: "center" },
		iconLabel: { fontSize: "14px", color: "#999", marginTop: "8px" },
		iconBtn: { width: "48px", height: "48px", borderRadius: "50%", backgroundColor: "#fff", border: "1px solid #e5e5e5", display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", fontSize: "24px" },
		workbenchPage: { minHeight: "100vh", backgroundColor: "#f7f7f7", paddingBottom: "70px", boxSizing: "border-box" },
		header: { backgroundColor: "#fff", padding: "24px 20px", marginBottom: "12px" },
		headerTitle: { fontSize: "22px", fontWeight: "600", color: "#333", marginBottom: "4px" },
		headerSub: { fontSize: "14px", color: "#999" },
		statsRow: { display: "flex", padding: "0 12px 12px", marginBottom: "12px" },
		statCard: { flex: 1, backgroundColor: "#fff", borderRadius: "8px", padding: "20px 12px", textAlign: "center", margin: "0 6px" },
		statValue: { fontSize: "24px", fontWeight: "600", marginBottom: "8px" },
		statLabel: { fontSize: "13px", color: "#999" },
		section: { backgroundColor: "#fff", padding: "20px", marginBottom: "12px" },
		sectionTitle: { fontSize: "17px", fontWeight: "600", color: "#333", marginBottom: "16px", display: "flex", justifyContent: "space-between", alignItems: "center" },
		sectionMore: { fontSize: "14px", color: "#07c160" },
		todoItem: { display: "flex", alignItems: "center", padding: "14px 0", borderBottom: "1px solid #f0f0f0" },
		todoLeft: { flex: 1 },
		todoTitle: { fontSize: "15px", color: "#333", marginBottom: "4px" },
		todoMeta: { fontSize: "12px", color: "#999" },
		todoStatus: { fontSize: "12px", padding: "4px 10px", borderRadius: "4px", backgroundColor: "#e8f5e9", color: "#07c160" },
		todoStatusDoing: { fontSize: "12px", padding: "4px 10px", borderRadius: "4px", backgroundColor: "#fff3e0", color: "#ff9800" },
		bottomNav: { position: "fixed", bottom: 0, left: 0, right: 0, height: "60px", backgroundColor: "#fff", display: "flex", borderTop: "1px solid #e5e5e5", boxSizing: "border-box" },
		navItem: { flex: 1, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", cursor: "pointer" },
		navIcon: { fontSize: "24px", marginBottom: "4px" },
		navText: { fontSize: "11px", color: "#999" }
	};

	if (page === "login") {
		return React.createElement("div", { style: styles.loginPage },
			React.createElement("style", null, "input::placeholder{color:#999;opacity:1;}"),
			React.createElement("div", { style: styles.logo }, "羚牛氢能"),
			React.createElement("h1", { style: styles.title }, "数字化资产ONE-OS运管平台"),
			React.createElement("div", { style: styles.form },
				React.createElement("div", { style: styles.inputGroup },
					React.createElement("input", { style: styles.input, type: "text", placeholder: "请输入账号信息", value: account, onChange: function (e) { setAccount(e.target.value); } })
				),
				React.createElement("div", { style: styles.inputGroup },
					React.createElement("input", { style: styles.input, type: "password", placeholder: "请输入密码", value: password, onChange: function (e) { setPassword(e.target.value); } })
				),
				React.createElement("label", { style: styles.checkboxRow },
					React.createElement("input", { style: styles.checkbox, type: "checkbox", checked: agreed, onChange: function (e) { setAgreed(e.target.checked); } }),
					React.createElement("span", { style: styles.agreement },
						"阅读并同意",
						React.createElement("a", { href: "#", style: styles.link }, "《用户服务协议》"),
						"和",
						React.createElement("a", { href: "#", style: styles.link }, "《隐私政策》")
					)
				),
				React.createElement("button", { style: agreed ? styles.loginBtn : styles.loginBtnDisabled, onClick: handleLogin, disabled: !agreed }, "登录")
			),
			React.createElement("div", { style: styles.divider },
				React.createElement("div", { style: styles.dividerLine }),
				React.createElement("span", { style: styles.dividerText }, "其他登录方式"),
				React.createElement("div", { style: styles.dividerLine })
			),
			React.createElement("div", { style: styles.phoneLogin },
				React.createElement("div", { style: styles.iconBtn, title: "手机号登录" }, "\uD83D\uDCF1"),
				React.createElement("span", { style: styles.iconLabel }, "授权登录")
			)
		);
	}

	return React.createElement("div", { style: styles.workbenchPage },
		React.createElement("div", { style: styles.header },
			React.createElement("div", { style: styles.headerTitle }, "工作台"),
			React.createElement("div", { style: styles.headerSub }, "欢迎使用 ONE-OS 运管平台")
		),
		React.createElement("div", { style: styles.statsRow },
			stats.map(function (stat, i) {
				var valueStyle = { fontSize: "24px", fontWeight: "600", marginBottom: "8px", color: stat.color };
				return React.createElement("div", { key: i, style: styles.statCard },
					React.createElement("div", { style: valueStyle }, stat.value),
					React.createElement("div", { style: styles.statLabel }, stat.label)
				);
			})
		),
		React.createElement("div", { style: styles.section },
			React.createElement("div", { style: styles.sectionTitle },
				React.createElement("span", null, "待办任务"),
				React.createElement("span", { style: styles.sectionMore }, "全部")
			),
			todos.map(function (todo, i) {
				var isLast = i === todos.length - 1;
				var statusStyle = todo.status === "进行中" ? styles.todoStatusDoing : styles.todoStatus;
				var itemStyle = isLast ? { display: "flex", alignItems: "center", padding: "14px 0", borderBottom: "none" } : styles.todoItem;
				return React.createElement("div", { key: todo.id, style: itemStyle },
					React.createElement("div", { style: styles.todoLeft },
						React.createElement("div", { style: styles.todoTitle }, todo.title),
						React.createElement("div", { style: styles.todoMeta }, todo.time)
					),
					React.createElement("span", { style: statusStyle }, todo.status)
				);
			})
		),
		React.createElement("div", { style: styles.bottomNav },
			navItems.map(function (item) {
				var isActive = activeTab === item.key;
				var textStyle = isActive ? { fontSize: "11px", color: "#07c160" } : styles.navText;
				return React.createElement("div", { key: item.key, style: styles.navItem, onClick: function () { setActiveTab(item.key); } },
					React.createElement("div", { style: styles.navIcon }, item.icon),
					React.createElement("div", { style: textStyle }, item.text)
				);
			})
		)
	);
};