'use client';

import { useState, useEffect, useCallback } from 'react';
import { PageContainer } from '@/components/layout';
import { cn } from '@/utils/helpers';
import styles from './settings.module.scss';
import { systemConfigService, type DisplaySettings } from '@/services/systemConfigService';

/**
 * 后台账号数据接口
 */
interface AdminAccount {
  id: string;
  name: string;
  role: string;
  status: 'active' | 'disabled';
  lastLogin: string;
}

/**
 * 操作日志数据接口
 */
interface OperationLog {
  id: string;
  time: string;
  account: string;
  type: string;
  description: string;
  result: 'pass' | 'reject' | 'pending';
}

/**
 * 考核目标数据接口
 */
interface AssessmentTarget {
  month: number;
  provinceMonthly: number;
  provinceCumulative: number;
  cityMonthly: number;
  cityCumulative: number;
}

// 模拟后台账号数据
const mockAccounts: AdminAccount[] = [
  { id: '1', name: 'admin', role: '超级管理员', status: 'active', lastLogin: '2023-10-26 10:30' },
  { id: '2', name: 'operator01', role: '运营人员', status: 'active', lastLogin: '2023-10-26 09:15' },
];

// 模拟操作日志数据
const mockLogs: OperationLog[] = [
  { id: '1', time: '10-26 10:35', account: 'admin', type: '修改配置', description: '修改结算参数', result: 'pass' },
];

// 模拟考核目标数据
const mockTargets: AssessmentTarget[] = [
  { month: 1, provinceMonthly: 100, provinceCumulative: 100, cityMonthly: 20, cityCumulative: 20 },
  { month: 2, provinceMonthly: 120, provinceCumulative: 220, cityMonthly: 25, cityCumulative: 45 },
];

export default function SettingsPage() {
  // 结算参数设置
  const [settlementCurrencies, setSettlementCurrencies] = useState<string[]>(['BNB', '积分']);
  const [defaultCurrency, setDefaultCurrency] = useState('');

  // 龙虎榜设置
  const [enableVirtualAccount, setEnableVirtualAccount] = useState(false);
  const [virtualAccountCount, setVirtualAccountCount] = useState('');
  const [dailyRankEnabled, setDailyRankEnabled] = useState(true);
  const [weeklyRankEnabled, setWeeklyRankEnabled] = useState(true);
  const [monthlyRankEnabled, setMonthlyRankEnabled] = useState(true);
  const [displayCount, setDisplayCount] = useState('');

  // 认种限额设置
  const [singleAccountLimitEnabled, setSingleAccountLimitEnabled] = useState(false);
  const [singleAccountDays, setSingleAccountDays] = useState('');
  const [singleAccountTrees, setSingleAccountTrees] = useState('');
  const [networkLimitEnabled, setNetworkLimitEnabled] = useState(false);
  const [networkDays, setNetworkDays] = useState('');
  const [networkTrees, setNetworkTrees] = useState('');

  // 考核规则设置
  const [localUserThreshold, setLocalUserThreshold] = useState('5');
  const [exemptionEnabled, setExemptionEnabled] = useState(false);

  // 前端展示设置
  const [allowNonAdopterView, setAllowNonAdopterView] = useState(false);
  const [heatDisplayMode, setHeatDisplayMode] = useState<'count' | 'level'>('count');
  const [displaySettingsLoading, setDisplaySettingsLoading] = useState(false);
  const [displaySettingsSaving, setDisplaySettingsSaving] = useState(false);
  const [displaySettingsError, setDisplaySettingsError] = useState<string | null>(null);

  // 后台账号与安全
  const [approvalCount, setApprovalCount] = useState('3');
  const [sensitiveOperations, setSensitiveOperations] = useState(['修改结算参数', '删除用户']);
  const [logDate, setLogDate] = useState('');
  const [logSearch, setLogSearch] = useState('');

  // 加载前端展示设置
  const loadDisplaySettings = useCallback(async () => {
    setDisplaySettingsLoading(true);
    setDisplaySettingsError(null);
    try {
      const settings = await systemConfigService.getDisplaySettings();
      setAllowNonAdopterView(settings.allowNonAdopterViewHeat);
      setHeatDisplayMode(settings.heatDisplayMode);
    } catch (error) {
      console.error('Failed to load display settings:', error);
      setDisplaySettingsError('加载展示设置失败');
    } finally {
      setDisplaySettingsLoading(false);
    }
  }, []);

  // 保存前端展示设置
  const saveDisplaySettings = useCallback(async () => {
    setDisplaySettingsSaving(true);
    setDisplaySettingsError(null);
    try {
      await systemConfigService.updateDisplaySettings({
        allowNonAdopterViewHeat: allowNonAdopterView,
        heatDisplayMode: heatDisplayMode,
      });
      alert('展示设置保存成功');
    } catch (error) {
      console.error('Failed to save display settings:', error);
      setDisplaySettingsError('保存展示设置失败');
    } finally {
      setDisplaySettingsSaving(false);
    }
  }, [allowNonAdopterView, heatDisplayMode]);

  // 组件挂载时加载展示设置
  useEffect(() => {
    loadDisplaySettings();
  }, [loadDisplaySettings]);

  // 切换货币选择
  const toggleCurrency = (currency: string) => {
    if (settlementCurrencies.includes(currency)) {
      setSettlementCurrencies(settlementCurrencies.filter(c => c !== currency));
    } else {
      setSettlementCurrencies([...settlementCurrencies, currency]);
    }
  };

  // Toggle 组件
  const Toggle = ({ checked, onChange, size = 'normal' }: { checked: boolean; onChange: (v: boolean) => void; size?: 'normal' | 'small' }) => {
    if (size === 'small') {
      return (
        <div
          className={cn(styles.settings__toggleSmall, checked ? styles['settings__toggleSmall--on'] : styles['settings__toggleSmall--off'])}
          onClick={() => onChange(!checked)}
        >
          <div className={cn(styles.settings__toggleSmallHandle, checked ? styles['settings__toggleSmallHandle--on'] : styles['settings__toggleSmallHandle--off'])} />
        </div>
      );
    }
    return (
      <div
        className={cn(styles.settings__toggle, checked ? styles['settings__toggle--on'] : styles['settings__toggle--off'])}
        onClick={() => onChange(!checked)}
      >
        <div className={cn(styles.settings__toggleHandle, checked ? styles['settings__toggleHandle--on'] : styles['settings__toggleHandle--off'])} />
      </div>
    );
  };

  return (
    <PageContainer title="系统设置">
      <div className={styles.settings}>
        {/* 页面头部 */}
        <header className={styles.settings__header}>
          <h1 className={styles.settings__title}>系统设置</h1>
        <p className={styles.settings__desc}>配置结算参数、龙虎榜规则、认种限额、考核规则及后台安全策略</p>
        <div className={styles.settings__notice}>
          所有设置修改后请点击下方"保存设置"按钮生效
        </div>
      </header>

      {/* 结算参数设置 */}
      <section className={styles.settings__section}>
        <div className={styles.settings__sectionHeader}>
          <h2 className={styles.settings__sectionTitle}>结算参数设置</h2>
          <button className={styles.settings__resetBtn}>恢复默认</button>
        </div>
        <div className={styles.settings__content}>
          <div className={styles.settings__fieldGroup}>
            <label className={styles.settings__label}>可用结算币种</label>
            <div className={styles.settings__checkboxGroup}>
              {['BNB', 'OG', '积分', 'DST'].map(currency => (
                <label key={currency} className={styles.settings__checkboxItem}>
                  <input
                    type="checkbox"
                    className={styles.settings__checkbox}
                    checked={settlementCurrencies.includes(currency)}
                    onChange={() => toggleCurrency(currency)}
                  />
                  <span className={styles.settings__checkboxLabel}>{currency}</span>
                </label>
              ))}
            </div>
          </div>
          <div className={styles.settings__selectWrapper}>
            <label className={styles.settings__label}>默认结算币种</label>
            <select
              className={styles.settings__select}
              value={defaultCurrency}
              onChange={(e) => setDefaultCurrency(e.target.value)}
            >
              <option value="">请选择默认结算币种</option>
              {settlementCurrencies.map(currency => (
                <option key={currency} value={currency}>{currency}</option>
              ))}
            </select>
            <span className={styles.settings__hint}>提示：默认结算币种将用于用户点击"一键结算"时的自动兑换。</span>
          </div>
        </div>
      </section>

      {/* 龙虎榜设置 */}
      <section className={styles.settings__section}>
        <div className={styles.settings__sectionHeader}>
          <h2 className={styles.settings__sectionTitle}>龙虎榜设置</h2>
          <button className={styles.settings__resetBtn}>恢复默认</button>
        </div>
        <div className={styles.settings__content}>
          <div className={styles.settings__toggleRow}>
            <span className={styles.settings__toggleLabel}>启用虚拟账户参与排名</span>
            <Toggle checked={enableVirtualAccount} onChange={setEnableVirtualAccount} />
          </div>
          <div className={styles.settings__inputRow}>
            <span className={styles.settings__toggleLabel}>虚拟账户数量</span>
            <input
              type="text"
              className={cn(styles.settings__input, styles['settings__input--medium'])}
              placeholder="请输入数量"
              value={virtualAccountCount}
              onChange={(e) => setVirtualAccountCount(e.target.value)}
            />
            <span className={styles.settings__inputUnit}>个</span>
          </div>
          <div className={styles.settings__fieldGroup}>
            <label className={styles.settings__label}>榜单开关</label>
            <div className={styles.settings__switchGroup}>
              <div className={styles.settings__switchItem}>
                <span className={styles.settings__switchLabel}>日榜开关</span>
                <Toggle checked={dailyRankEnabled} onChange={setDailyRankEnabled} size="small" />
              </div>
              <div className={styles.settings__switchItem}>
                <span className={styles.settings__switchLabel}>周榜开关</span>
                <Toggle checked={weeklyRankEnabled} onChange={setWeeklyRankEnabled} size="small" />
              </div>
              <div className={styles.settings__switchItem}>
                <span className={styles.settings__switchLabel}>月榜开关</span>
                <Toggle checked={monthlyRankEnabled} onChange={setMonthlyRankEnabled} size="small" />
              </div>
            </div>
          </div>
          <div className={styles.settings__fieldGroup}>
            <label className={styles.settings__label}>前端显示名次数量</label>
            <input
              type="text"
              className={cn(styles.settings__input, styles['settings__input--medium'])}
              placeholder="例如：10、20、31"
              value={displayCount}
              onChange={(e) => setDisplayCount(e.target.value)}
            />
            <span className={styles.settings__hint}>仅显示前 N 名的排行榜数据</span>
          </div>
          <div className={styles.settings__hint}>
            提示：虚拟账户仅用于展示效果，不影响真实收益结算。
          </div>
        </div>
      </section>

      {/* 认种限额设置 */}
      <section className={styles.settings__section}>
        <div className={styles.settings__sectionHeader}>
          <h2 className={styles.settings__sectionTitle}>认种限额设置</h2>
          <button className={styles.settings__resetBtn}>恢复默认</button>
        </div>
        <div className={styles.settings__content}>
          {/* 单账户认种限额 */}
          <div className={styles.settings__quotaCard}>
            <div className={styles.settings__quotaHeader}>
              <span className={styles.settings__quotaTitle}>单账户认种限额</span>
              <Toggle checked={singleAccountLimitEnabled} onChange={setSingleAccountLimitEnabled} />
            </div>
            <div className={styles.settings__quotaInputRow}>
              <span className={styles.settings__quotaText}>在</span>
              <input
                type="text"
                className={cn(styles.settings__input, styles['settings__input--small'])}
                placeholder="天数"
                value={singleAccountDays}
                onChange={(e) => setSingleAccountDays(e.target.value)}
              />
              <span className={styles.settings__quotaText}>天内，每个账户最多认种</span>
              <input
                type="text"
                className={cn(styles.settings__input, styles['settings__input--small'])}
                placeholder="棵数"
                value={singleAccountTrees}
                onChange={(e) => setSingleAccountTrees(e.target.value)}
              />
              <span className={styles.settings__quotaText}>棵</span>
            </div>
            <span className={styles.settings__hint}>示例：5 天内最多认种 1 棵</span>
          </div>

          {/* 全网总量限额 */}
          <div className={styles.settings__quotaCard}>
            <div className={styles.settings__quotaHeader}>
              <span className={styles.settings__quotaTitle}>全网总量限额</span>
              <Toggle checked={networkLimitEnabled} onChange={setNetworkLimitEnabled} />
            </div>
            <div className={styles.settings__quotaInputRow}>
              <span className={styles.settings__quotaText}>在</span>
              <input
                type="text"
                className={cn(styles.settings__input, styles['settings__input--small'])}
                placeholder="天数"
                value={networkDays}
                onChange={(e) => setNetworkDays(e.target.value)}
              />
              <span className={styles.settings__quotaText}>天内，全网总认种上限</span>
              <input
                type="text"
                className={cn(styles.settings__input, styles['settings__input--small'])}
                placeholder="棵数"
                value={networkTrees}
                onChange={(e) => setNetworkTrees(e.target.value)}
              />
              <span className={styles.settings__quotaText}>棵</span>
            </div>
            <span className={styles.settings__hint}>示例：2 天内总量 100 棵</span>
          </div>
        </div>
      </section>

      {/* 考核规则设置 */}
      <section className={styles.settings__section}>
        <div className={styles.settings__sectionHeader}>
          <h2 className={styles.settings__sectionTitle}>考核规则设置</h2>
          <button className={styles.settings__resetBtn}>恢复默认</button>
        </div>
        <div className={styles.settings__content}>
          {/* 本地用户占比阈值 */}
          <div className={styles.settings__assessmentRow}>
            <label className={styles.settings__assessmentLabel}>省/市本地用户占比阈值</label>
            <div className={styles.settings__assessmentInputRow}>
              <input
                type="text"
                className={cn(styles.settings__input, styles['settings__input--small'])}
                value={localUserThreshold}
                onChange={(e) => setLocalUserThreshold(e.target.value)}
              />
              <span className={styles.settings__assessmentUnit}>%</span>
            </div>
            <span className={styles.settings__hint}>当团队中本省/市用户占比低于此值时，将触发相应考核机制。</span>
          </div>

          {/* 豁免设置 */}
          <div className={styles.settings__exemptionRow}>
            <div className={styles.settings__exemptionInfo}>
              <span className={styles.settings__exemptionLabel}>允许为单个账号设置"不考核自有团队本省/市占比"豁免</span>
              <span className={styles.settings__exemptionHint}>开启后，可在用户管理页面为特定账号设置豁免权。</span>
            </div>
            <Toggle checked={exemptionEnabled} onChange={setExemptionEnabled} />
          </div>

          {/* 阶梯性考核目标表 */}
          <div className={styles.settings__tableSection}>
            <div className={styles.settings__tableHeader}>
              <h3 className={styles.settings__tableTitle}>省代 / 市代阶梯性考核目标表</h3>
              <div className={styles.settings__tableBtns}>
                <button className={styles.settings__tableBtn}>新增行</button>
                <button className={styles.settings__tableBtn}>导出表格</button>
              </div>
            </div>
            <div className={styles.settings__table}>
              <div className={styles.settings__tableHead}>
                <div className={cn(styles.settings__tableHeadCell, styles['settings__tableHeadCell--month'])}>考核月</div>
                <div className={cn(styles.settings__tableHeadCell, styles['settings__tableHeadCell--target'])}>省代当月目标</div>
                <div className={cn(styles.settings__tableHeadCell, styles['settings__tableHeadCell--target'])}>省代累计目标</div>
                <div className={cn(styles.settings__tableHeadCell, styles['settings__tableHeadCell--target'])}>市代当月目标</div>
                <div className={cn(styles.settings__tableHeadCell, styles['settings__tableHeadCell--target'])}>市代累计目标</div>
              </div>
              <div className={styles.settings__tableBody}>
                {mockTargets.map((target) => (
                  <div key={target.month} className={styles.settings__tableRow}>
                    <div className={cn(styles.settings__tableCell, styles['settings__tableCell--month'])}>第{target.month}个月</div>
                    <div className={cn(styles.settings__tableCell, styles['settings__tableCell--target'])}>{target.provinceMonthly}</div>
                    <div className={cn(styles.settings__tableCell, styles['settings__tableCell--target'])}>{target.provinceCumulative}</div>
                    <div className={cn(styles.settings__tableCell, styles['settings__tableCell--target'])}>{target.cityMonthly}</div>
                    <div className={cn(styles.settings__tableCell, styles['settings__tableCell--target'])}>{target.cityCumulative}</div>
                  </div>
                ))}
              </div>
            </div>
            <span className={styles.settings__hint}>此表格用于设定不同代理级别的月度和累计业绩目标。</span>
          </div>
        </div>
      </section>

      {/* 前端展示设置 */}
      <section className={styles.settings__section}>
        <div className={styles.settings__sectionHeader}>
          <h2 className={styles.settings__sectionTitle}>前端展示设置</h2>
          <div className={styles.settings__sectionActions}>
            <button
              className={styles.settings__resetBtn}
              onClick={loadDisplaySettings}
              disabled={displaySettingsLoading}
            >
              {displaySettingsLoading ? '加载中...' : '刷新'}
            </button>
            <button
              className={styles.settings__saveBtn}
              onClick={saveDisplaySettings}
              disabled={displaySettingsSaving || displaySettingsLoading}
            >
              {displaySettingsSaving ? '保存中...' : '保存展示设置'}
            </button>
          </div>
        </div>
        {displaySettingsError && (
          <div className={styles.settings__error}>{displaySettingsError}</div>
        )}
        <div className={styles.settings__content}>
          <div className={styles.settings__toggleRow}>
            <span className={styles.settings__toggleLabel}>允许未认种用户查看各省认种热度</span>
            <Toggle checked={allowNonAdopterView} onChange={setAllowNonAdopterView} />
          </div>
          <div className={styles.settings__fieldGroup}>
            <label className={styles.settings__label}>热度展示方式</label>
            <div className={styles.settings__radioGroup}>
              <label className={styles.settings__radioItem}>
                <input
                  type="radio"
                  className={styles.settings__radio}
                  name="heatDisplayMode"
                  checked={heatDisplayMode === 'count'}
                  onChange={() => setHeatDisplayMode('count')}
                />
                <span className={styles.settings__radioLabel}>显示具体认种数量</span>
              </label>
              <label className={styles.settings__radioItem}>
                <input
                  type="radio"
                  className={styles.settings__radio}
                  name="heatDisplayMode"
                  checked={heatDisplayMode === 'level'}
                  onChange={() => setHeatDisplayMode('level')}
                />
                <span className={styles.settings__radioLabel}>仅显示热度等级（高 / 中 / 低）</span>
              </label>
            </div>
          </div>
          <span className={styles.settings__hint}>提示：仅影响前端展示，不影响任何收益计算及排名。</span>
        </div>
      </section>

      {/* 后台账号与安全 */}
      <section className={styles.settings__section}>
        <div className={styles.settings__sectionHeader}>
          <h2 className={styles.settings__sectionTitle}>后台账号与安全</h2>
          <button className={styles.settings__resetBtn}>恢复默认</button>
        </div>
        <div className={styles.settings__securityContent}>
          {/* 左侧：账号管理 */}
          <div className={styles.settings__securityLeft}>
            <div className={styles.settings__accountHeader}>
              <h3 className={styles.settings__accountTitle}>后台账号与角色</h3>
              <button className={styles.settings__addBtn}>新增后台账号</button>
            </div>
            <div className={styles.settings__accountTable}>
              <div className={styles.settings__accountTableInner}>
                <div className={styles.settings__accountHead}>
                  <div className={cn(styles.settings__accountHeadCell, styles['settings__accountHeadCell--name'])}>账号名</div>
                  <div className={cn(styles.settings__accountHeadCell, styles['settings__accountHeadCell--role'])}>角色</div>
                  <div className={cn(styles.settings__accountHeadCell, styles['settings__accountHeadCell--status'])}>状态</div>
                  <div className={cn(styles.settings__accountHeadCell, styles['settings__accountHeadCell--login'])}>最近登录</div>
                  <div className={cn(styles.settings__accountHeadCell, styles['settings__accountHeadCell--actions'])}>操作</div>
                </div>
                <div className={styles.settings__accountBody}>
                  {mockAccounts.map((account) => (
                    <div key={account.id} className={styles.settings__accountRow}>
                      <div className={cn(styles.settings__accountCell, styles['settings__accountCell--name'])}>{account.name}</div>
                      <div className={cn(styles.settings__accountCell, styles['settings__accountCell--role'])}>{account.role}</div>
                      <div className={cn(styles.settings__accountCell, styles['settings__accountCell--status'])}>
                        <span className={cn(styles.settings__statusBadge, account.status === 'disabled' && styles['settings__statusBadge--disabled'])}>
                          {account.status === 'active' ? '正常' : '禁用'}
                        </span>
                      </div>
                      <div className={cn(styles.settings__accountCell, styles['settings__accountCell--login'])}>{account.lastLogin}</div>
                      <div className={cn(styles.settings__accountCell, styles['settings__accountCell--actions'])}>
                        <button className={styles.settings__actionLink}>编辑</button>
                        <button className={cn(styles.settings__actionLink, styles['settings__actionLink--danger'])}>禁用</button>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </div>
            <span className={styles.settings__hint}>管理后台操作员账号及其权限角色。</span>
          </div>

          {/* 右侧：敏感操作和日志 */}
          <div className={styles.settings__securityRight}>
            {/* 敏感操作审批 */}
            <div className={styles.settings__sensitiveCard}>
              <div className={styles.settings__sensitiveRow}>
                <span className={styles.settings__sensitiveLabel}>敏感操作审批人数</span>
                <input
                  type="text"
                  className={cn(styles.settings__input, styles['settings__input--small'])}
                  value={approvalCount}
                  onChange={(e) => setApprovalCount(e.target.value)}
                />
                <span className={styles.settings__inputUnit}>人</span>
              </div>
              <div className={styles.settings__sensitiveFieldGroup}>
                <label className={styles.settings__label}>需要审批的敏感操作</label>
                <input
                  type="text"
                  className={styles.settings__tagInput}
                  placeholder="选择或输入操作名称"
                />
                <div className={styles.settings__tagList}>
                  {sensitiveOperations.map((op, index) => (
                    <span key={index} className={styles.settings__tag}>
                      {op}
                      <button
                        className={styles.settings__tagRemove}
                        onClick={() => setSensitiveOperations(sensitiveOperations.filter((_, i) => i !== index))}
                      >
                        ×
                      </button>
                    </span>
                  ))}
                </div>
              </div>
            </div>

            {/* 操作日志 */}
            <div className={styles.settings__logSection}>
              <h3 className={styles.settings__logTitle}>操作日志</h3>
              <div className={styles.settings__logFilters}>
                <input
                  type="date"
                  className={styles.settings__dateInput}
                  value={logDate}
                  onChange={(e) => setLogDate(e.target.value)}
                />
                <input
                  type="text"
                  className={styles.settings__searchInput}
                  placeholder="操作账号/关键字搜索"
                  value={logSearch}
                  onChange={(e) => setLogSearch(e.target.value)}
                />
                <button className={styles.settings__exportBtn}>导出日志</button>
              </div>
              <div className={styles.settings__logTable}>
                <div className={styles.settings__logTableInner}>
                  <div className={styles.settings__logHead}>
                    <div className={cn(styles.settings__logHeadCell, styles['settings__logHeadCell--time'])}>时间</div>
                    <div className={cn(styles.settings__logHeadCell, styles['settings__logHeadCell--account'])}>操作账号</div>
                    <div className={cn(styles.settings__logHeadCell, styles['settings__logHeadCell--type'])}>类型</div>
                    <div className={cn(styles.settings__logHeadCell, styles['settings__logHeadCell--desc'])}>描述</div>
                    <div className={cn(styles.settings__logHeadCell, styles['settings__logHeadCell--result'])}>审批结果</div>
                  </div>
                  <div className={styles.settings__logBody}>
                    {mockLogs.map((log) => (
                      <div key={log.id} className={styles.settings__logRow}>
                        <div className={cn(styles.settings__logCell, styles['settings__logCell--time'])}>{log.time}</div>
                        <div className={cn(styles.settings__logCell, styles['settings__logCell--account'])}>{log.account}</div>
                        <div className={cn(styles.settings__logCell, styles['settings__logCell--type'])}>{log.type}</div>
                        <div className={cn(styles.settings__logCell, styles['settings__logCell--desc'])}>{log.description}</div>
                        <div className={cn(styles.settings__logCell, styles['settings__logCell--result'])}>
                          <span className={cn(
                            styles.settings__logResult,
                            log.result === 'pass' && styles['settings__logResult--pass'],
                            log.result === 'reject' && styles['settings__logResult--reject'],
                            log.result === 'pending' && styles['settings__logResult--pending']
                          )}>
                            {log.result === 'pass' ? '通过' : log.result === 'reject' ? '拒绝' : '待审'}
                          </span>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

        {/* 页面底部操作按钮 */}
        <footer className={styles.settings__footer}>
          <button className={styles.settings__cancelBtn}>取消修改</button>
          <button className={styles.settings__saveBtn}>保存设置</button>
        </footer>
      </div>
    </PageContainer>
  );
}