// 【重要】必须使用 const Component 作为组件变量名
// ONEOS-web 示例项目 - CRM 新建供应商 (完美复刻 Arco Design Pro 分组表单)

const Component = function () {
	var useState = React.useState;

	var antd = window.antd;
	var Button = antd.Button;
	var Space = antd.Space;
	var Input = antd.Input;
	var Select = antd.Select;
	var Cascader = antd.Cascader;
	var Form = antd.Form;
	var Row = antd.Row;
	var Col = antd.Col;
	var Breadcrumb = antd.Breadcrumb;
	var Menu = antd.Menu;
	var Layout = antd.Layout;
	var message = antd.message;
	var Typography = antd.Typography;
	var Avatar = antd.Avatar;
	var Badge = antd.Badge;
	var Card = antd.Card;

	var Header = Layout.Header;
	var Content = Layout.Content;
	var Sider = Layout.Sider;
	var Title = Typography.Title;

	var _currentMenu = useState('crm-supplier');
	var currentMenu = _currentMenu[0];
	var setCurrentMenu = _currentMenu[1];

	var handleMenuClick = function (e) {
		setCurrentMenu(e.key);
		if (e.key === 'contract-list') {
			message.info('跳转至 合同列表');
			window.location.hash = '合同列表';
		} else if (e.key === 'erp-order') {
			message.info('跳转至 ERP 订单管理');
			window.location.hash = '订单管理';
		} else if (e.key === 'asset-overview') {
			message.info('跳转至 资产概览');
			window.location.hash = '资产概览';
		} else if (e.key === 'crm-list') {
			message.info('跳转至 客户列表');
			window.location.hash = '客户列表';
		} else if (e.key === 'crm-supplier') {
			message.info('跳转至 供应商管理');
			window.location.hash = '供应商管理';
		}
	};

	// 自定义 SVG 图标（高保真还原 Arco 风格）
	var SettingIcon = function() { return React.createElement('svg', { viewBox: '0 0 48 48', width: 16, height: 16, fill: 'none', stroke: 'currentColor', strokeWidth: 4 }, React.createElement('path', { d: 'M18.797 6.732A1 1 0 0 1 19.76 6h8.48a1 1 0 0 1 .964.732l1.285 4.628a1 1 0 0 0 1.213.7l4.651-1.2a1 1 0 0 1 1.116.468l4.24 7.344a1 1 0 0 1-.153 1.2L38.193 23.3a1 1 0 0 0 0 1.402l3.364 3.427a1 1 0 0 1 .153 1.2l-4.24 7.344a1 1 0 0 1-1.116.468l-4.65-1.2a1 1 0 0 0-1.214.7l-1.285 4.628a1 1 0 0 1-.964.732h-8.48a1 1 0 0 1-.963-.732L17.51 36.64a1 1 0 0 0-1.213-.7l-4.65 1.2a1 1 0 0 1-1.116-.468l-4.24-7.344a1 1 0 0 1 .153-1.2L9.809 24.7a1 1 0 0 0 0-1.402l-3.364-3.427a1 1 0 0 1-.153-1.2l4.24-7.344a1 1 0 0 1 1.116-.468l4.65 1.2a1 1 0 0 0 1.213-.7l1.286-4.628Z' }), React.createElement('path', { d: 'M30 24a6 6 0 1 1-12 0 6 6 0 0 1 12 0Z' })); };
	var NoticeIcon = function() { return React.createElement('svg', { viewBox: '0 0 48 48', width: 18, height: 18, fill: 'none', stroke: 'currentColor', strokeWidth: 4 }, React.createElement('path', { d: 'M39 34h3v4H6v-4h3V20.218a15 15 0 0 1 30 0V34ZM24 44a6 6 0 0 1-6-6h12a6 6 0 0 1-6 6Z' })); };
	var FormIcon = function() { return React.createElement('svg', { viewBox: '0 0 48 48', width: 14, height: 14, fill: 'none', stroke: 'currentColor', strokeWidth: 4, strokeLinecap: 'butt', strokeLinejoin: 'miter' }, React.createElement('path', { d: 'M18.797 6.732A1 1 0 0 1 19.76 6h8.48a1 1 0 0 1 .964.732l1.285 4.628a1 1 0 0 0 1.213.7l4.651-1.2a1 1 0 0 1 1.116.468l4.24 7.344a1 1 0 0 1-.153 1.2L38.193 23.3a1 1 0 0 0 0 1.402l3.364 3.427a1 1 0 0 1 .153 1.2l-4.24 7.344a1 1 0 0 1-1.116.468l-4.65-1.2a1 1 0 0 0-1.214.7l-1.285 4.628a1 1 0 0 1-.964.732h-8.48a1 1 0 0 1-.963-.732L17.51 36.64a1 1 0 0 0-1.213-.7l-4.65 1.2a1 1 0 0 1-1.116-.468l-4.24-7.344a1 1 0 0 1 .153-1.2L9.809 24.7a1 1 0 0 0 0-1.402l-3.364-3.427a1 1 0 0 1-.153-1.2l4.24-7.344a1 1 0 0 1 1.116-.468l4.65 1.2a1 1 0 0 0 1.213-.7l1.286-4.628Z' }), React.createElement('path', { d: 'M30 24a6 6 0 1 1-12 0 6 6 0 0 1 12 0Z' })); };

	var menuItems = [
		{ 
			key: 'contract', 
			label: '合同管理', 
			icon: React.createElement('span', { className: 'anticon' }, '📄'),
			children: [
				{ key: 'contract-list', label: '合同列表' }
			]
		},
		{ 
			key: 'crm', 
			label: 'CRM 管理', 
			icon: React.createElement('span', { className: 'anticon' }, '👥'),
			children: [
				{ key: 'crm-list', label: '客户列表' },
				{ key: 'crm-supplier', label: '供应商管理' },
				{ key: 'crm-analysis', label: 'CRM 分析' }
			]
		},
		{ 
			key: 'erp', 
			label: 'ERP 订单管理', 
			icon: React.createElement('span', { className: 'anticon' }, '📦'),
			children: [
				{ key: 'erp-order', label: '订单管理' }
			]
		},
		{ 
			key: 'asset', 
			label: '资产管理', 
			icon: React.createElement('span', { className: 'anticon' }, '🚗'),
			children: [
				{ key: 'asset-overview', label: '资产概览' }
			]
		}
	];

	// 供应商类型下拉选项
	var supplierTypeOptions = [
		{ label: '整车企业', value: '整车企业' },
		{ label: '车辆外租企业', value: '车辆外租企业' },
		{ label: '加氢站', value: '加氢站' },
		{ label: '充电站', value: '充电站' },
		{ label: '维修站', value: '维修站' },
		{ label: '备件供应商', value: '备件供应商' },
		{ label: '保险公司', value: '保险公司' },
		{ label: '救援车队', value: '救援车队' },
		{ label: '其他', value: '其他' }
	];

	return React.createElement(Layout, { className: 'arco-theme-overrides', style: { minHeight: '100vh', background: '#f2f3f5', fontFamily: 'Inter, Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif' } },
		// 内联 CSS 以实现最高保真度的 Arco UI
		React.createElement('style', null, `
			.arco-theme-overrides .ant-btn { border-radius: 4px; box-shadow: none; font-size: 14px; }
			.arco-theme-overrides .ant-btn-primary { background-color: #165dff; border-color: #165dff; }
			.arco-theme-overrides .ant-btn-primary:hover { background-color: #4080ff; border-color: #4080ff; }
			.arco-theme-overrides .ant-btn-default { background-color: #f2f3f5; border-color: transparent; color: #4e5969; }
			.arco-theme-overrides .ant-btn-default:hover { background-color: #e5e6eb; border-color: transparent; color: #4e5969; }
			.arco-theme-overrides .ant-menu-light .ant-menu-item-selected { background-color: #f2f9fe; color: #165dff; }
			.arco-theme-overrides .ant-menu-light .ant-menu-item-selected::after { border-right-color: #165dff; }
			
			/* 输入组件默认、Hover、Focus样式复刻 */
			.arco-theme-overrides .ant-input, .arco-theme-overrides .ant-select-selector, .arco-theme-overrides .ant-cascader { border-radius: 2px; border: 1px solid #e5e6eb; background-color: #f2f3f5; transition: all 0.1s cubic-bezier(0, 0, 1, 1); }
			.arco-theme-overrides .ant-input:hover, .arco-theme-overrides .ant-select:not(.ant-select-disabled):hover .ant-select-selector, .arco-theme-overrides .ant-cascader:hover { background-color: #e5e6eb; border-color: transparent; }
			.arco-theme-overrides .ant-input:focus, .arco-theme-overrides .ant-input-focused, .arco-theme-overrides .ant-select-focused .ant-select-selector, .arco-theme-overrides .ant-cascader-focused { background-color: #fff; border: 1px solid #165dff !important; box-shadow: 0 0 0 2px rgba(22, 93, 255, 0.2) !important; outline: 0; }
			
			/* 垂直表单标签样式复刻 */
			.arco-theme-overrides .ant-form-vertical .ant-form-item-label { padding: 0 0 8px; line-height: 1.5715; }
			.arco-theme-overrides .ant-form-vertical .ant-form-item-label > label { color: #1d2129; font-weight: 400; height: auto; }
			.arco-theme-overrides .ant-form-item-label > label::after { display: none !important; content: "" !important; margin: 0 !important; }
			.arco-theme-overrides .ant-form-item { margin-bottom: 24px; }
			
			/* 卡片样式复刻 */
			.arco-theme-overrides .ant-card { border: none; border-radius: 4px; margin-bottom: 16px; background: transparent; }
			.arco-theme-overrides .ant-card-body { padding: 20px 20px 0 20px; background: #fff; }
			
			/* 标题样式复刻 */
			.arco-theme-overrides .arco-section-title { font-size: 16px; font-weight: 500; color: #1d2129; margin-bottom: 20px; }
			
			/* 输入框高度统一 */
			.arco-theme-overrides .ant-input, .arco-theme-overrides .ant-select-selector, .arco-theme-overrides .ant-cascader .ant-select-selector { height: 32px !important; min-height: 32px !important; display: flex; align-items: center; padding: 0 12px; }
			.arco-theme-overrides .ant-input { padding: 4px 12px; }
			.arco-theme-overrides .ant-select-selection-item { line-height: 30px !important; }
			
			.arco-theme-overrides .ant-breadcrumb { color: #86909c; font-size: 14px; }
			.arco-theme-overrides .ant-breadcrumb a { color: #4e5969; }
			.arco-theme-overrides .ant-breadcrumb a:hover { color: #165dff; background-color: transparent; }
		`),
		// 顶部 Header
		React.createElement(Header, { 
			style: { 
				background: '#fff', 
				padding: '0 20px', 
				display: 'flex', 
				justifyContent: 'space-between', 
				alignItems: 'center', 
				borderBottom: '1px solid #e5e6eb', 
				height: 60,
				position: 'fixed',
				top: 0,
				left: 0,
				right: 0,
				zIndex: 100
			} 
		},
			// 左侧 Logo
			React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 12 } },
				React.createElement('div', { style: { width: 32, height: 32, background: '#165dff', borderRadius: 4, display: 'flex', justifyContent: 'center', alignItems: 'center', color: '#fff', fontWeight: 'bold' } }, 'A'),
				React.createElement('div', { style: { fontSize: '20px', fontWeight: '600', color: '#1d2129', letterSpacing: '0.5px' } }, 'Arco Pro')
			),
			// 右侧工具栏
			React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 20 } },
				React.createElement(Input.Search, { placeholder: '搜索功能', style: { width: 220, borderRadius: 16 } }),
				React.createElement(Badge, { dot: true, offset: [-2, 4] },
					React.createElement('span', { style: { color: '#4e5969', cursor: 'pointer', display: 'flex' }, title: '消息通知' }, React.createElement(NoticeIcon, null))
				),
				React.createElement('span', { style: { color: '#4e5969', cursor: 'pointer', display: 'flex' }, title: '设置' }, React.createElement(SettingIcon, null)),
				React.createElement(Avatar, { size: 32, src: 'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp', style: { cursor: 'pointer' } })
			)
		),
		// 下方主体内容
		React.createElement(Layout, { style: { paddingTop: 60 } },
			// 左侧菜单 Sider
			React.createElement(Sider, {
				width: 220,
				style: {
					background: '#fff',
					borderRight: '1px solid #e5e6eb',
					position: 'fixed',
					top: 60,
					left: 0,
					height: 'calc(100vh - 60px)',
					overflowY: 'auto',
					zIndex: 99
				}
			},
				React.createElement(Menu, {
					mode: 'inline',
					selectedKeys: [currentMenu],
					defaultOpenKeys: ['crm'],
					items: menuItems,
					onClick: handleMenuClick,
					style: { borderRight: 'none', padding: '8px', background: '#fff' }
				})
			),
			// 右侧内容 Content
			React.createElement(Content, { style: { marginLeft: 220, padding: '16px 20px 60px 20px', minHeight: 'calc(100vh - 60px)', display: 'flex', flexDirection: 'column' } },
				React.createElement('div', { style: { padding: '16px 20px 0 20px', marginBottom: 0, background: '#fff' } },
					React.createElement(Breadcrumb, { 
						separator: React.createElement('span', { style: { color: '#c9cdd4' } }, '/'),
						items: [
							{ title: React.createElement(FormIcon, { style: { display: 'inline-flex', alignItems: 'center', fontSize: 14, transform: 'translate(-2px, 1px)' } }) }, 
							{ title: '表单页' }, 
							{ title: React.createElement('span', { style: { color: '#1d2129' } }, '分组表单') }
						] 
					}),
					React.createElement(Title, { level: 4, style: { marginTop: 16, marginBottom: 20, fontWeight: 700, color: '#1d2129', fontSize: 16 } }, '新建供应商')
				),
				
				React.createElement('div', { style: { padding: '0', display: 'flex', flexDirection: 'column', flex: 1 } },
					React.createElement(Form, { layout: 'vertical' },
						
						// 供应商信息分组
						React.createElement(Card, { bordered: false, bodyStyle: { padding: '20px 20px 0 20px' } },
							React.createElement('div', { className: 'arco-section-title' }, '供应商信息'),
							React.createElement(Row, { gutter: 24 },
								React.createElement(Col, { span: 8 },
									React.createElement(Form.Item, { label: '供应商名称', required: true },
										React.createElement(Input, { placeholder: '请输入供应商名称' })
									)
								),
								React.createElement(Col, { span: 8 },
									React.createElement(Form.Item, { label: '类型', required: true },
										React.createElement(Select, { placeholder: '请选择类型', options: supplierTypeOptions })
									)
								),
								React.createElement(Col, { span: 8 },
									React.createElement(Form.Item, { label: '所属城市' },
										React.createElement(Cascader, { placeholder: '请选择省-市', options: [{ value: 'zhejiang', label: '浙江', children: [{ value: 'hangzhou', label: '杭州' }, { value: 'ningbo', label: '宁波' }] }, { value: 'jiangsu', label: '江苏', children: [{ value: 'nanjing', label: '南京' }] }] })
									)
								),
								React.createElement(Col, { span: 8 },
									React.createElement(Form.Item, { label: '所在地址' },
										React.createElement(Input, { placeholder: '请输入所在地址' })
									)
								),
								React.createElement(Col, { span: 8 },
									React.createElement(Form.Item, { label: '区域' },
										React.createElement(Input, { placeholder: '请输入区域' })
									)
								),
								React.createElement(Col, { span: 8 },
									React.createElement(Form.Item, { label: '业务负责部门' },
										React.createElement(Input, { placeholder: '请输入业务负责部门' })
									)
								),
								React.createElement(Col, { span: 8 },
									React.createElement(Form.Item, { label: '业务负责人员' },
										React.createElement(Input, { placeholder: '请输入业务负责人员' })
									)
								),
								React.createElement(Col, { span: 24 },
									React.createElement(Form.Item, { label: '备注' },
										React.createElement(Input.TextArea, { placeholder: '请输入备注', autoSize: { minRows: 3, maxRows: 5 }, style: { height: 'auto', minHeight: 'auto' } })
									)
								)
							)
						),
						
						// 联系人信息分组
						React.createElement(Card, { bordered: false, bodyStyle: { padding: '20px 20px 0 20px' } },
							React.createElement('div', { className: 'arco-section-title' }, '联系人信息'),
							React.createElement(Row, { gutter: 24 },
								React.createElement(Col, { span: 8 },
									React.createElement(Form.Item, { label: '姓名' },
										React.createElement(Input, { placeholder: '请输入姓名' })
									)
								),
								React.createElement(Col, { span: 8 },
									React.createElement(Form.Item, { label: '手机号' },
										React.createElement(Input, { placeholder: '请输入手机号' })
									)
								),
								React.createElement(Col, { span: 8 },
									React.createElement(Form.Item, { label: '职位' },
										React.createElement(Input, { placeholder: '请输入职位' })
									)
								)
							)
						),
						
						// 付款及开票信息分组
						React.createElement(Card, { bordered: false, bodyStyle: { padding: '20px 20px 0 20px', marginBottom: 16 } },
							React.createElement('div', { className: 'arco-section-title' }, '付款及开票信息'),
							React.createElement(Row, { gutter: 24 },
								React.createElement(Col, { span: 8 },
									React.createElement(Form.Item, { label: '纳税人识别号' },
										React.createElement(Input, { placeholder: '请输入纳税人识别号' })
									)
								),
								React.createElement(Col, { span: 8 },
									React.createElement(Form.Item, { label: '注册地址' },
										React.createElement(Input, { placeholder: '请输入注册地址' })
									)
								),
								React.createElement(Col, { span: 8 },
									React.createElement(Form.Item, { label: '注册电话' },
										React.createElement(Input, { placeholder: '请输入注册电话' })
									)
								),
								React.createElement(Col, { span: 8 },
									React.createElement(Form.Item, { label: '开户行' },
										React.createElement(Input, { placeholder: '请输入开户行' })
									)
								),
								React.createElement(Col, { span: 8 },
									React.createElement(Form.Item, { label: '账号' },
										React.createElement(Input, { placeholder: '请输入账号' })
									)
								)
							)
						)
					)
				)
			)
		),
		
		// 底部固定操作栏
		React.createElement('div', { 
			style: { 
				position: 'fixed', 
				bottom: 0, 
				right: 0, 
				width: 'calc(100% - 220px)', 
				padding: '16px 20px', 
				background: '#fff', 
				borderTop: '1px solid #e5e6eb', 
				textAlign: 'right',
				zIndex: 100
			} 
		},
			React.createElement(Space, { size: 16 },
				React.createElement(Button, { size: 'large', onClick: function() { message.info('重置成功'); } }, '重置'),
				React.createElement(Button, { type: 'primary', size: 'large', onClick: function() { message.success('提交成功'); } }, '提交')
			)
		)
	);
};

if (typeof module !== 'undefined' && module.exports) module.exports = Component;