mini-starter/allin-packages/disability-management-ui/src/components/DisabilityManagement.tsx

import React, { useState } from 'react';
import { useQuery, useMutation } from '@tanstack/react-query';
import { Plus, Edit, Trash2, Search } from 'lucide-react';
import { format } from 'date-fns';
import { Input } from '@d8d/shared-ui-components/components/ui/input';
import { Button } from '@d8d/shared-ui-components/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@d8d/shared-ui-components/components/ui/card';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@d8d/shared-ui-components/components/ui/table';
import { Skeleton } from '@d8d/shared-ui-components/components/ui/skeleton';
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@d8d/shared-ui-components/components/ui/dialog';
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@d8d/shared-ui-components/components/ui/form';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { toast } from 'sonner';
import { DataTablePagination } from '@d8d/shared-ui-components/components/admin/DataTablePagination';
import { AreaSelect } from '@d8d/area-management-ui';
import { disabilityClientManager } from '../api/disabilityClient';
import { CreateDisabledPersonSchema, UpdateDisabledPersonSchema } from '@d8d/allin-disability-module/schemas';
import type { CreateDisabledPersonRequest, UpdateDisabledPersonRequest, DisabledPersonData } from '../api/types';

interface DisabilitySearchParams {
  page: number;
  limit: number;
  search: string;
}

const DisabilityManagement: React.FC = () => {
  const [searchParams, setSearchParams] = useState<DisabilitySearchParams>({ page: 1, limit: 10, search: '' });
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [isCreateForm, setIsCreateForm] = useState(true);
  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
  const [personToDelete, setPersonToDelete] = useState<number | null>(null);

  // 表单实例 - 创建表单
  const createForm = useForm<CreateDisabledPersonRequest>({
    resolver: zodResolver(CreateDisabledPersonSchema),
    defaultValues: {
      name: '',
      gender: '男',
      idCard: '',
      disabilityId: '',
      disabilityType: '',
      disabilityLevel: '',
      idAddress: '',
      phone: '',
      province: '',
      city: '',
    }
  });

  // 表单实例 - 更新表单
  const updateForm = useForm<UpdateDisabledPersonRequest>({
    resolver: zodResolver(UpdateDisabledPersonSchema),
    defaultValues: {}
  });

  // 查询残疾人列表
  const { data: disabilityList, isLoading, refetch } = useQuery({
    queryKey: ['disabled-persons', searchParams],
    queryFn: async () => {
      const res = await disabilityClientManager.get().getAllDisabledPersons.$get({
        query: {
          skip: (searchParams.page - 1) * searchParams.limit,
          take: searchParams.limit
        }
      });
      if (res.status !== 200) throw new Error('获取残疾人列表失败');
      return await res.json();
    }
  });

  // 搜索残疾人
  const { data: searchResults } = useQuery({
    queryKey: ['search-disabled-persons', searchParams.search],
    queryFn: async () => {
      if (!searchParams.search.trim()) return null;
      const res = await disabilityClientManager.get().searchDisabledPersons.$get({
        query: {
          keyword: searchParams.search,
          skip: 0,
          take: searchParams.limit
        }
      });
      if (res.status !== 200) throw new Error('搜索残疾人失败');
      return await res.json();
    },
    enabled: !!searchParams.search.trim()
  });

  // 创建残疾人
  const createMutation = useMutation({
    mutationFn: async (data: CreateDisabledPersonRequest) => {
      const res = await disabilityClientManager.get().createDisabledPerson.$post({
        json: data
      });
      return res;
    },
    onSuccess: () => {
      toast.success('残疾人创建成功');
      createForm.reset();
      setIsModalOpen(false);
      refetch();
    },
    onError: (error: any) => {
      toast.error(error.message || '创建残疾人失败');
    }
  });

  // 更新残疾人
  const updateMutation = useMutation({
    mutationFn: async (data: UpdateDisabledPersonRequest) => {
      const res = await disabilityClientManager.get().updateDisabledPerson.$post({
        json: data
      });
      return res;
    },
    onSuccess: () => {
      toast.success('残疾人更新成功');
      updateForm.reset();
      setIsModalOpen(false);
      refetch();
    },
    onError: (error: any) => {
      toast.error(error.message || '更新残疾人失败');
    }
  });

  // 删除残疾人
  const deleteMutation = useMutation({
    mutationFn: async (id: number) => {
      const res = await disabilityClientManager.get().deleteDisabledPerson.$post({
        json: { id }
      });
      return res;
    },
    onSuccess: () => {
      toast.success('残疾人删除成功');
      setDeleteDialogOpen(false);
      setPersonToDelete(null);
      refetch();
    },
    onError: (error: any) => {
      toast.error(error.message || '删除残疾人失败');
    }
  });

  // 处理区域选择变化
  const handleAreaChange = (form: any, areaValue: { provinceId?: number; cityId?: number; districtId?: number }) => {
    // 这里需要将区域ID转换为区域名称
    // 实际实现中需要调用区域服务获取名称
    form.setValue('province', areaValue.provinceId?.toString() || '');
    form.setValue('city', areaValue.cityId?.toString() || '');
    if (areaValue.districtId) {
      form.setValue('district', areaValue.districtId.toString());
    }
  };

  // 打开创建模态框
  const handleOpenCreateModal = () => {
    setIsCreateForm(true);
    createForm.reset();
    setIsModalOpen(true);
  };

  // 打开更新模态框
  const handleOpenUpdateModal = (person: DisabledPersonData) => {
    setIsCreateForm(false);
    updateForm.reset({
      id: person.id,
      name: person.name,
      gender: person.gender,
      idCard: person.idCard,
      disabilityId: person.disabilityId,
      disabilityType: person.disabilityType,
      disabilityLevel: person.disabilityLevel,
      idAddress: person.idAddress,
      phone: person.phone,
      province: person.province,
      city: person.city,
      district: person.district || '',
      detailedAddress: person.detailedAddress || '',
      nation: person.nation || '',
      isMarried: person.isMarried || 0,
      canDirectContact: person.canDirectContact,
      jobStatus: person.jobStatus,
    });
    setIsModalOpen(true);
  };

  // 打开删除确认对话框
  const handleOpenDeleteDialog = (id: number) => {
    setPersonToDelete(id);
    setDeleteDialogOpen(true);
  };

  // 处理创建表单提交
  const handleCreateSubmit = createForm.handleSubmit((data) => {
    createMutation.mutate(data);
  }, (errors) => console.debug('创建表单验证错误:', errors));

  // 处理更新表单提交
  const handleUpdateSubmit = updateForm.handleSubmit((data) => {
    updateMutation.mutate(data);
  }, (errors) => console.debug('更新表单验证错误:', errors));

  // 处理删除
  const handleDelete = () => {
    if (personToDelete) {
      deleteMutation.mutate(personToDelete);
    }
  };

  // 处理搜索
  const handleSearch = (e: React.FormEvent) => {
    e.preventDefault();
    refetch();
  };

  const displayData = searchParams.search.trim() ? searchResults?.data : disabilityList?.data;
  const displayTotal = searchParams.search.trim() ? searchResults?.total : disabilityList?.total;

  return (
    <div className="space-y-6">
      <Card>
        <CardHeader>
          <CardTitle>残疾人管理</CardTitle>
          <CardDescription>管理残疾人信息，包括创建、更新、删除和查询功能</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="flex justify-between items-center mb-6">
            <form onSubmit={handleSearch} className="flex items-center space-x-2">
              <Input
                placeholder="搜索姓名或身份证号..."
                value={searchParams.search}
                onChange={(e) => setSearchParams({ ...searchParams, search: e.target.value })}
                className="w-64"
                data-testid="search-input"
              />
              <Button type="submit" size="sm" data-testid="search-button">
                <Search className="h-4 w-4 mr-2" />
                搜索
              </Button>
            </form>
            <Button onClick={handleOpenCreateModal} data-testid="create-button">
              <Plus className="h-4 w-4 mr-2" />
              新增残疾人
            </Button>
          </div>

          {isLoading ? (
            <div className="space-y-2">
              {Array.from({ length: 5 }).map((_, i) => (
                <Skeleton key={i} className="h-12 w-full" />
              ))}
            </div>
          ) : (
            <>
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>姓名</TableHead>
                    <TableHead>性别</TableHead>
                    <TableHead>身份证号</TableHead>
                    <TableHead>残疾证号</TableHead>
                    <TableHead>残疾类型</TableHead>
                    <TableHead>联系电话</TableHead>
                    <TableHead>创建时间</TableHead>
                    <TableHead>操作</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {displayData?.map((person) => (
                    <TableRow key={person.id} data-testid={`person-row-${person.id}`}>
                      <TableCell>{person.name}</TableCell>
                      <TableCell>{person.gender}</TableCell>
                      <TableCell>{person.idCard}</TableCell>
                      <TableCell>{person.disabilityId}</TableCell>
                      <TableCell>{person.disabilityType}</TableCell>
                      <TableCell>{person.phone}</TableCell>
                      <TableCell>{format(new Date(person.createTime), 'yyyy-MM-dd HH:mm')}</TableCell>
                      <TableCell>
                        <div className="flex space-x-2">
                          <Button
                            variant="outline"
                            size="sm"
                            onClick={() => handleOpenUpdateModal(person)}
                            data-testid={`edit-button-${person.id}`}
                          >
                            <Edit className="h-4 w-4" />
                          </Button>
                          <Button
                            variant="outline"
                            size="sm"
                            onClick={() => handleOpenDeleteDialog(person.id)}
                            data-testid={`delete-button-${person.id}`}
                          >
                            <Trash2 className="h-4 w-4" />
                          </Button>
                        </div>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>

              {displayData?.length === 0 && (
                <div className="text-center py-8 text-muted-foreground">
                  暂无数据
                </div>
              )}

              {displayTotal && displayTotal > 0 && (
                <DataTablePagination
                  totalCount={displayTotal}
                  pageSize={searchParams.limit}
                  currentPage={searchParams.page}
                  onPageChange={(page, pageSize) => setSearchParams({ ...searchParams, page, limit: pageSize })}
                />
              )}
            </>
          )}
        </CardContent>
      </Card>

      {/* 创建/更新模态框 */}
      <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
        <DialogContent className="max-w-2xl">
          <DialogHeader>
            <DialogTitle>{isCreateForm ? '新增残疾人' : '编辑残疾人'}</DialogTitle>
            <DialogDescription>
              {isCreateForm ? '填写残疾人信息' : '修改残疾人信息'}
            </DialogDescription>
          </DialogHeader>
          {isCreateForm ? (
            <Form {...createForm}>
              <form onSubmit={handleCreateSubmit} className="space-y-4">
                <div className="grid grid-cols-2 gap-4">
                  <FormField
                    control={createForm.control}
                    name="name"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel>姓名 *</FormLabel>
                        <FormControl>
                          <Input placeholder="请输入姓名" {...field} data-testid="name-input" />
                        </FormControl>
                        <FormMessage />
                      </FormItem>
                    )}
                  />
                  <FormField
                    control={createForm.control}
                    name="gender"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel>性别 *</FormLabel>
                        <FormControl>
                          <select
                            className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
                            {...field}
                            data-testid="gender-select"
                          >
                            <option value="男">男</option>
                            <option value="女">女</option>
                          </select>
                        </FormControl>
                        <FormMessage />
                      </FormItem>
                    )}
                  />
                  <FormField
                    control={createForm.control}
                    name="idCard"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel>身份证号 *</FormLabel>
                        <FormControl>
                          <Input placeholder="请输入身份证号" {...field} data-testid="id-card-input" />
                        </FormControl>
                        <FormMessage />
                      </FormItem>
                    )}
                  />
                  <FormField
                    control={createForm.control}
                    name="disabilityId"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel>残疾证号 *</FormLabel>
                        <FormControl>
                          <Input placeholder="请输入残疾证号" {...field} data-testid="disability-id-input" />
                        </FormControl>
                        <FormMessage />
                      </FormItem>
                    )}
                  />
                  <FormField
                    control={createForm.control}
                    name="disabilityType"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel>残疾类型 *</FormLabel>
                        <FormControl>
                          <Input placeholder="请输入残疾类型" {...field} data-testid="disability-type-input" />
                        </FormControl>
                        <FormMessage />
                      </FormItem>
                    )}
                  />
                  <FormField
                    control={createForm.control}
                    name="disabilityLevel"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel>残疾等级 *</FormLabel>
                        <FormControl>
                          <Input placeholder="请输入残疾等级" {...field} data-testid="disability-level-input" />
                        </FormControl>
                        <FormMessage />
                      </FormItem>
                    )}
                  />
                  <FormField
                    control={createForm.control}
                    name="phone"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel>联系电话 *</FormLabel>
                        <FormControl>
                          <Input placeholder="请输入联系电话" {...field} data-testid="phone-input" />
                        </FormControl>
                        <FormMessage />
                      </FormItem>
                    )}
                  />
                  <FormField
                    control={createForm.control}
                    name="idAddress"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel>身份证地址 *</FormLabel>
                        <FormControl>
                          <Input placeholder="请输入身份证地址" {...field} data-testid="id-address-input" />
                        </FormControl>
                        <FormMessage />
                      </FormItem>
                    )}
                  />
                  <FormItem>
                    <FormLabel>所在地区 *</FormLabel>
                    <FormControl>
                      <AreaSelect
                        value={{}}
                        onChange={(value) => handleAreaChange(createForm, value)}
                        required
                        data-testid="area-select"
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                  <FormField
                    control={createForm.control}
                    name="detailedAddress"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel>详细地址</FormLabel>
                        <FormControl>
                          <Input placeholder="请输入详细地址" {...field} data-testid="detailed-address-input" />
                        </FormControl>
                        <FormMessage />
                      </FormItem>
                    )}
                  />
                  <FormField
                    control={createForm.control}
                    name="nation"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel>民族</FormLabel>
                        <FormControl>
                          <Input placeholder="请输入民族" {...field} data-testid="nation-input" />
                        </FormControl>
                        <FormMessage />
                      </FormItem>
                    )}
                  />
                </div>
                <DialogFooter>
                  <Button type="button" variant="outline" onClick={() => setIsModalOpen(false)}>
                    取消
                  </Button>
                  <Button type="submit" disabled={createMutation.isPending} data-testid="create-submit-button">
                    {createMutation.isPending ? '创建中...' : '创建'}
                  </Button>
                </DialogFooter>
              </form>
            </Form>
          ) : (
            <Form {...updateForm}>
              <form onSubmit={handleUpdateSubmit} className="space-y-4">
                <div className="grid grid-cols-2 gap-4">
                  <FormField
                    control={updateForm.control}
                    name="name"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel>姓名 *</FormLabel>
                        <FormControl>
                          <Input placeholder="请输入姓名" {...field} data-testid="update-name-input" />
                        </FormControl>
                        <FormMessage />
                      </FormItem>
                    )}
                  />
                  <FormField
                    control={updateForm.control}
                    name="gender"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel>性别 *</FormLabel>
                        <FormControl>
                          <select
                            className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
                            {...field}
                            data-testid="update-gender-select"
                          >
                            <option value="男">男</option>
                            <option value="女">女</option>
                          </select>
                        </FormControl>
                        <FormMessage />
                      </FormItem>
                    )}
                  />
                  <FormField
                    control={updateForm.control}
                    name="idCard"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel>身份证号 *</FormLabel>
                        <FormControl>
                          <Input placeholder="请输入身份证号" {...field} data-testid="update-id-card-input" />
                        </FormControl>
                        <FormMessage />
                      </FormItem>
                    )}
                  />
                  <FormField
                    control={updateForm.control}
                    name="disabilityId"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel>残疾证号 *</FormLabel>
                        <FormControl>
                          <Input placeholder="请输入残疾证号" {...field} data-testid="update-disability-id-input" />
                        </FormControl>
                        <FormMessage />
                      </FormItem>
                    )}
                  />
                  <FormField
                    control={updateForm.control}
                    name="disabilityType"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel>残疾类型 *</FormLabel>
                        <FormControl>
                          <Input placeholder="请输入残疾类型" {...field} data-testid="update-disability-type-input" />
                        </FormControl>
                        <FormMessage />
                      </FormItem>
                    )}
                  />
                  <FormField
                    control={updateForm.control}
                    name="disabilityLevel"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel>残疾等级 *</FormLabel>
                        <FormControl>
                          <Input placeholder="请输入残疾等级" {...field} data-testid="update-disability-level-input" />
                        </FormControl>
                        <FormMessage />
                      </FormItem>
                    )}
                  />
                  <FormField
                    control={updateForm.control}
                    name="phone"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel>联系电话 *</FormLabel>
                        <FormControl>
                          <Input placeholder="请输入联系电话" {...field} data-testid="update-phone-input" />
                        </FormControl>
                        <FormMessage />
                      </FormItem>
                    )}
                  />
                  <FormField
                    control={updateForm.control}
                    name="idAddress"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel>身份证地址 *</FormLabel>
                        <FormControl>
                          <Input placeholder="请输入身份证地址" {...field} data-testid="update-id-address-input" />
                        </FormControl>
                        <FormMessage />
                      </FormItem>
                    )}
                  />
                  <FormItem>
                    <FormLabel>所在地区 *</FormLabel>
                    <FormControl>
                      <AreaSelect
                        value={{}}
                        onChange={(value) => handleAreaChange(updateForm, value)}
                        required
                        data-testid="update-area-select"
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                  <FormField
                    control={updateForm.control}
                    name="detailedAddress"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel>详细地址</FormLabel>
                        <FormControl>
                          <Input placeholder="请输入详细地址" {...field} data-testid="update-detailed-address-input" />
                        </FormControl>
                        <FormMessage />
                      </FormItem>
                    )}
                  />
                  <FormField
                    control={updateForm.control}
                    name="nation"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel>民族</FormLabel>
                        <FormControl>
                          <Input placeholder="请输入民族" {...field} data-testid="update-nation-input" />
                        </FormControl>
                        <FormMessage />
                      </FormItem>
                    )}
                  />
                </div>
                <DialogFooter>
                  <Button type="button" variant="outline" onClick={() => setIsModalOpen(false)}>
                    取消
                  </Button>
                  <Button type="submit" disabled={updateMutation.isPending} data-testid="update-submit-button">
                    {updateMutation.isPending ? '更新中...' : '更新'}
                  </Button>
                </DialogFooter>
              </form>
            </Form>
          )}
        </DialogContent>
      </Dialog>

      {/* 删除确认对话框 */}
      <Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>确认删除</DialogTitle>
            <DialogDescription>
              确定要删除这个残疾人记录吗？此操作不可恢复。
            </DialogDescription>
          </DialogHeader>
          <DialogFooter>
            <Button variant="outline" onClick={() => setDeleteDialogOpen(false)}>
              取消
            </Button>
            <Button variant="destructive" onClick={handleDelete} disabled={deleteMutation.isPending} data-testid="confirm-delete-button">
              {deleteMutation.isPending ? '删除中...' : '确认删除'}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
};

export default DisabilityManagement;