{{- $global := . }}
{{- $templateID := printf "%s_%s" .Package .StructName }}
{{- if .IsAdd }}
// ============ 新增字段配置 ============

// 搜索表单新增字段
{{- range .Fields}}
	{{- if .FieldSearchType}}
{{ GenerateReactSearchFormItem . }}
	{{- end }}
{{- end }}

// 表格列新增配置
{{- range .Fields}}
	{{- if .Table}}
{{ GenerateReactTableColumn . }}
	{{- end }}
{{- end }}

// 表单新增字段
{{- range .Fields}}
	{{- if .Form}}
{{ GenerateReactFormItem . }}
	{{- end }}
{{- end }}

// 详情新增字段
{{- range .Fields}}
	{{- if .Desc }}
{{ GenerateReactDescriptionItem . }}
	{{- end }}
{{- end }}

{{- else }}
{{- if not .OnlyTemplate}}
/**
 * KRA - {{.Description}}管理页面
 * Auto-generated by KRA AutoCode
 */
import React, { useState, useRef, useEffect } from 'react';
import { PageContainer, ProTable } from '@ant-design/pro-components';
import type { ActionType, ProColumns } from '@ant-design/pro-components';
import {
	Button,
	Space,
	Modal,
	message,
	Form,
	Input,
	Tag,
	{{- if .HasTimer }}
	DatePicker,
	{{- end }}
	{{- if or .DictTypes .HasDataSource }}
	Select,
	{{- end }}
	Drawer,
	Descriptions,
	Popconfirm,
	{{- if .HasPic }}
	Image,
	{{- end }}
	{{- if .IsTree }}
	TreeSelect,
	{{- end }}
	{{- if .HasRichText }}
	Typography,
	{{- end }}
} from 'antd';
import type { FormInstance } from 'antd/es/form';
import {
	PlusOutlined,
	DeleteOutlined,
	EditOutlined,
	EyeOutlined,
	{{- if .IsTree }}
	PlusCircleOutlined,
	{{- end }}
} from '@ant-design/icons';
import {
	create{{.StructName}},
	delete{{.StructName}},
	delete{{.StructName}}ByIds,
	update{{.StructName}},
	find{{.StructName}},
	get{{.StructName}}List,
	{{- if .HasDataSource }}
	get{{.StructName}}DataSource,
	{{- end }}
} from '@/services/kratos/{{.PackageName}}';
import type { {{.StructName}} } from '@/services/kratos/{{.PackageName}}';
{{- if .DictTypes }}
import { useDictionary } from '@/hooks/useDictionary';
{{- end }}
import dayjs from 'dayjs';

const {{.StructName}}Page: React.FC = () => {
	// 表格操作引用
	const actionRef = useRef<ActionType>();
	const formRef = useRef<FormInstance>(null);

	// 状态定义
	const [drawerVisible, setDrawerVisible] = useState(false);
	const [drawerType, setDrawerType] = useState<'create' | 'edit'>('create');
	const [detailVisible, setDetailVisible] = useState(false);
	const [currentRecord, setCurrentRecord] = useState<{{.StructName}} | null>(null);
	const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
	const [btnLoading, setBtnLoading] = useState(false);
	{{- if .HasDataSource }}
	const [dataSource, setDataSource] = useState<Record<string, Array<{ label: string; value: any }>>>({});
	{{- end }}
	{{- if .IsTree }}
	const [treeData, setTreeData] = useState<{{.StructName}}[]>([]);
	{{- end }}

	{{- if .DictTypes }}
	// 字典数据
	{{- range $index, $element := .DictTypes}}
	const { options: {{$element}}Options, getLabel: get{{$element | toPascalCase}}Label } = useDictionary('{{$element}}');
	{{- end }}
	{{- end }}

	{{- if .HasDataSource }}
	// 获取数据源
	const fetchDataSource = async () => {
		try {
			const res = await get{{.StructName}}DataSource();
			if (res.code === 0) {
				setDataSource(res.data || {});
			}
		} catch (error) {
			console.error('获取数据源失败:', error);
		}
	};

	useEffect(() => {
		fetchDataSource();
	}, []);
	{{- end }}

	// 新增
	const handleAdd = ({{- if .IsTree -}}parentRecord?: {{.StructName}}{{- end -}}) => {
		setDrawerType('create');
		setCurrentRecord({{- if .IsTree -}}parentRecord ? { parentID: parentRecord.{{.PrimaryField.FieldJson}} } as {{.StructName}} : {{- end -}}null);
		setDrawerVisible(true);
	};

	// 编辑
	const handleEdit = async (record: {{.StructName}}) => {
		try {
			const res = await find{{.StructName}}({ {{.PrimaryField.FieldJson}}: record.{{.PrimaryField.FieldJson}}! });
			if (res.code === 0) {
				setDrawerType('edit');
				setCurrentRecord(res.data);
				setDrawerVisible(true);
			}
		} catch (error) {
			message.error('获取详情失败');
		}
	};

	// 查看详情
	const handleDetail = async (record: {{.StructName}}) => {
		try {
			const res = await find{{.StructName}}({ {{.PrimaryField.FieldJson}}: record.{{.PrimaryField.FieldJson}}! });
			if (res.code === 0) {
				setCurrentRecord(res.data);
				setDetailVisible(true);
			}
		} catch (error) {
			message.error('获取详情失败');
		}
	};

	// 删除
	const handleDelete = async (record: {{.StructName}}) => {
		try {
			const res = await delete{{.StructName}}({ {{.PrimaryField.FieldJson}}: record.{{.PrimaryField.FieldJson}}! });
			if (res.code === 0) {
				message.success('删除成功');
				actionRef.current?.reload();
			} else {
				message.error(res.msg || '删除失败');
			}
		} catch (error) {
			message.error('删除失败');
		}
	};

	// 批量删除
	const handleBatchDelete = async () => {
		if (selectedRowKeys.length === 0) {
			message.warning('请选择要删除的数据');
			return;
		}
		Modal.confirm({
			title: '确认删除',
			content: `确定要删除选中的 ${selectedRowKeys.length} 条数据吗？`,
			onOk: async () => {
				try {
					const res = await delete{{.StructName}}ByIds({ {{.PrimaryField.FieldJson}}s: selectedRowKeys as {{ GenerateTSType .PrimaryField.FieldType }}[] });
					if (res.code === 0) {
						message.success('删除成功');
						setSelectedRowKeys([]);
						actionRef.current?.reload();
					} else {
						message.error(res.msg || '删除失败');
					}
				} catch (error) {
					message.error('删除失败');
				}
			},
		});
	};

	// 关闭抽屉
	const handleDrawerClose = () => {
		setDrawerVisible(false);
		setCurrentRecord(null);
		formRef.current?.resetFields();
	};

	// 提交表单
	const handleSubmit = async () => {
		try {
			const values = await formRef.current?.validateFields();
			setBtnLoading(true);
			const submitData = { ...currentRecord, ...values };
			const res = drawerType === 'create'
				? await create{{.StructName}}(submitData)
				: await update{{.StructName}}(submitData);
			if (res.code === 0) {
				message.success(drawerType === 'create' ? '创建成功' : '更新成功');
				handleDrawerClose();
				actionRef.current?.reload();
			} else {
				message.error(res.msg || (drawerType === 'create' ? '创建失败' : '更新失败'));
			}
		} catch (error) {
			// 表单验证失败
		} finally {
			setBtnLoading(false);
		}
	};

	// 表格列定义
	const columns: ProColumns<{{.StructName}}>[] = [
		{{- if .GvaModel }}
		{
			title: '创建时间',
			dataIndex: 'CreatedAt',
			valueType: 'dateTime',
			width: 180,
			sorter: true,
			hideInSearch: true,
		},
		{{- end }}
		{{- range .Fields}}
		{{- if .Table}}
		{{ GenerateReactProTableColumn . }}
		{{- end }}
		{{- end }}
		{
			title: '操作',
			valueType: 'option',
			fixed: 'right',
			width: {{- if .IsTree -}}280{{- else -}}200{{- end }},
			render: (_, record) => [
				{{- if .IsTree }}
				<Button
					key="addChild"
					type="link"
					size="small"
					icon={<PlusCircleOutlined />}
					onClick={() => handleAdd(record)}
				>
					新增子节点
				</Button>,
				{{- end }}
				<Button
					key="detail"
					type="link"
					size="small"
					icon={<EyeOutlined />}
					onClick={() => handleDetail(record)}
				>
					查看
				</Button>,
				<Button
					key="edit"
					type="link"
					size="small"
					icon={<EditOutlined />}
					onClick={() => handleEdit(record)}
				>
					编辑
				</Button>,
				{{- if .IsTree }}
				!record.children?.length && (
				{{- end }}
				<Popconfirm
					key="delete"
					title="确定删除吗？"
					onConfirm={() => handleDelete(record)}
					okText="确定"
					cancelText="取消"
				>
					<Button type="link" size="small" danger icon={<DeleteOutlined />}>
						删除
					</Button>
				</Popconfirm>
				{{- if .IsTree }}
				)
				{{- end }},
			],
		},
	];

	return (
		<PageContainer>
			<ProTable<{{.StructName}}>
				actionRef={actionRef}
				columns={columns}
				rowKey="{{.PrimaryField.FieldJson}}"
				scroll={{ "{{" }} x: 'max-content' {{ "}}" }}
				rowSelection={{
					selectedRowKeys,
					onChange: (keys) => setSelectedRowKeys(keys),
				}}
				request={async (params, sort) => {
					// 处理排序
					const sortKey = Object.keys(sort || {})[0];
					let orderKey = '';
					if (sortKey) {
						// 排序字段映射
						const sortMap: Record<string, string> = {
							CreatedAt: 'created_at',
							ID: 'id',
							{{- range .Fields}}
							{{- if .Table}}
							{{- if .Sort}}
							{{- if .ColumnName}}
							{{.FieldJson}}: '{{.ColumnName}}',
							{{- end}}
							{{- end}}
							{{- end}}
							{{- end}}
						};
						orderKey = sortMap[sortKey] || sortKey.replace(/[A-Z]/g, (match) => `_${match.toLowerCase()}`);
					}
					try {
						const res = await get{{.StructName}}List({
							page: params.current || 1,
							pageSize: params.pageSize || 10,
							{{- range .Fields}}
							{{- if .FieldSearchType}}
							{{- if eq .FieldSearchType "BETWEEN"}}
							start{{.FieldName}}: params.start{{.FieldName}},
							end{{.FieldName}}: params.end{{.FieldName}},
							{{- else}}
							{{.FieldJson}}: params.{{.FieldJson}},
							{{- end}}
							{{- end }}
							{{- end }}
							{{- if .GvaModel }}
							startCreatedAt: params.startCreatedAt,
							endCreatedAt: params.endCreatedAt,
							{{- end }}
							orderKey: orderKey,
							desc: sort?.[sortKey] === 'descend',
						});
						{{- if .IsTree }}
						if (res.code === 0) {
							setTreeData(res.data || []);
						}
						return {
							data: res.data || [],
							success: res.code === 0,
						};
						{{- else }}
						return {
							data: res.data?.list || [],
							total: res.data?.total || 0,
							success: res.code === 0,
						};
						{{- end }}
					} catch (error) {
						return {
							data: [],
							total: 0,
							success: false,
						};
					}
				}}
				pagination={{- if .IsTree -}}={false}{{- else -}}={{
					defaultPageSize: 10,
					showSizeChanger: true,
					pageSizeOptions: ['10', '30', '50', '100'],
					showTotal: (total) => `共 ${total} 条`,
				}}{{- end }}
				search={{
					labelWidth: 'auto',
					collapsed: true,
					collapseRender: (collapsed) => (collapsed ? '展开' : '收起'),
					defaultCollapsed: true,
					span: {{- if .GvaModel -}}6{{- else -}}8{{- end }},
				}}
				toolBarRender={() => [
					<Button
						key="add"
						type="primary"
						icon={<PlusOutlined />}
						onClick={() => handleAdd()}
					>
						新增
					</Button>,
					<Button
						key="delete"
						danger
						icon={<DeleteOutlined />}
						disabled={selectedRowKeys.length === 0}
						onClick={handleBatchDelete}
					>
						批量删除
					</Button>,
				]}
			/>

			{/* 新增/编辑抽屉 */}
			<Drawer
				title={drawerType === 'create' ? '新增{{.Description}}' : '编辑{{.Description}}'}
				open={drawerVisible}
				onClose={handleDrawerClose}
				width={600}
				destroyOnClose
				extra={
					<Space>
						<Button onClick={handleDrawerClose}>取消</Button>
						<Button type="primary" loading={btnLoading} onClick={handleSubmit}>
							确定
						</Button>
					</Space>
				}
			>
				<Form
					ref={formRef}
					layout="vertical"
					initialValues={currentRecord || {}}
				>
					{{- if .IsTree }}
					<Form.Item name="parentID" label="父节点">
						<TreeSelect
							placeholder="请选择父节点"
							allowClear
							treeData={[{ {{.PrimaryField.FieldJson}}: 0, {{.TreeJson}}: '根节点', children: treeData }]}
							fieldNames={{ "{{" }} label: '{{.TreeJson}}', value: '{{.PrimaryField.FieldJson}}', children: 'children' {{ "}}" }}
							treeDefaultExpandAll
						/>
					</Form.Item>
					{{- end }}
					{{- range .Fields}}
					{{- if .Form}}
					{{ GenerateReactFormItem . }}
					{{- end }}
					{{- end }}
				</Form>
			</Drawer>

			{/* 详情抽屉 */}
			<Drawer
				title="{{.Description}}详情"
				open={detailVisible}
				onClose={() => {
					setDetailVisible(false);
					setCurrentRecord(null);
				}}
				width={600}
			>
				{currentRecord && (
					<Descriptions column={1} bordered>
						{{- if .IsTree }}
						<Descriptions.Item label="父节点">{currentRecord.parentID || '根节点'}</Descriptions.Item>
						{{- end }}
						{{- range .Fields}}
						{{- if .Desc }}
						{{ GenerateReactDescriptionItem . }}
						{{- end }}
						{{- end }}
						{{- if .GvaModel }}
						<Descriptions.Item label="创建时间">
							{currentRecord.CreatedAt ? dayjs(currentRecord.CreatedAt).format('YYYY-MM-DD HH:mm:ss') : '-'}
						</Descriptions.Item>
						<Descriptions.Item label="更新时间">
							{currentRecord.UpdatedAt ? dayjs(currentRecord.UpdatedAt).format('YYYY-MM-DD HH:mm:ss') : '-'}
						</Descriptions.Item>
						{{- end }}
					</Descriptions>
				)}
			</Drawer>
		</PageContainer>
	);
};

export default {{.StructName}}Page;
{{- else}}
/**
 * KRA - {{.Description}}页面
 * Auto-generated by KRA AutoCode
 */
import React from 'react';
import { PageContainer } from '@ant-design/pro-components';

const {{.StructName}}Page: React.FC = () => {
	return (
		<PageContainer>
			<div>{{.Description}}页面</div>
		</PageContainer>
	);
};

export default {{.StructName}}Page;
{{- end }}
{{- end }}