mini-starter/web/tests/e2e/pages/admin/disability-person.page.ts

import { Page, Locator } from '@playwright/test';
import { selectRadixOption, selectProvinceCity } from '@d8d/e2e-test-utils';

// 超时配置常量
const TIMEOUTS = {
  SHORT: 300,
  MEDIUM: 500,
  LONG: 1000,
  VERY_SHORT: 200,
} as const;

// 注意：@d8d/e2e-test-utils 包已安装，将在后续 story (2.2, 2.3) 中实际使用
export class DisabilityPersonManagementPage {
  readonly page: Page;
  readonly pageTitle: Locator;
  readonly addPersonButton: Locator;
  readonly keywordSearchInput: Locator;
  readonly searchButton: Locator;
  readonly personTable: Locator;

  constructor(page: Page) {
    this.page = page;
    this.pageTitle = page.getByText('残疾人个人管理');
    this.addPersonButton = page.getByRole('button', { name: '新增残疾人' });
    this.keywordSearchInput = page.getByPlaceholder('搜索姓名或身份证号');
    this.searchButton = page.getByRole('button', { name: '搜索' });
    this.personTable = page.locator('table');
  }

  async goto() {
    await this.page.goto('/admin/disabilities');
    await this.page.waitForLoadState('domcontentloaded');
    // 等待页面标题出现
    await this.pageTitle.waitFor({ state: 'visible', timeout: 15000 });
    // 等待表格数据加载
    await this.page.waitForSelector('table tbody tr', { state: 'visible', timeout: 20000 });
    await this.expectToBeVisible();
  }

  async expectToBeVisible() {
    await this.pageTitle.waitFor({ state: 'visible', timeout: 15000 });
    await this.addPersonButton.waitFor({ state: 'visible', timeout: 10000 });
  }

  async openCreateDialog() {
    // 监听网络请求
    const responses: any[] = [];
    this.page.on('response', async (response) => {
      if (response.url().includes('disabled-person') || response.url().includes('aggregated')) {
        try {
          const responseData = await response.json().catch(() => ({ status: response.status() }));
          responses.push({
            url: response.url(),
            status: response.status(),
            data: responseData
          });
        } catch (e) {
          responses.push({
            url: response.url(),
            status: response.status(),
            error: e
          });
        }
      }
    });

    await this.addPersonButton.click();
    await this.page.waitForSelector('[data-testid="create-disabled-person-dialog-title"]', { state: 'visible', timeout: 5000 });

    return responses;
  }

  async fillBasicForm(data: {
    name: string;
    gender: string;
    idCard: string;
    disabilityId: string;
    disabilityType: string;
    disabilityLevel: string;
    phone: string;
    idAddress: string;
    province: string;
    city: string;
  }) {
    // 等待表单出现
    const form = this.page.locator('form#create-form');
    await form.waitFor({ state: 'visible', timeout: 5000 });

    console.debug('开始填写表单...');

    // 填写基本信息 - 使用 form locator 确保只在对话框内查找
    await form.getByLabel('姓名 *').fill(data.name);
    console.debug('✓ 姓名已填写:', data.name);

    // 性别 - 使用 data-testid
    const genderTrigger = this.page.locator('[data-testid="gender-select"]');
    await genderTrigger.click();
    await this.page.getByRole('option', { name: data.gender }).click();
    console.debug('✓ 性别已选择:', data.gender);

    await form.getByLabel('身份证号 *').fill(data.idCard);
    console.debug('✓ 身份证号已填写');

    await form.getByLabel('残疾证号 *').fill(data.disabilityId);
    console.debug('✓ 残疾证号已填写');

    // 残疾类型 - 使用 data-testid
    const disabilityTypeTrigger = this.page.locator('[data-testid="disability-type-select"]');
    await disabilityTypeTrigger.scrollIntoViewIfNeeded();
    await this.page.waitForTimeout(200);
    await disabilityTypeTrigger.click();
    await this.page.getByRole('option', { name: data.disabilityType }).click();
    console.debug('✓ 残疾类型已选择:', data.disabilityType);

    // 残疾等级 - 使用 data-testid
    const disabilityLevelTrigger = this.page.locator('[data-testid="disability-level-select"]');
    await disabilityLevelTrigger.scrollIntoViewIfNeeded();
    await this.page.waitForTimeout(200);
    await disabilityLevelTrigger.click();
    await this.page.getByRole('option', { name: data.disabilityLevel }).click();
    console.debug('✓ 残疾等级已选择:', data.disabilityLevel);

    await form.getByLabel('联系电话 *').fill(data.phone);
    console.debug('✓ 联系电话已填写');

    await form.getByLabel('身份证地址 *').fill(data.idAddress);
    console.debug('✓ 身份证地址已填写');

    // 居住地址 - 省市区级联选择
    // AreaSelectForm 使用 data-testid="area-select-province" 等属性
    const provinceTrigger = this.page.locator('[data-testid="area-select-province"]');
    await provinceTrigger.scrollIntoViewIfNeeded();
    await provinceTrigger.click();
    await this.page.getByRole('option', { name: data.province }).click();
    console.debug('✓ 省份已选择:', data.province);

    const cityTrigger = this.page.locator('[data-testid="area-select-city"]');
    await cityTrigger.click();
    await this.page.getByRole('option', { name: data.city }).click();
    console.debug('✓ 城市已选择:', data.city);

    console.debug('表单填写完成');
  }

  async submitForm() {
    // 收集网络响应
    const responses: any[] = [];

    // 监听所有网络请求
    this.page.on('response', async (response) => {
      const url = response.url();
      if (url.includes('disabled-person') || url.includes('aggregated')) {
        const requestBody = response.request()?.postData();
        const responseBody = await response.text().catch(() => '');
        let jsonBody = null;
        try {
          jsonBody = JSON.parse(responseBody);
        } catch (e) {
          // 不是 JSON
        }

        responses.push({
          url,
          method: response.request()?.method(),
          status: response.status(),
          ok: response.ok(),
          requestHeaders: await response.allHeaders().catch(() => ({})),
          responseHeaders: await response.allHeaders().catch(() => ({})),
          requestBody: requestBody ? JSON.parse(requestBody) : null,
          responseBody: jsonBody || responseBody,
          statusText: response.statusText()
        });
      }
    });

    // 点击创建按钮
    const submitButton = this.page.getByRole('button', { name: '创建' });
    await submitButton.click();

    // 等待网络请求完成
    await this.page.waitForLoadState('networkidle', { timeout: 10000 });

    // 等待一段时间让 Toast 消息显示
    await this.page.waitForTimeout(2000);

    // 检查是否有错误提示
    const errorToast = this.page.locator('[data-sonner-toast][data-type="error"]');
    const successToast = this.page.locator('[data-sonner-toast][data-type="success"]');

    const hasError = await errorToast.count() > 0;
    const hasSuccess = await successToast.count() > 0;

    let errorMessage = null;
    let successMessage = null;

    if (hasError) {
      errorMessage = await errorToast.first().textContent();
    }
    if (hasSuccess) {
      successMessage = await successToast.first().textContent();
    }

    return {
      responses,
      hasError,
      hasSuccess,
      errorMessage,
      successMessage
    };
  }

  async searchByName(name: string) {
    await this.keywordSearchInput.fill(name);
    await this.searchButton.click();
    await this.page.waitForLoadState('networkidle');
    await this.page.waitForTimeout(1000);
  }

  async personExists(name: string): Promise<boolean> {
    const personRow = this.personTable.locator('tbody tr').filter({ hasText: name }).first();
    return (await personRow.count()) > 0;
  }

  /**
   * 上传照片
   * @param photoType 照片类型（身份证照片、残疾证照片、个人照片、其他照片）
   * @param fileName 文件名
   */
  async uploadPhoto(photoType: string, fileName: string) {
    // 找到对应照片类型的上传按钮区域
    const photoSection = this.page.locator('text=' + photoType).first();
    await photoSection.scrollIntoViewIfNeeded();

    // 查找该类型照片区域的"上传"按钮
    const uploadButton = photoSection.locator('xpath=ancestor::div[contains(@class, "space-y-")]').first()
      .getByRole('button', { name: /上传/ }).first();

    // 创建测试文件
    const fileInput = await uploadButton.evaluateHandle((el: any) => {
      const input = el.querySelector('input[type="file"]');
      return input;
    });

    // 使用临时文件上传
    const file = {
      name: fileName,
      mimeType: 'image/jpeg',
      buffer: Buffer.from('fake image content')
    };

    await fileInput.uploadFile(file as any);
    await this.page.waitForTimeout(500); // 等待上传处理
    console.log(`  ✓ 上传照片: ${photoType} - ${fileName}`);
  }

  /**
   * 添加银行卡（内联表单模式）
   * @param bankCard 银行卡信息
   */
  async addBankCard(bankCard: {
    bankName: string;
    subBankName: string;
    cardNumber: string;
    cardholderName: string;
    cardType?: string;
    isDefault?: boolean;
  }) {
    // 滚动到银行卡管理区域
    const bankCardLabel = this.page.getByText('银行卡管理');
    await bankCardLabel.scrollIntoViewIfNeeded();
    await this.page.waitForTimeout(TIMEOUTS.SHORT);

    // 获取当前银行卡数量
    const currentCardCount = await this.page.locator('[data-testid^="remove-bank-card-"]').count();

    // 点击"添加银行卡"按钮
    const addButton = this.page.locator('[data-testid="add-bank-card-button"]');
    await addButton.click();
    await this.page.waitForTimeout(500);

    // 等待新的银行卡卡片出现
    const newCardCount = await this.page.locator('[data-testid^="remove-bank-card-"]').count();
    if (newCardCount !== currentCardCount + 1) {
      throw new Error(`添加银行卡失败：预期 ${currentCardCount + 1} 张，实际 ${newCardCount} 张`);
    }

    // 新添加的银行卡索引
    const cardIndex = currentCardCount;

    // 1. 选择银行名称
    const bankSelectTrigger = this.page.locator(`[data-testid="bank-select-${cardIndex}"]`);
    await bankSelectTrigger.click();
    await this.page.waitForTimeout(TIMEOUTS.SHORT);
    await this.page.getByRole('option', { name: bankCard.bankName }).click();

    // 2. 填写发卡支行
    const subBankInput = this.page.locator(`[data-testid="sub-bank-name-input-${cardIndex}"]`);
    await subBankInput.fill(bankCard.subBankName);

    // 3. 填写银行卡号
    const cardNumberInput = this.page.locator(`[data-testid="card-number-input-${cardIndex}"]`);
    await cardNumberInput.fill(bankCard.cardNumber);

    // 4. 填写持卡人姓名
    const cardholderInput = this.page.locator(`[data-testid="cardholder-name-input-${cardIndex}"]`);
    await cardholderInput.fill(bankCard.cardholderName);

    // 5. 选择银行卡类型（可选）
    if (bankCard.cardType) {
      const cardTypeTrigger = this.page.locator(`[data-testid="card-type-select-${cardIndex}"]`);
      await cardTypeTrigger.click();
      await this.page.waitForTimeout(TIMEOUTS.SHORT);
      await this.page.getByRole('option', { name: bankCard.cardType }).click();
    }

    // 6. 设置默认银行卡（可选）
    if (bankCard.isDefault) {
      const defaultSwitch = this.page.locator(`[data-testid="default-card-switch-${cardIndex}"]`);
      const isChecked = await defaultSwitch.isChecked();
      if (!isChecked) {
        await defaultSwitch.click();
      }
    }

    console.log(`  ✓ 添加银行卡: ${bankCard.bankName} - ${bankCard.cardNumber}`);
    return cardIndex;
  }

  /**
   * 编辑指定索引的银行卡
   * @param cardIndex 银行卡索引（从0开始）
   * @param updatedData 更新的银行卡数据
   */
  async editBankCard(cardIndex: number, updatedData: {
    bankName?: string;
    subBankName?: string;
    cardNumber?: string;
    cardholderName?: string;
    cardType?: string;
    isDefault?: boolean;
  }) {
    console.debug(`  编辑银行卡 ${cardIndex}`);

    // 编辑银行名称
    if (updatedData.bankName !== undefined) {
      const bankSelectTrigger = this.page.locator(`[data-testid="bank-select-${cardIndex}"]`);
      await bankSelectTrigger.click();
      await this.page.waitForTimeout(TIMEOUTS.SHORT);
      await this.page.getByRole('option', { name: updatedData.bankName }).click();
      console.debug(`  ✓ 更新银行名称: ${updatedData.bankName}`);
    }

    // 编辑发卡支行
    if (updatedData.subBankName !== undefined) {
      const subBankInput = this.page.locator(`[data-testid="sub-bank-name-input-${cardIndex}"]`);
      await subBankInput.clear();
      await subBankInput.fill(updatedData.subBankName);
      console.debug(`  ✓ 更新发卡支行: ${updatedData.subBankName}`);
    }

    // 编辑银行卡号
    if (updatedData.cardNumber !== undefined) {
      const cardNumberInput = this.page.locator(`[data-testid="card-number-input-${cardIndex}"]`);
      await cardNumberInput.clear();
      await cardNumberInput.fill(updatedData.cardNumber);
      console.debug(`  ✓ 更新银行卡号: ${updatedData.cardNumber}`);
    }

    // 编辑持卡人姓名
    if (updatedData.cardholderName !== undefined) {
      const cardholderInput = this.page.locator(`[data-testid="cardholder-name-input-${cardIndex}"]`);
      await cardholderInput.clear();
      await cardholderInput.fill(updatedData.cardholderName);
      console.debug(`  ✓ 更新持卡人姓名: ${updatedData.cardholderName}`);
    }

    // 编辑银行卡类型
    if (updatedData.cardType !== undefined) {
      const cardTypeTrigger = this.page.locator(`[data-testid="card-type-select-${cardIndex}"]`);
      await cardTypeTrigger.click();
      await this.page.waitForTimeout(TIMEOUTS.SHORT);
      await this.page.getByRole('option', { name: updatedData.cardType }).click();
      console.debug(`  ✓ 更新银行卡类型: ${updatedData.cardType}`);
    }

    // 设置默认银行卡
    if (updatedData.isDefault !== undefined) {
      const defaultSwitch = this.page.locator(`[data-testid="default-card-switch-${cardIndex}"]`);
      const isChecked = await defaultSwitch.isChecked();
      if (isChecked !== updatedData.isDefault) {
        await defaultSwitch.click();
        console.debug(`  ✓ 设置默认银行卡: ${updatedData.isDefault}`);
      }
    }

    console.debug(`  ✓ 银行卡 ${cardIndex} 编辑完成`);
  }

  /**
   * 删除指定索引的银行卡
   * @param cardIndex 银行卡索引（从0开始）
   */
  async deleteBankCard(cardIndex: number) {
    console.debug(`  删除银行卡 ${cardIndex}`);

    const removeButton = this.page.locator(`[data-testid="remove-bank-card-${cardIndex}"]`);
    await removeButton.click();
    await this.page.waitForTimeout(500);

    console.debug(`  ✓ 银行卡 ${cardIndex} 已删除`);
  }

  /**
   * 获取银行卡列表
   * @returns 银行卡号数组
   */
  async getBankCardList(): Promise<string[]> {
    const cards: string[] = [];
    const cardCount = await this.page.locator('[data-testid^="remove-bank-card-"]').count();

    for (let i = 0; i < cardCount; i++) {
      const cardNumberInput = this.page.locator(`[data-testid="card-number-input-${i}"]`);
      const cardNumber = await cardNumberInput.inputValue();
      cards.push(cardNumber);
    }

    return cards;
  }

  /**
   * 获取默认银行卡的索引
   * @returns 默认银行卡的索引，如果没有则返回 null
   */
  async getDefaultBankCardIndex(): Promise<number | null> {
    const cardCount = await this.page.locator('[data-testid^="remove-bank-card-"]').count();

    for (let i = 0; i < cardCount; i++) {
      const defaultSwitch = this.page.locator(`[data-testid="default-card-switch-${i}"]`);
      const isChecked = await defaultSwitch.isChecked();
      if (isChecked) {
        return i;
      }
    }

    return null;
  }

  /**
   * 获取当前银行卡数量
   * @returns 银行卡数量
   */
  async getBankCardCount(): Promise<number> {
    return await this.page.locator('[data-testid^="remove-bank-card-"]').count();
  }

  /**
   * 检查添加银行卡按钮是否被禁用
   * @returns 是否禁用
   */
  async isAddBankCardButtonDisabled(): Promise<boolean> {
    const addButton = this.page.locator('[data-testid="add-bank-card-button"]');
    return await addButton.isDisabled();
  }

  /**
   * 添加回访记录
   * @param visit 回访信息
   */
  async addVisit(visit: {
    visitDate: string;
    visitType: string;
    visitContent: string;
    visitResult?: string;
    nextVisitDate?: string;
  }) {
    // 点击"添加回访"按钮
    const addVisitButton = this.page.getByRole('button', { name: /添加回访/ });
    await addVisitButton.click();
    await this.page.waitForTimeout(TIMEOUTS.SHORT);

    // 填写回访信息
    await this.page.getByLabel(/回访日期/).fill(visit.visitDate);
    await selectRadixOption(this.page, '回访类型', visit.visitType);

    // 查找回访内容输入框（可能有多个，使用最后一个）
    const visitContentTextarea = this.page.locator('textarea').filter({ hasText: '' }).last();
    await visitContentTextarea.fill(visit.visitContent);

    // 填写回访结果（可选）
    if (visit.visitResult) {
      const resultTextareas = this.page.locator('textarea');
      const count = await resultTextareas.count();
      if (count > 0) {
        await resultTextareas.nth(count - 1).fill(visit.visitResult);
      }
    }

    // 填写下一次回访日期（可选）
    if (visit.nextVisitDate) {
      const nextDateInput = this.page.getByLabel(/下次回访日期/);
      await nextDateInput.fill(visit.nextVisitDate);
    }

    console.log(`  ✓ 添加回访: ${visit.visitType} - ${visit.visitDate}`);
  }

  /**
   * 滚动表单到指定区域
   * @param sectionName 区域名称
   */
  async scrollToSection(sectionName: string) {
    const section = this.page.locator(`text=${sectionName}`).first();
    await section.scrollIntoViewIfNeeded();
    await this.page.waitForTimeout(TIMEOUTS.SHORT);
  }

  /**
   * 等待对话框关闭
   */
  async waitForDialogClosed() {
    const dialog = this.page.locator('[role="dialog"]');
    await dialog.waitFor({ state: 'hidden', timeout: 5000 }).catch(() => {});
    await this.page.waitForTimeout(500);
  }

  /**
   * 取消对话框
   */
  async cancelDialog() {
    const cancelButton = this.page.getByRole('button', { name: '取消' });
    await cancelButton.click();
    await this.waitForDialogClosed();
  }

  /**
   * 添加备注（内联表单模式）
   * @param content 备注内容
   * @param options 选项
   */
  async addNote(content: string, options?: { isSpecialNeeds?: boolean }): Promise<number> {
    // 点击"添加备注"按钮
    const addButton = this.page.locator('[data-testid="add-remark-button"]');
    await addButton.click();
    await this.page.waitForTimeout(TIMEOUTS.SHORT);

    // 获取当前备注数量
    const noteCount = await this.getNoteCount();
    const noteIndex = noteCount > 0 ? noteCount - 1 : 0;

    // 填写备注内容
    const textarea = this.page.locator(`[data-testid="remark-content-textarea-${noteIndex}"]`);
    await textarea.fill(content);

    // 标记特殊需求（如果需要）
    if (options?.isSpecialNeeds) {
      const switchControl = this.page.locator(`[data-testid="special-needs-switch-${noteIndex}"]`);
      const isChecked = await switchControl.isChecked();
      if (!isChecked) {
        await switchControl.click();
      }
    }

    console.debug(`  ✓ 添加备注: ${content.substring(0, 30)}...`);
    return noteIndex;
  }

  /**
   * 编辑指定索引的备注
   * @param index 备注索引（从0开始）
   * @param content 更新的备注内容
   */
  async editNote(index: number, content: string): Promise<void> {
    console.debug(`  编辑备注 ${index}`);

    const textarea = this.page.locator(`[data-testid="remark-content-textarea-${index}"]`);
    await textarea.clear();
    await textarea.fill(content);

    console.debug(`  ✓ 备注 ${index} 编辑完成`);
  }

  /**
   * 删除指定索引的备注
   * @param index 备注索引（从0开始）
   */
  async deleteNote(index: number): Promise<void> {
    console.debug(`  删除备注 ${index}`);

    const removeButton = this.page.locator(`[data-testid="remove-remark-${index}"]`);
    await removeButton.click();
    await this.page.waitForTimeout(TIMEOUTS.SHORT);

    console.debug(`  ✓ 备注 ${index} 已删除`);
  }

  /**
   * 获取备注列表
   * @returns 备注内容数组
   */
  async getNoteList(): Promise<string[]> {
    const notes: string[] = [];
    const noteCount = await this.page.locator('[data-testid^="remark-content-textarea-"]').count();

    for (let i = 0; i < noteCount; i++) {
      const textarea = this.page.locator(`[data-testid="remark-content-textarea-${i}"]`);
      const content = await textarea.inputValue();
      notes.push(content);
    }

    return notes;
  }

  /**
   * 获取备注数量
   * @returns 备注数量
   */
  async getNoteCount(): Promise<number> {
    return await this.page.locator('[data-testid^="remark-content-textarea-"]').count();
  }

  /**
   * 获取指定备注的特殊需求状态
   * @param index 备注索引（从0开始）
   * @returns 是否标记为特殊需求
   */
  async getNoteSpecialNeedsStatus(index: number): Promise<boolean> {
    const switchControl = this.page.locator(`[data-testid="special-needs-switch-${index}"]`);
    return await switchControl.isChecked();
  }

  /**
   * 检查添加备注按钮是否被禁用
   * @returns 是否禁用
   */
  async isAddNoteButtonDisabled(): Promise<boolean> {
    const addButton = this.page.locator('[data-testid="add-remark-button"]');
    return await addButton.isDisabled();
  }
}