// 【重要】必须使用 const Component 作为组件变量名
// ONEOS-web - CRM 客户管理-新增（高保真还原分组表单样式）

const Component = function () {
	var antd = window.antd;
	var Form = antd.Form;
	var Input = antd.Input;
	var Select = antd.Select;
	var Button = antd.Button;
	var Row = antd.Row;
	var Col = antd.Col;
	var Card = antd.Card;
	var Layout = antd.Layout;
	var Breadcrumb = antd.Breadcrumb;
	var Cascader = antd.Cascader;

	var Content = Layout.Content;

	var _form = Form.useForm();
	var form = _form[0];

	/** 区域 — 省-市级联（示例数据） */
	var regionOptions = [
		{ value: 'zj', label: '浙江省', children: [
			{ value: 'zj-hz', label: '杭州市' },
			{ value: 'zj-jx', label: '嘉兴市' },
			{ value: 'zj-nb', label: '宁波市' }
		] },
		{ value: 'sh', label: '上海市', children: [
			{ value: 'sh-pu', label: '上海市' }
		] },
		{ value: 'js', label: '江苏省', children: [
			{ value: 'js-nj', label: '南京市' },
			{ value: 'js-sz', label: '苏州市' }
		] },
		{ value: 'gd', label: '广东省', children: [
			{ value: 'gd-gz', label: '广州市' },
			{ value: 'gd-sz', label: '深圳市' }
		] }
	];

	/** 示例业务部门和负责人数据 */
	var deptManagerMap = {
		'销售一部': ['张伟', '王芳', '周杰', '陈静', '许晴'],
		'销售二部': ['刘洋', '孙丽', '曹阳'],
		'市场开拓部': ['吴磊', '赵敏', '韩雪'],
		'大客户部': ['李强', '郑华', '冯涛']
	};
	var departmentOptions = Object.keys(deptManagerMap).map(function(dept) {
		return { label: dept, value: dept };
	});

	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' } },
		React.createElement('style', null, `
			.arco-grouped-form-page { display: flex; flex-direction: column; min-height: 100vh; }
			.arco-grouped-form-page-content { flex: 1; padding: 16px 20px 24px; }
			.arco-grouped-form-page .ant-card { margin-bottom: 16px; border-radius: 4px; border: none; box-shadow: 0 1px 2px rgba(0,0,0,0.06); }
			.arco-grouped-form-page .ant-card-head { border-bottom: none; padding: 20px 24px 0; min-height: auto; }
			.arco-grouped-form-page .ant-card-head-title { font-size: 16px; font-weight: 500; color: #1d2129; padding: 0; }
			.arco-grouped-form-page .ant-card-body { padding: 24px; }
			
			/* 表单样式复刻 */
			.arco-grouped-form-page .ant-form-vertical .ant-form-item-label { padding-bottom: 8px; }
			.arco-grouped-form-page .ant-form-item-label > label { color: #4e5969; font-size: 14px; font-weight: 400; }
			.arco-grouped-form-page .ant-form-item-label > label::after { display: none !important; }
			.arco-grouped-form-page .ant-form-item { margin-bottom: 24px; }
			
			/* 输入框和下拉框样式复刻 */
			.arco-grouped-form-page .ant-input, 
			.arco-grouped-form-page .ant-select-selector { border-radius: 2px; border-color: #e5e6eb; height: 32px; transition: all 0.1s cubic-bezier(0, 0, 1, 1); box-shadow: none !important; }
			.arco-grouped-form-page .ant-input:hover, 
			.arco-grouped-form-page .ant-select:not(.ant-select-disabled):hover .ant-select-selector { border-color: #165dff; }
			.arco-grouped-form-page .ant-input:focus, 
			.arco-grouped-form-page .ant-input-focused, 
			.arco-grouped-form-page .ant-select-focused .ant-select-selector { border-color: #165dff; box-shadow: 0 0 0 2px rgba(22, 93, 255, 0.2) !important; }
			.arco-grouped-form-page .ant-select-selection-item, 
			.arco-grouped-form-page .ant-select-selection-placeholder { line-height: 30px !important; }
			
			/* 后缀输入框样式复刻 */
			.arco-grouped-form-page .ant-input-group-addon { background-color: #f2f3f5; border: 1px solid #e5e6eb; border-left: 0; border-radius: 0 2px 2px 0; color: #4e5969; padding: 0 12px; }
			.arco-grouped-form-page .ant-input-wrapper { display: flex; align-items: stretch; }
			.arco-grouped-form-page .ant-input-group > .ant-input:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: 0; }
			.arco-grouped-form-page .ant-input-group > .ant-input:first-child:focus,
			.arco-grouped-form-page .ant-input-group > .ant-input:first-child:hover { border-right: 1px solid #165dff; z-index: 1; }
			
			/* 底部操作栏 */
			.arco-grouped-form-footer { background: #fff; padding: 16px 24px; border-top: 1px solid #e5e6eb; display: flex; justify-content: flex-end; align-items: center; gap: 12px; position: sticky; bottom: 0; z-index: 100; box-shadow: 0 -2px 10px rgba(0,0,0,0.05); }
			.arco-grouped-form-footer .ant-btn { border-radius: 5px; height: 32px; padding: 4px 16px; font-size: 14px; }
			.arco-grouped-form-footer .ant-btn-primary { background-color: #165dff; border-color: #165dff; }
			.arco-grouped-form-footer .ant-btn-primary:hover { background-color: #4080ff; border-color: #4080ff; }
			
			.arco-grouped-form-page .ant-breadcrumb { color: #86909c; font-size: 14px; margin-bottom: 16px; }
			.arco-grouped-form-page .ant-breadcrumb a { color: #4e5969; }
			.arco-grouped-form-page .ant-breadcrumb a:hover { color: #165dff; background-color: transparent; }
			
			/* 级联选择器下拉菜单宽度一致 (强行控制宽度和两列平分) */
			.customer-full-width-cascader-popup { min-width: 100% !important; }
			.customer-full-width-cascader-popup .ant-cascader-menu { width: 50%; min-width: 0; }
		`),
		React.createElement('div', { className: 'arco-grouped-form-page' },
			React.createElement('div', { className: 'arco-grouped-form-page-content' },
				// 面包屑导航
				React.createElement(Breadcrumb, {
					separator: React.createElement('span', { style: { color: '#c9cdd4' } }, '/'),
					items: [
						{ title: '首页' },
						{ title: '业务管理' },
						{ title: '客户管理' },
						{ title: React.createElement('span', { style: { color: '#1d2129' } }, '新增') }
					]
				}),
				
				// 表单主体
				React.createElement(Form, { form: form, layout: 'vertical' },
					// 客户信息组
					React.createElement(Card, { title: '客户信息', bordered: false },
						React.createElement(Row, { gutter: 24 },
							React.createElement(Col, { span: 8 },
								React.createElement(Form.Item, { label: '客户类型', name: 'customerType', rules: [{ required: true, message: '请选择客户类型' }] },
									React.createElement(Select, { placeholder: '请选择客户类型', options: [{ label: '企业', value: '企业' }, { label: '个人', value: '个人' }, { label: '事业单位', value: '事业单位' }] })
								)
							),
							React.createElement(Col, { span: 8 },
								React.createElement(Form.Item, { label: '客户分级', name: 'customerLevel' },
									React.createElement(Select, { placeholder: '请选择客户分级', options: [{ label: 'A', value: 'A' }, { label: 'B', value: 'B' }, { label: 'C', value: 'C' }] })
								)
							),
							React.createElement(Col, { span: 8 },
								React.createElement(Form.Item, { label: '客户全称', name: 'customerName', rules: [{ required: true, message: '请输入客户全称' }] },
									React.createElement(Input, { 
										placeholder: '请输入客户全称',
										onChange: function(e) {
											form.setFieldsValue({ invoiceTitle: e.target.value });
										}
									})
								)
							),
							React.createElement(Col, { span: 8 },
								React.createElement(Form.Item, { label: '客户简称', name: 'customerShortName' },
									React.createElement(Input, { placeholder: '请输入客户简称' })
								)
							),
							React.createElement(Col, { span: 8 },
								React.createElement(Form.Item, { label: '所属城市', name: 'city', rules: [{ required: true, message: '请选择所属城市' }] },
									React.createElement(Cascader, {
										options: regionOptions,
										placeholder: '请选择客户所属城市',
										style: { width: '100%' },
										getPopupContainer: function (triggerNode) { return triggerNode.parentNode; },
										popupClassName: 'customer-full-width-cascader-popup'
									})
								)
							),
							React.createElement(Col, { span: 8 },
								React.createElement(Form.Item, { label: '通讯地址', name: 'address' },
									React.createElement(Input, { placeholder: '请输入通讯地址' })
								)
							),
							React.createElement(Col, { span: 8 },
								React.createElement(Form.Item, { label: '业务负责部门', name: 'department', rules: [{ required: true, message: '请选择业务负责部门' }] },
									React.createElement(Select, { 
										placeholder: '请选择业务负责部门', 
										options: departmentOptions,
										onChange: function() { form.setFieldsValue({ manager: undefined }); }
									})
								)
							),
							React.createElement(Col, { span: 8 },
								React.createElement(Form.Item, { 
									noStyle: true,
									shouldUpdate: function(prev, cur) { return prev.department !== cur.department; }
								}, function() {
									var curDept = form.getFieldValue('department');
									var managerOptions = [];
									if (curDept && deptManagerMap[curDept]) {
										managerOptions = deptManagerMap[curDept].map(function(m) { return { label: m, value: m }; });
									}
									return React.createElement(Form.Item, { label: '业务负责人员', name: 'manager', rules: [{ required: true, message: '请选择业务负责人员' }] },
										React.createElement(Select, { 
											placeholder: '请选择业务负责人员',
											options: managerOptions,
											disabled: !curDept
										})
									);
								})
							),
							React.createElement(Col, { span: 24 },
								React.createElement(Form.Item, { label: '备注', name: 'remark' },
									React.createElement(Input.TextArea, { placeholder: '请输入备注', style: { height: 52, minHeight: 52, resize: 'none' } })
								)
							)
						)
					),
					
					// 联系人信息组
					React.createElement(Card, { title: '联系人信息', bordered: false },
						React.createElement(Row, { gutter: 24 },
							React.createElement(Col, { span: 8 },
								React.createElement(Form.Item, { label: '姓名', name: 'contactName' },
									React.createElement(Input, { placeholder: '请输入姓名' })
								)
							),
							React.createElement(Col, { span: 8 },
								React.createElement(Form.Item, { label: '手机号', name: 'contactPhone' },
									React.createElement(Input, { placeholder: '请输入手机号' })
								)
							),
							React.createElement(Col, { span: 8 },
								React.createElement(Form.Item, { label: '职位', name: 'contactPosition' },
									React.createElement(Input, { placeholder: '请输入职位' })
								)
							)
						)
					),

					// 付款及开票信息组
					React.createElement(Card, { title: '付款及开票信息', bordered: false },
						React.createElement(Row, { gutter: 24 },
							React.createElement(Col, { span: 8 },
								React.createElement(Form.Item, { label: '发票抬头', name: 'invoiceTitle', rules: [{ required: true, message: '请先输入客户全称' }] },
									React.createElement(Input, { placeholder: '自动带入客户全称', disabled: true, style: { backgroundColor: '#f2f3f5', color: '#86909c' } })
								)
							),
							React.createElement(Col, { span: 8 },
								React.createElement(Form.Item, { label: '纳税人识别号', name: 'taxId', rules: [{ required: true, message: '请输入纳税人识别号' }] },
									React.createElement(Input, { placeholder: '请输入纳税人识别号' })
								)
							),
							React.createElement(Col, { span: 8 },
								React.createElement(Form.Item, { label: '注册地址', name: 'regAddress' },
									React.createElement(Input, { placeholder: '请输入注册地址' })
								)
							),
							React.createElement(Col, { span: 8 },
								React.createElement(Form.Item, { label: '注册电话', name: 'regPhone' },
									React.createElement(Input, { placeholder: '请输入注册电话' })
								)
							),
							React.createElement(Col, { span: 8 },
								React.createElement(Form.Item, { label: '开户银行', name: 'bankName', rules: [{ required: true, message: '请输入开户银行' }] },
									React.createElement(Input, { placeholder: '请输入开户银行' })
								)
							),
							React.createElement(Col, { span: 8 },
								React.createElement(Form.Item, { label: '账号', name: 'bankAccount' },
									React.createElement(Input, { placeholder: '请输入账号' })
								)
							)
						)
					)
				)
			),
			// 底部操作栏
			React.createElement('div', { className: 'arco-grouped-form-footer' },
				React.createElement(Button, { onClick: function () { form.resetFields(); } }, '重置'),
				React.createElement(Button, { type: 'primary', onClick: function () { form.submit(); } }, '提交')
			)
		)
	);
};

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