<!--
 * @Author: 赵丽婷
 * @Date: 2025-12-02
 * @LastEditors: 赵丽婷
 * @LastEditTime: 2026-01-14 19:48:12
 * @FilePath: \LinkMed\linkmed-vue3\src\components\Settings\MemberReferralPanel.vue
 * @Description: 会员推荐面板
 * Copyright (c) 2025 by 北京连心医疗科技有限公司, All Rights Reserved. 
-->
<template>
  <div class="member-referral-panel">
    <h2 class="panel-title">{{ $t("settingsSidebar.memberReferral") }}</h2>
    <!-- 可用余额头部 -->
    <div v-if="!isInternal && showCouponsTab" class="balance-header">
      <div class="balance-info">
        <span class="balance-label">{{
          $t("settingsSidebar.availableBalance")
        }}</span>
        <span class="balance-amount">¥{{ balance.toFixed(2) }}</span>
      </div>
      <button class="withdraw-btn" @click="handleWithdraw">
        {{ $t("settingsSidebar.withdraw") }}
      </button>
    </div>

    <!-- Tab 切换 -->
    <div class="tabs-container">
      <div
        :class="['tab-item', { active: activeTab === 'referral' }]"
        @click="switchTab('referral')"
      >
        {{ $t("settingsSidebar.memberReferralTab") }}
      </div>
      <div
        :class="['tab-item', { active: activeTab === 'records' }]"
        @click="switchTab('records')"
      >
        {{ $t("settingsSidebar.referralRecords") }}
      </div>
      <div
        v-if="showCouponsTab"
        :class="['tab-item', { active: activeTab === 'coupons' }]"
        @click="switchTab('coupons')"
      >
        {{ $t("settingsSidebar.couponsTitle") }}
      </div>
    </div>

    <!-- 会员推荐内容 -->
    <div v-if="activeTab === 'referral'" class="referral-content">
      <!-- 推荐二维码区域 -->
      <div class="qrcode-section">
        <h3 class="section-title">
          {{ $t("settingsSidebar.referralQRCode") }}
        </h3>
        <p class="section-subtitle">
          {{ $t("settingsSidebar.referralQRCodeDesc") }}
        </p>
        <!-- 海报区域 -->
        <div class="poster-section">
          <!-- 左侧大图 -->
          <div class="poster-main">
            <div class="poster-wrapper">
              <img
                ref="posterImageEl"
                :src="`/report${selectedPoster}.jpg`"
                :alt="`推荐海报${selectedPoster}`"
                class="poster-image"
              />
              <div class="poster-qrcode-overlay" ref="posterQrcodeOverlayEl">
                <div v-if="qrcodeLoading" class="poster-qrcode-loading">
                  <el-icon class="loading-icon" :size="30"><Loading /></el-icon>
                </div>
                <img
                  v-if="qrcodeUrl"
                  :src="qrcodeUrl"
                  alt="推荐小程序码"
                  class="poster-qrcode-image"
                  :class="{ 'poster-qrcode-image-hidden': qrcodeLoading }"
                />
              </div>
            </div>
          </div>
          <!-- 右侧缩略图和下载按钮 -->
          <div class="poster-right">
            <!-- 缩略图列表 -->
            <div class="poster-thumbnails">
              <div
                v-for="i in 3"
                :key="i"
                :class="[
                  'poster-thumbnail-item',
                  { active: selectedPoster === i },
                ]"
                @click="selectedPoster = i"
              >
                <img
                  :src="`/report${i}.jpg`"
                  :alt="`推荐海报${i}`"
                  class="poster-thumbnail-image"
                />
              </div>
            </div>
            <!-- 下载按钮 -->
            <div class="poster-download-wrapper">
              <button
                class="btn-primary poster-download-btn"
                :disabled="!qrcodeUrl || qrcodeLoading"
                @click="downloadPoster(selectedPoster)"
              >
                <el-icon :size="18"><Download /></el-icon>
                {{ $t("settingsSidebar.downloadAndShare") }}
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- 推荐链接 -->
      <div class="referral-link-section">
        <h3 class="section-title-sub">
          {{ $t("settingsSidebar.referralLink") }}
        </h3>
        <div class="link-input-wrapper">
          <span class="link-input">{{ referralLink }}</span>
          <button class="copy-btn" @click="copyLink">
            <el-icon :size="14"><CopyDocument /></el-icon
            >{{ $t("settingsSidebar.copy") }}
          </button>
        </div>
        <p class="link-tip">
          {{ $t("settingsSidebar.referralLinkTip") }}
        </p>
      </div>

      <!-- 二级推荐分销体系 -->
      <!-- <div class="referral-process-section">
        <h3 class="section-title">
          {{ $t("settingsSidebar.twoLevelReferral") }}
        </h3>
        <p class="section-subtitle">
          {{ $t("settingsSidebar.twoLevelReferralDesc") }}
        </p>
        <div class="referral-process">
          <div class="process-step">
            <div class="process-icon">👤</div>
            <div class="process-label">
              {{ $t("settingsSidebar.youLevel1") }}
            </div>
          </div>
          <div class="process-arrow">→</div>
          <div class="process-step">
            <div class="process-icon">👥</div>
            <div class="process-label">
              {{ $t("settingsSidebar.friendALevel2") }}
            </div>
          </div>
          <div class="process-arrow">→</div>
          <div class="process-step">
            <div class="process-icon">👥</div>
            <div class="process-label">
              {{ $t("settingsSidebar.friendBLevel3") }}
            </div>
          </div>
        </div>
      </div> -->

      <!-- 奖励规则和奖励示例 -->
      <!-- <div class="reward-section">
        <div class="reward-examples-section">
          <h3 class="section-title-sub">
            {{ $t("settingsSidebar.rewardRules") }}
          </h3>
          <div class="examples-list reward-rules-list">
            <div class="example-item">
              <span class="example-label">{{
                $t("settingsSidebar.level1RewardLabel")
              }}</span>
              <span class="example-value">{{
                $t("settingsSidebar.level1RewardValue")
              }}</span>
            </div>
            <div class="example-item">
              <span class="example-label">{{
                $t("settingsSidebar.level2RewardLabel")
              }}</span>
              <span class="example-value">{{
                $t("settingsSidebar.level2RewardValue")
              }}</span>
            </div>
            <div class="example-item">
              <span class="example-label">{{
                $t("settingsSidebar.rewardFormLabel")
              }}</span>
              <span class="example-value">{{
                $t("settingsSidebar.rewardFormValue")
              }}</span>
            </div>
          </div>
        </div>
        <div class="reward-examples-section">
          <h3 class="section-title-sub">
            {{ $t("settingsSidebar.rewardExamples") }}
          </h3>
          <div class="examples-list simple-list">
            <div class="example-group">
              <div class="example-group-title">
                {{ $t("settingsSidebar.friendAPay500") }}
              </div>
              <div class="example-group-items">
                <div class="example-item">
                  <span class="example-label">{{
                    $t("settingsSidebar.youLevel1Reward")
                  }}</span>
                </div>
                <div class="example-item">
                  <span class="example-label">{{
                    $t("settingsSidebar.friendANoUpperReward")
                  }}</span>
                </div>
              </div>
            </div>
            <div class="example-group">
              <div class="example-group-title">
                {{ $t("settingsSidebar.friendBPay500") }}
              </div>
              <div class="example-group-items">
                <div class="example-item">
                  <span class="example-label">{{
                    $t("settingsSidebar.youLevel2Reward")
                  }}</span>
                </div>
                <div class="example-item">
                  <span class="example-label">{{
                    $t("settingsSidebar.friendALevel1Reward")
                  }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="reward-examples-section">
          <h3 class="section-title-sub">
            {{ $t("settingsSidebar.referralRules") }}
          </h3>
          <div class="examples-list simple-list">
            <ul class="notice-list">
              <li>{{ $t("settingsSidebar.rule1") }}</li>
              <li>{{ $t("settingsSidebar.rule2") }}</li>
              <li>{{ $t("settingsSidebar.rule3") }}</li>
            </ul>
          </div>
        </div>
      </div> -->
    </div>

    <div v-if="activeTab === 'records'" class="records-content">
      <!-- 推荐记录 -->
      <div class="invite-tree-section">
        <div class="section-title-wrapper">
          <h3 class="section-title">
            {{ $t("settingsSidebar.referralRecordsTitle") }}
          </h3>
        </div>
        <!-- 推荐记录筛选器 -->
        <div class="filters-section">
          <div class="filter-group">
            <div class="filter-item">
              <el-select
                v-model="referralFilters.type"
                :placeholder="$t('settingsSidebar.allTypes')"
                clearable
                class="filter-select"
              >
                <el-option
                  :value="''"
                  :label="$t('settingsSidebar.allTypes')"
                />
                <el-option
                  :value="$t('settingsSidebar.transactionTypeIncome')"
                  :label="$t('settingsSidebar.transactionTypeIncome')"
                />
                <el-option
                  v-if="showCouponsTab"
                  :value="$t('settingsSidebar.transactionTypeSalesCommission')"
                  :label="$t('settingsSidebar.transactionTypeSalesCommission')"
                />
              </el-select>
            </div>
            <div class="filter-item">
              <el-input
                type="text"
                v-model="referralFilters.search"
                :placeholder="
                  $t('settingsSidebar.searchUserOrPhonePlaceholder')
                "
                class="filter-input"
                @input="handleReferralSearchInput"
              />
            </div>
          </div>
          <div class="section-title-stats" v-if="!isInternal">
            <span>{{
              $t("settingsSidebar.referralRecordsStats", {
                count: totalInviteRecordsCount,
                earnings: `${totalInviteEarnings}${$t("settingsSidebar.yuan")}`,
              })
            }}</span>
          </div>
        </div>
        <div class="invite-tree-table-wrapper">
          <table class="invite-tree-table">
            <thead>
              <tr>
                <th style="width: 30px"></th>
                <th>
                  {{ $t("settingsSidebar.registeredTime") }}
                  <button
                    class="invite-sort-btn"
                    type="button"
                    @click="toggleInviteRegisteredSortOrder"
                  >
                    <span
                      class="invite-sort-icon"
                      :class="[
                        inviteRegisteredSortOrder === 'asc'
                          ? 'invite-sort-asc'
                          : 'invite-sort-desc',
                      ]"
                    ></span>
                  </button>
                </th>
                <th>{{ $t("settingsSidebar.registeredUsername") }}</th>
                <th>{{ $t("settingsSidebar.customerLevel") }}</th>
                <th>{{ $t("settingsSidebar.phoneNumber") }}</th>
                <th>{{ $t("settingsSidebar.email") }}</th>
                <th v-if="!isInternal">
                  {{ $t("settingsSidebar.totalEarnings") }}
                </th>
              </tr>
            </thead>
            <tbody>
              <!-- 搜索中状态 -->
              <tr v-if="inviteTreeSearching">
                <td
                  :colspan="7"
                  class="searching-state"
                  style="width: 100%; text-align: center"
                >
                  <el-icon class="loading-icon" :size="20"><Loading /></el-icon>
                  搜索中...
                </td>
              </tr>
              <!-- 正常数据行 -->
              <template
                v-else
                v-for="(item, index) in inviteTreeData"
                :key="item.userId || index"
              >
                <!-- 父行和子行都使用同一个组件渲染 -->
                <InviteTreeChildRows
                  :item="item"
                  :level="0"
                  :expanded-rows="expandedRows"
                  :loaded-children-nodes="loadedChildrenNodes"
                  :target-node-children-user-ids="targetNodeChildrenUserIds"
                  :render-single="true"
                  :show-descendant-count="showCouponsTab"
                  :show-total-earnings="!isInternal"
                  @toggle-expand="toggleExpand"
                />
              </template>
            </tbody>
          </table>
        </div>
      </div>
      <!-- 资金记录 -->
      <div class="funds-records-section">
        <h3 class="section-title">
          {{ $t("settingsSidebar.fundsRecordsTitle") }}
        </h3>
        <!-- 资金记录筛选器 -->
        <div class="filters-section">
          <div class="filter-group">
            <div class="filter-item-date">
              <el-date-picker
                v-model="fundsFilters.dateRange"
                type="daterange"
                :range-separator="$t('settingsSidebar.to')"
                :start-placeholder="$t('settingsSidebar.startDate')"
                :end-placeholder="$t('settingsSidebar.endDate')"
                class="filter-date-picker"
              />
            </div>
            <div class="filter-item">
              <el-select
                v-model="fundsFilters.type"
                :placeholder="$t('settingsSidebar.allTypes')"
                clearable
                class="filter-select"
              >
                <el-option
                  :value="''"
                  :label="$t('settingsSidebar.allTypes')"
                />
                <el-option
                  :value="'收益'"
                  :label="$t('settingsSidebar.transactionTypeIncome')"
                />
                <el-option
                  :value="'收益回滚'"
                  :label="$t('settingsSidebar.transactionTypeIncomeRollback')"
                />
                <el-option
                  :value="'销售分成'"
                  :label="$t('settingsSidebar.transactionTypeSalesCommission')"
                />
                <el-option
                  :value="'销售分成回滚'"
                  :label="
                    $t('settingsSidebar.transactionTypeSalesCommissionRollback')
                  "
                />
                <el-option
                  :value="'提现'"
                  :label="$t('settingsSidebar.transactionTypeWithdraw')"
                />
                <el-option
                  :value="'抵扣'"
                  :label="$t('settingsSidebar.transactionTypeDeduct')"
                />
              </el-select>
            </div>
            <div class="filter-item">
              <el-select
                v-model="fundsFilters.status"
                :placeholder="$t('settingsSidebar.allStatus')"
                clearable
                class="filter-select"
              >
                <el-option
                  :value="''"
                  :label="$t('settingsSidebar.allStatus')"
                />
                <el-option
                  :value="'已完成'"
                  :label="$t('settingsSidebar.transactionStatusCompleted')"
                />
                <el-option
                  :value="'处理中'"
                  :label="$t('settingsSidebar.transactionStatusProcessing')"
                />
                <el-option
                  :value="'失败'"
                  :label="$t('settingsSidebar.transactionStatusFailed')"
                />
                <el-option
                  :value="'待审核'"
                  :label="$t('settingsSidebar.transactionStatusPending')"
                />
                <el-option
                  :value="'待确认'"
                  :label="
                    $t('settingsSidebar.transactionStatusPendingConfirmation')
                  "
                />
                <el-option
                  :value="'待支付'"
                  :label="$t('settingsSidebar.transactionStatusPendingPayment')"
                />
                <el-option
                  :value="'已支付'"
                  :label="$t('settingsSidebar.transactionStatusPaid')"
                />
                <el-option
                  :value="'已取消'"
                  :label="$t('settingsSidebar.transactionStatusCancelled')"
                />
                <el-option
                  :value="'退款中'"
                  :label="$t('settingsSidebar.transactionStatusRefunding')"
                />
                <el-option
                  :value="'退款驳回'"
                  :label="$t('settingsSidebar.transactionStatusRefundRejected')"
                />
                <el-option
                  :value="'已退款'"
                  :label="$t('settingsSidebar.transactionStatusRefunded')"
                />
              </el-select>
            </div>
          </div>
        </div>
        <div class="records-table-wrapper">
          <table class="records-table">
            <thead>
              <tr>
                <th style="width: 170px">
                  {{ $t("settingsSidebar.timeCol") }}
                </th>
                <th>
                  {{ $t("settingsSidebar.typeCol") }}
                </th>
                <th style="width: 100px">
                  {{ $t("settingsSidebar.sourceUserName") }}
                </th>
                <th style="width: 100px">
                  {{ $t("settingsSidebar.paidAmountCol") }}
                </th>
                <th style="width: 60px">
                  {{ $t("settingsSidebar.inviteLevel") }}
                </th>
                <th style="width: 80px">
                  {{ $t("settingsSidebar.statusCol") }}
                </th>
                <th v-if="!isInternal" style="width: 100px">
                  {{ $t("settingsSidebar.distributionRate") }}
                </th>
                <th v-if="!isInternal" style="width: 100px">
                  {{ $t("settingsSidebar.distributionAmount") }}
                </th>
              </tr>
            </thead>
            <tbody>
              <tr
                v-for="record in filteredRecords"
                :key="record.id"
                @click="handleFundsRecordClick(record)"
                class="funds-record-row"
              >
                <td style="width: 170px">{{ formatDateTime(record.date) }}</td>
                <td>
                  {{ formatTransactionType(record.type) }}
                </td>
                <td style="width: 100px">
                  {{ formatSourceUserName(record.sourceUserName) }}
                </td>
                <td style="width: 100px">
                  {{
                    record.paidAmount !== undefined &&
                    record.paidAmount !== null
                      ? `${record.paidAmount}${$t("settingsSidebar.yuan")}`
                      : "-"
                  }}
                </td>
                <td style="width: 60px">
                  {{
                    record.inviteLevel !== undefined &&
                    record.inviteLevel !== null
                      ? `L${record.inviteLevel}`
                      : "-"
                  }}
                </td>
                <td style="width: 80px">
                  {{ formatTransactionStatus(record.status) }}
                </td>
                <td v-if="!isInternal" style="width: 100px">
                  {{ record.distributionRate || "-" }}
                </td>
                <td
                  v-if="!isInternal"
                  :class="[
                    'amount',
                    record.distributionAmount !== undefined &&
                    record.distributionAmount !== null &&
                    record.distributionAmount > 0
                      ? 'positive'
                      : 'negative',
                  ]"
                  style="width: 100px"
                >
                  {{
                    record.distributionAmount !== undefined &&
                    record.distributionAmount !== null &&
                    record.distributionAmount > 0
                      ? "+"
                      : ""
                  }}{{
                    record.distributionAmount !== undefined &&
                    record.distributionAmount !== null
                      ? `${record.distributionAmount}${$t("settingsSidebar.yuan")}`
                      : "-"
                  }}
                </td>
              </tr>
            </tbody>
          </table>
          <div v-if="filteredRecords.length === 0" class="empty-state">
            {{ $t("settingsSidebar.noReferralRecords") }}
          </div>
        </div>
        <!-- 资金记录分页 -->
        <div class="pagination-wrapper" v-if="fundsRecordsTotal > 0">
          <el-pagination
            :current-page="fundsRecordsPage + 1"
            v-model:page-size="fundsRecordsPageSize"
            :total="fundsRecordsTotal"
            :page-sizes="[10, 20, 50, 100]"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleFundsRecordsPageSizeChange"
            @current-change="handleFundsRecordsPageChange"
          />
        </div>
      </div>
    </div>

    <!-- 优惠券内容 -->
    <div v-if="activeTab === 'coupons'" class="coupons-content">
      <!-- 筛选器 -->
      <div class="filters-section">
        <div class="filter-group coupon-filter-group">
          <div class="filter-item-label">
            <span class="filter-label">{{
              $t("settingsSidebar.couponTypeLabel")
            }}</span>
            <el-select
              v-model="couponFilters.type"
              :placeholder="$t('settingsSidebar.allTypes')"
              clearable
              class="filter-select coupon-filter-select"
            >
              <el-option :label="$t('settingsSidebar.allTypes')" value="" />
              <el-option
                :label="$t('settingsSidebar.memberCoupon')"
                value="member"
              />
              <el-option
                :label="$t('settingsSidebar.temporaryCoupon')"
                value="temporary"
              />
            </el-select>
          </div>
          <div class="filter-item-label">
            <span class="filter-label">{{
              $t("settingsSidebar.usageStatusLabel")
            }}</span>
            <el-select
              v-model="couponFilters.usageStatus"
              :placeholder="$t('settingsSidebar.allStatus')"
              clearable
              class="filter-select coupon-filter-select"
            >
              <el-option :label="$t('settingsSidebar.allStatus')" value="" />
              <el-option :label="$t('settingsSidebar.unused')" :value="0" />
              <el-option :label="$t('settingsSidebar.used')" :value="1" />
            </el-select>
          </div>
          <div class="filter-item-label">
            <span class="filter-label">{{
              $t("settingsSidebar.validityPeriodLabel")
            }}</span>
            <el-date-picker
              v-model="couponFilters.dateRange"
              type="daterange"
              :range-separator="$t('settingsSidebar.to')"
              :start-placeholder="$t('settingsSidebar.datePlaceholder')"
              :end-placeholder="$t('settingsSidebar.datePlaceholder')"
              class="filter-date-picker coupon-filter-date"
              format="YYYY/MM/DD"
              value-format="YYYY-MM-DD"
            />
          </div>
        </div>
      </div>
      <h3 class="section-title">{{ $t("settingsSidebar.couponsTitle") }}</h3>
      <div class="coupons-table-wrapper">
        <table class="coupons-table">
          <thead>
            <tr>
              <th>{{ $t("settingsSidebar.couponCodeCol") }}</th>
              <th>{{ $t("settingsSidebar.couponNameCol") }}</th>
              <th>{{ $t("settingsSidebar.memberDurationTypeCol") }}</th>
              <th>{{ $t("settingsSidebar.memberDurationMonthsCol") }}</th>
              <th>{{ $t("settingsSidebar.couponDeductAmountCol") }}</th>
              <th>{{ $t("settingsSidebar.validDaysCol") }}</th>
              <th>{{ $t("settingsSidebar.effectiveStartTimeCol") }}</th>
              <th>{{ $t("settingsSidebar.effectiveEndTimeCol") }}</th>
              <th>{{ $t("settingsSidebar.couponStatusCol") }}</th>
              <th>{{ $t("settingsSidebar.userUsageStatusCol") }}</th>
              <th>{{ $t("settingsSidebar.usageTimeCol") }}</th>
              <th>{{ $t("settingsSidebar.usageOrderNoCol") }}</th>
              <th>{{ $t("settingsSidebar.usageUserNameCol") }}</th>
              <th>{{ $t("settingsSidebar.operationCol") }}</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="coupon in couponsData" :key="coupon.id">
              <td>{{ coupon.code || "-" }}</td>
              <td>{{ coupon.name || "-" }}</td>
              <td>{{ coupon.durationNames || "-" }}</td>
              <td>{{ coupon.durationMonths || "-" }}</td>
              <td>
                {{
                  coupon.deductAmount !== undefined
                    ? `¥${coupon.deductAmount.toFixed(2)}`
                    : "-"
                }}
              </td>
              <td>
                {{ coupon.validDays !== undefined ? coupon.validDays : "-" }}
              </td>
              <td>{{ formatDateTime(coupon.effectiveStart || "") }}</td>
              <td>{{ formatDateTime(coupon.effectiveEnd || "") }}</td>
              <td>{{ formatCouponStatus(coupon.status) }}</td>
              <td>{{ formatUsageStatus(coupon.usageStatus) }}</td>
              <td>{{ formatDateTime(coupon.usedAt || "") }}</td>
              <td>{{ coupon.orderNo || "-" }}</td>
              <td>{{ coupon.usedUserName || "-" }}</td>
              <td>
                <el-button
                  type="primary"
                  link
                  size="small"
                  :disabled="coupon.usageStatus === 1"
                  @click="copyCouponInfo(coupon)"
                >
                  {{ $t("settingsSidebar.copy") }}
                </el-button>
              </td>
            </tr>
          </tbody>
        </table>
        <div
          v-if="couponsData.length === 0 && !couponsLoading"
          class="empty-state"
        >
          {{ $t("settingsSidebar.noCouponData") }}
        </div>
        <div v-if="couponsLoading" class="loading-state">
          <el-icon class="loading-icon" :size="24"><Loading /></el-icon>
          {{ $t("settingsSidebar.loading") }}
        </div>
      </div>
      <!-- 分页 -->
      <div class="pagination-wrapper" v-if="couponsTotal > 0">
        <el-pagination
          :current-page="couponsPage + 1"
          v-model:page-size="couponsPageSize"
          :total="couponsTotal"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleCouponsPageSizeChange"
          @current-change="handleCouponsPageChange"
        />
      </div>
    </div>

    <!-- 提现弹窗 -->
    <el-dialog
      v-model="withdrawDialogVisible"
      :title="$t('settingsSidebar.withdraw')"
      width="500px"
      :close-on-click-modal="false"
    >
      <el-form
        :model="withdrawForm"
        :rules="withdrawRules"
        ref="withdrawFormRef"
        label-width="130px"
        class="withdraw-form"
      >
        <el-alert
          :title="$t('settingsSidebar.withdrawRealNameTip')"
          type="warning"
          :closable="false"
          style="margin-bottom: 20px; white-space: pre-line"
        />
        <el-form-item
          :label="$t('settingsSidebar.withdrawAmount')"
          prop="amount"
        >
          <el-input
            v-model.number="withdrawForm.amount"
            type="number"
            :min="minTransferAmount"
            :placeholder="$t('settingsSidebar.enterWithdrawAmount')"
            @input="handleAmountInput"
          >
            <template #append>{{ $t("settingsSidebar.yuan") }}</template>
          </el-input>
        </el-form-item>
        <el-form-item
          v-if="withdrawForm.amount >= 2000"
          :label="$t('settingsSidebar.realName')"
          prop="userName"
        >
          <el-input
            v-model="withdrawForm.userName"
            :placeholder="$t('settingsSidebar.enterRealName')"
            maxlength="50"
          />
        </el-form-item>
        <el-form-item label="实际到账金额:">
          <span class="received-amount"
            >{{ withdrawForm.received.toFixed(2)
            }}{{ $t("settingsSidebar.yuan") }}</span
          >
        </el-form-item>
        <div class="tax-consent-checkbox">
          <el-checkbox v-model="withdrawForm.taxConsent" />
          <span class="tax-consent-text" @click="openTaxModal"
            >《扣税知情同意书》</span
          >
        </div>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="withdrawDialogVisible = false">
            {{ $t("settingsSidebar.cancel") }}
          </el-button>
          <el-button
            type="primary"
            @click="handleWithdrawSubmit"
            :loading="withdrawLoading"
          >
            {{ $t("settingsSidebar.confirmWithdraw") }}
          </el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 扣税详情弹窗 -->
    <el-dialog
      v-model="taxModalVisible"
      title="扣税详情"
      width="800px"
      :close-on-click-modal="true"
    >
      <component :is="taxDetailComponent" v-if="taxDetailComponent" />
    </el-dialog>
    <!-- 关闭提现订单弹窗 -->
    <el-dialog
      v-model="cancelWithdrawDialogVisible"
      :title="$t('settingsSidebar.orderDetail')"
      width="420px"
    >
      <div class="withdraw-cancel-content" v-if="selectedWithdrawRecord">
        <p class="withdraw-cancel-info">
          <span>{{ $t("settingsSidebar.timeCol") }}：</span>
          <span>{{ formatDateTime(selectedWithdrawRecord.date) }}</span>
        </p>
        <p class="withdraw-cancel-info">
          <span>提现金额：</span>
          <span>
            {{
              selectedWithdrawRecord.distributionAmount
                ? `${selectedWithdrawRecord.distributionAmount}${$t("settingsSidebar.yuan")}`
                : "-"
            }}
          </span>
        </p>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancelWithdrawDialogVisible = false">
            {{ $t("common.cancel") }}
          </el-button>
          <el-button
            type="primary"
            :loading="cancelWithdrawLoading"
            @click="handleConfirmCancelWithdraw"
          >
            取消提现
          </el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 支付二维码弹窗 -->
    <el-dialog
      v-model="qrCodeDialogVisible"
      :title="$t('settingsSidebar.paymentQRCode')"
      width="400px"
      :close-on-click-modal="false"
    >
      <div class="qr-code-dialog-content">
        <p class="qr-code-tip">
          {{ $t("settingsSidebar.paymentQRCodeTip") }}
        </p>
        <div class="qr-code-container">
          <div v-if="paymentQrCodeLoading" class="qr-code-loading">
            <el-icon class="loading-icon" :size="40"><Loading /></el-icon>
          </div>
          <img
            :src="`https://api.qrserver.com/v1/create-qr-code/?size=300x300&data=${encodeURIComponent(paymentQrCodeUrl)}`"
            alt="支付二维码"
            class="qr-code-image"
            :class="{ 'qr-code-image-hidden': paymentQrCodeLoading }"
            @load="paymentQrCodeLoading = false"
            @error="paymentQrCodeLoading = false"
          />
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="qrCodeDialogVisible = false">
            {{ $t("settingsSidebar.close") }}
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, watch, nextTick } from "vue";
import { ElMessage } from "element-plus";
import { Download, CopyDocument, Loading } from "@element-plus/icons-vue";
import { useI18n } from "vue-i18n";
import {
  getFundsTransactionsPage,
  getFundsBalance,
  createTransferOrder,
  cancelTransferOrder,
  getInvite,
  getInviteSummary,
  getMinTransferAmount,
  getInviteChains,
  type FundsTransactionItem,
  type InviteTreeItem,
  type InviteItem,
  type InviteChainItem,
} from "@/api/pay";
import { getCouponsPage, type CouponWithUsageRow } from "@/api/coupon";
import { getUserProfile } from "@/api/user";
import { apiGetCertificationStatus } from "@/api/user";
import { getMiniappUnlimitedQrcode } from "@/api/wechat";
import type { FormInstance, FormRules } from "element-plus";
import InviteTreeChildRows from "@/components/common/InviteTreeChildRows.vue";
import NP from "number-precision";

// 国际化
const { t } = useI18n();

// 定义接口
interface Record {
  id: number;
  date: string;
  type: string;
  transactionNo?: string; // 交易单号
  paidAmount?: number; // 被推荐人实付金额
  status: string;
  inviteLevel?: number; // 邀请等级
  sourceUserName?: string; // 来源用户名
  distributionAmount?: number; // 分成金额
  distributionRate?: string; // 分成比例
}

interface ReferralFilters {
  type: string;
  search: string;
}

interface FundsFilters {
  dateRange: [Date, Date] | null;
  type: string;
  status: string;
}

// 状态管理
const activeTab = ref<"referral" | "records" | "coupons">("referral");
const balance = ref(-1);
// 从 vite.config.ts 中注入的 VITE_APP_BASE_URL 获取地址
const baseUrl = import.meta.env.VITE_APP_BASE_URL;
const referralLink = ref(`${baseUrl}/linkmed/#/auth?ref=`);
const userName = ref("张三");
const showCouponsTab = ref(false); // 控制是否显示优惠券Tab
const isInternal = ref(false); // 是否是内部销售代表、内部销售专员

// 推荐记录筛选器
const referralFilters = ref<ReferralFilters>({
  type: "", // 默认选中"全部类型"
  search: "",
});

// 资金记录筛选器
const fundsFilters = ref<FundsFilters>({
  dateRange: null,
  type: "",
  status: "",
});

// 推荐记录数据
const records = ref<Record[]>([]);

// 邀请树数据
const inviteTreeData = ref<InviteTreeItem[]>([]);
// 原始邀请树数据（用于搜索恢复）
const originalInviteTreeData = ref<InviteTreeItem[] | null>(null);
// 展开状态：存储已展开的行ID
const expandedRows = ref<Set<number>>(new Set());
// 已加载子节点的节点ID集合（用于区分"未加载"和"已加载但没有子节点"）
const loadedChildrenNodes = ref<Set<number>>(new Set());
// 目标节点的子节点 userId 集合（用于隐藏展开/收起按钮）
const targetNodeChildrenUserIds = ref<Set<number>>(new Set());
// 邀请树搜索加载状态
const inviteTreeSearching = ref(false);
const inviteTreeTotal = ref(0);
// 当前交易类型筛选（用于加载子节点时传递）
const currentTransactionType = ref<string | undefined>(undefined);
// 邀请树汇总数据（从接口获取）
const inviteSummaryDescendantCount = ref<number | undefined>(undefined);
const inviteSummaryTotalAggregation = ref<number | undefined>(undefined);

// 资金记录分页
const fundsRecordsPage = ref(0);
const fundsRecordsPageSize = ref(20);
const fundsRecordsTotal = ref(0);

// 优惠券数据
const couponsData = ref<CouponWithUsageRow[]>([]);
const couponsLoading = ref(false);
const couponsPage = ref(0);
const couponsPageSize = ref(20);
const couponsTotal = ref(0);

// 优惠券筛选器
const couponFilters = ref({
  type: "", // 优惠券类型
  usageStatus: "" as number | string, // 使用状态
  dateRange: null as [string, string] | null, // 有效期日期范围
});

// 二维码加载状态
const qrcodeLoading = ref(true);
// 小程序码 base64 数据（用于海报展示和下载）
const qrcodeUrl = ref("");

// 海报大图和二维码覆盖层 DOM 引用（用于精确计算下载时二维码区域）
const posterImageEl = ref<HTMLImageElement | null>(null);
const posterQrcodeOverlayEl = ref<HTMLDivElement | null>(null);

// 选中的海报（默认1）
const selectedPoster = ref(1);

// 提现相关状态
const withdrawDialogVisible = ref(false);
const withdrawLoading = ref(false);
const withdrawFormRef = ref<FormInstance>();
const withdrawForm = ref({
  amount: 0,
  received: 0,
  userName: "",
  taxConsent: false,
});
// 提现最小金额（默认100，从接口获取）
const minTransferAmount = ref(1);
// 扣税详情弹窗相关状态
const taxModalVisible = ref(false);
const taxDetailComponent = ref<any>(null);
// 关闭提现订单弹窗相关状态
const cancelWithdrawDialogVisible = ref(false);
const cancelWithdrawLoading = ref(false);
const selectedWithdrawRecord = ref<Record | null>(null);

// 二维码弹窗相关状态
const qrCodeDialogVisible = ref(false);
const paymentQrCodeUrl = ref("");
const paymentQrCodeLoading = ref(true);

// 加载小程序码（需在获取到 personalInviteCode 后调用）
const loadQrcode = async (inviteCode: string) => {
  if (!inviteCode) {
    qrcodeLoading.value = false;
    return;
  }
  try {
    qrcodeLoading.value = true;
    qrcodeUrl.value = "";
    const scene = `ref=${inviteCode}`;
    const page = "components/auth/login/login";
    const base64Url = await getMiniappUnlimitedQrcode(scene, page);
    qrcodeUrl.value = base64Url;
  } catch (error) {
    console.error("加载小程序码失败:", error);
    qrcodeUrl.value = "";
    ElMessage.error(t("settingsSidebar.miniappQrcodeLoadFailed") || "小程序码加载失败");
  } finally {
    qrcodeLoading.value = false;
  }
};

// 监听优惠券筛选器变化，自动重新加载数据
watch(
  () => couponFilters.value,
  () => {
    if (activeTab.value === "coupons") {
      couponsPage.value = 0; // 重置到第一页
      loadCoupons();
    }
  },
  { deep: true },
);

// 监听推荐记录交易类型筛选器变化，重新加载推荐记录表格数据和汇总数据
watch(
  () => referralFilters.value.type,
  (newType) => {
    // 只在推荐记录 tab 时重新加载
    if (activeTab.value === "records") {
      // 将国际化值转换为中文值
      const chineseType = newType ? getTransactionTypeFromI18n(newType) : "";
      // 如果选择的是"收益"或"销售分成"，传递对应的 transactionType 参数
      if (chineseType === "收益" || chineseType === "销售分成") {
        loadInviteTree(chineseType);
        loadInviteSummary(chineseType);
      } else {
        // 如果选择的是"全部类型"或其他类型，不传递参数
        loadInviteTree();
        loadInviteSummary();
      }
    }
  },
);

// 监听资金记录筛选器变化，自动重新加载数据
watch(
  () => fundsFilters.value,
  () => {
    // 只在资金记录 tab 时重新加载
    if (activeTab.value === "records") {
      fundsRecordsPage.value = 0; // 重置到第一页
      loadFundsTransactions();
    }
  },
  { deep: true },
);

// 计算过滤后的记录（服务端筛选，直接返回接口数据）
const filteredRecords = computed(() => {
  return records.value;
});

// 邀请树总记录数和总收益（直接使用接口返回的数据）
const totalInviteRecordsCount = ref<number>(0);
const totalInviteEarnings = ref<string>("0.00");

// 方法
const switchTab = (tab: "referral" | "records" | "coupons") => {
  activeTab.value = tab;
  // 切换到优惠券 tab 时加载数据
  if (tab === "coupons" && couponsData.value.length === 0) {
    loadCoupons();
  }
  // 切换到推荐记录 tab 时加载汇总数据
  if (tab === "records") {
    const chineseType = referralFilters.value.type
      ? getTransactionTypeFromI18n(referralFilters.value.type)
      : "";
    if (chineseType === "收益" || chineseType === "销售分成") {
      loadInviteSummary(chineseType);
    } else {
      loadInviteSummary();
    }
  }
};

// 提现表单验证规则
const withdrawRules = computed<FormRules>(() => ({
  amount: [
    {
      required: true,
      message: "请输入提现金额",
      trigger: "blur",
    },
    {
      type: "number",
      min: minTransferAmount.value,
      message: `提现金额最小为${minTransferAmount.value}元`,
      trigger: "blur",
    },
    {
      validator: (_rule, value, callback) => {
        if (value > balance.value) {
          callback(new Error("提现金额不能超过可用金额"));
        } else {
          callback();
        }
      },
      trigger: "blur",
    },
  ],
  userName: [
    {
      required: withdrawForm.value.amount >= 2000,
      message: "请输入微信实名认证姓名",
      trigger: "blur",
    },
    {
      min: 2,
      max: 50,
      message: "实名长度应在2-50个字符之间",
      trigger: "blur",
    },
  ],
}));

// 处理金额输入
const handleAmountInput = () => {
  // 如果金额小于等于2000，清空实名
  if (withdrawForm.value.amount < 2000) {
    withdrawForm.value.userName = "";
  }
  // 更新实际到账金额：扣除20%税率，实际到账金额=提现金额×80%
  withdrawForm.value.received = NP.times(withdrawForm.value.amount || 0, 0.8);
};

// 打开提现弹窗
const handleWithdraw = async () => {
  // 获取提现最小金额
  try {
    const response = await getMinTransferAmount();
    if (response.data !== null && response.data !== undefined) {
      minTransferAmount.value = response.data;
    }
  } catch (error) {
    console.error("获取提现最小金额失败:", error);
    // 失败时使用默认值1
    minTransferAmount.value = 1;
  }

  withdrawForm.value = {
    amount: 0,
    received: 0,
    userName: "",
    taxConsent: false,
  };
  withdrawDialogVisible.value = true;
  // 重置表单验证状态
  nextTick(() => {
    withdrawFormRef.value?.clearValidate();
  });
};

// 打开扣税详情弹窗（懒加载）
const openTaxModal = async () => {
  taxModalVisible.value = true;
  // 动态引入独立组件（懒加载）
  if (!taxDetailComponent.value) {
    const module = await import("@/components/common/TaxDetail.vue");
    taxDetailComponent.value = module.default;
  }
};

// 点击资金记录行（仅对提现类型生效）
const handleFundsRecordClick = (record: Record) => {
  // 只对提现类型记录处理
  if (formatTransactionType(record.type) !== "提现") {
    return;
  }
  // 没有交易单号无法关闭
  if (!record.transactionNo) {
    ElMessage.warning("当前记录缺少交易单号，无法关闭提现订单");
    return;
  }

  selectedWithdrawRecord.value = record;
  cancelWithdrawDialogVisible.value = true;
};

// 确认关闭提现订单
const handleConfirmCancelWithdraw = async () => {
  if (
    !selectedWithdrawRecord.value ||
    !selectedWithdrawRecord.value.transactionNo
  ) {
    return;
  }

  try {
    cancelWithdrawLoading.value = true;
    await cancelTransferOrder(selectedWithdrawRecord.value.transactionNo);

    ElMessage.success("提现订单关闭成功");
    cancelWithdrawDialogVisible.value = false;
    selectedWithdrawRecord.value = null;

    // 重新加载资金余额和资金记录
    await Promise.all([loadFundsBalance(), loadFundsTransactions()]);
  } catch (error: any) {
    console.error("关闭提现订单失败:", error);
    const errorMessage =
      error?.response?.data?.message ||
      error?.message ||
      "关闭提现订单失败，请稍后重试";
    ElMessage.error(errorMessage);
  } finally {
    cancelWithdrawLoading.value = false;
  }
};

// 提交提现
const handleWithdrawSubmit = async () => {
  if (!withdrawFormRef.value) return;

  try {
    // 表单验证
    await withdrawFormRef.value.validate();

    // 如果金额大于2000，验证实名
    if (withdrawForm.value.amount >= 2000 && !withdrawForm.value.userName) {
      ElMessage.warning(t("settingsSidebar.withdrawAmountExceeds2000"));
      return;
    }

    // 验证是否勾选扣税知情同意书
    if (!withdrawForm.value.taxConsent) {
      ElMessage.warning("请先确认勾选《扣税知情同意书》");
      return;
    }

    withdrawLoading.value = true;

    // 创建提现订单
    const response = await createTransferOrder({
      amount: withdrawForm.value.amount,
      received: withdrawForm.value.received,
      userName:
        withdrawForm.value.amount >= 2000
          ? withdrawForm.value.userName
          : undefined,
    });
    if (response.data) {
      // 提现成功后，刷新资金余额和资金记录
      await Promise.all([loadFundsBalance(), loadFundsTransactions()]);
      ElMessage.success(t("settingsSidebar.withdrawOrderCreatedSuccess"));

      // 如果返回了跳转链接，显示二维码弹窗
      if (response.data.url) {
        paymentQrCodeUrl.value = response.data.url;
        paymentQrCodeLoading.value = true;
        withdrawDialogVisible.value = false;
        qrCodeDialogVisible.value = true;
      } else {
        // 关闭弹窗并刷新余额
        withdrawDialogVisible.value = false;
      }
    } else {
      ElMessage.error("提现订单创建失败，请重试");
    }
  } catch (error: any) {
    console.error("提现失败:", error);
    if (error?.response?.data?.message) {
      ElMessage.error(error.response.data.message);
    } else {
      ElMessage.error("提现失败，请重试");
    }
  } finally {
    withdrawLoading.value = false;
  }
};

// 下载海报（将小程序码叠加到海报上）
const downloadPoster = async (posterNumber: number) => {
  if (!qrcodeUrl.value) {
    ElMessage.error(
      t("settingsSidebar.miniappQrcodeLoadFailed") ||
        "请等待小程序码加载完成后再下载",
    );
    return;
  }
  ElMessage.warning(t("settingsSidebar.preparingDownloadPoster"));

  // 优先根据当前页面上包裹二维码的 div 和海报图的真实位置来计算相对比例，
  // 这样生成的海报中的白色方块能够尽量与设计稿中的白色背景区域重合
  let qrBoxRatio:
    | {
        xRatio: number;
        yRatio: number;
        widthRatio: number;
        heightRatio: number;
      }
    | null = null;

  const imgEl = posterImageEl.value;
  const overlayEl = posterQrcodeOverlayEl.value;

  if (imgEl && overlayEl) {
    const imgRect = imgEl.getBoundingClientRect();
    const overlayRect = overlayEl.getBoundingClientRect();

    if (imgRect.width > 0 && imgRect.height > 0) {
      const widthRatio = overlayRect.width / imgRect.width;
      const heightRatio = overlayRect.height / imgRect.height;
      const xRatio = (overlayRect.left - imgRect.left) / imgRect.width;
      const yRatio = (overlayRect.top - imgRect.top) / imgRect.height;

      qrBoxRatio = {
        xRatio,
        yRatio,
        widthRatio,
        heightRatio,
      };
    }
  }

  try {
    const posterImage = new Image();
    posterImage.crossOrigin = "anonymous";

    const qrCodeImage = new Image();
    qrCodeImage.crossOrigin = "anonymous";

    const posterSrc = `/report${posterNumber}.jpg`;

    await new Promise<void>((resolve, reject) => {
      posterImage.onload = () => {
        qrCodeImage.onload = () => {
          try {
            const canvas = document.createElement("canvas");
            const ctx = canvas.getContext("2d");

            if (!ctx) {
              reject(new Error("无法创建canvas上下文"));
              return;
            }

            // 设置canvas尺寸为海报尺寸
            canvas.width = posterImage.width;
            canvas.height = posterImage.height;

            // 绘制海报背景
            ctx.drawImage(posterImage, 0, 0);

            // 默认的二维码区域估算（作为兜底）
            let whiteBoxSize = Math.min(
              Math.max(canvas.width * 0.28, 220), // 28% 宽度，最小 220px
              520, // 最大 520px
            );
            let qrX = (canvas.width - whiteBoxSize) / 2; // 水平居中
            // 白色框垂直位置：略微上移，使二维码在白色方块内居中
            let qrY = canvas.height * 0.865 - whiteBoxSize;

            // 如果能够从 DOM 中获取到包裹二维码 div 的相对位置，
            // 则使用该信息来精确计算在高分辨率海报上的绘制区域
            if (qrBoxRatio) {
              const boxWidth = canvas.width * qrBoxRatio.widthRatio;
              const boxHeight = canvas.height * qrBoxRatio.heightRatio;
              // 设计上的白色方块是近似正方形，这里取宽高中的较小值，保证二维码完整显示
              whiteBoxSize = Math.min(boxWidth, boxHeight);
              qrX = canvas.width * qrBoxRatio.xRatio;
              qrY = canvas.height * qrBoxRatio.yRatio;
            }

            // 绘制白色背景（与海报白色方块重叠）
            ctx.fillStyle = "#ffffff";
            ctx.fillRect(qrX, qrY, whiteBoxSize, whiteBoxSize);

            // 二维码完整绘制在白框内，不裁剪，避免边缘被截断
            ctx.drawImage(qrCodeImage, qrX, qrY, whiteBoxSize, whiteBoxSize);

            // 转换为blob并下载
            canvas.toBlob((blob) => {
              if (blob) {
                const url = URL.createObjectURL(blob);
                const link = document.createElement("a");
                link.href = url;
                link.download = `${t("settingsSidebar.posterDownloadFileName")}.png`;
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
                URL.revokeObjectURL(url);
                ElMessage.success(t("settingsSidebar.posterDownloadSuccess"));
                resolve();
              } else {
                reject(new Error("无法生成图片"));
              }
            }, "image/png");
          } catch (error) {
            reject(error);
          }
        };
        qrCodeImage.onerror = () => reject(new Error("小程序码加载失败"));
        qrCodeImage.src = qrcodeUrl.value;
      };
      posterImage.onerror = () => reject(new Error("海报图片加载失败"));
      posterImage.src = posterSrc;
    });
  } catch (error: any) {
    ElMessage.error(t("settingsSidebar.posterDownloadFailed"));
  }
};

const copyLink = () => {
  navigator.clipboard.writeText(referralLink.value);
  ElMessage.success(t("settingsSidebar.linkCopied"));
};

// 复制优惠券信息
const copyCouponInfo = (coupon: CouponWithUsageRow) => {
  // 如果已使用，不允许复制
  if (coupon.usageStatus === 1) {
    return;
  }
  const info = [
    `${t("settingsSidebar.couponNumber")}：${coupon.code || "-"}`,
    `${t("settingsSidebar.couponNameCol")}：${coupon.name || "-"}`,
    `${t("settingsSidebar.amountLabel")}：${coupon.deductAmount !== undefined ? `¥${coupon.deductAmount.toFixed(2)}` : "-"}`,
    `${t("settingsSidebar.memberDurationTypeCol")}：${coupon.durationNames || "-"}`,
    `${t("settingsSidebar.memberDurationMonthsCol")}：${coupon.durationMonths || "-"}`,
    `${t("settingsSidebar.couponDeductAmountCol")}：${coupon.deductAmount !== undefined ? `¥${coupon.deductAmount.toFixed(2)}` : "-"}`,
    `${t("settingsSidebar.validDaysCol")}：${coupon.validDays !== undefined ? coupon.validDays : "-"}`,
    `${t("settingsSidebar.effectiveStartTimeCol")}：${formatDateTime(coupon.effectiveStart || "")}`,
    `${t("settingsSidebar.effectiveEndTimeCol")}：${formatDateTime(coupon.effectiveEnd || "")}`,
  ].join("\n");

  navigator.clipboard.writeText(info);
  ElMessage.success(t("settingsSidebar.couponInfoCopied"));
};

// 格式化日期，显示时分秒
const formatDateTime = (dateStr: string): string => {
  if (!dateStr) return "";

  // 如果日期字符串包含时间部分，直接格式化
  if (dateStr.includes("T") || dateStr.includes(" ")) {
    const date = new Date(dateStr);
    if (isNaN(date.getTime())) return dateStr;

    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, "0");
    const day = String(date.getDate()).padStart(2, "0");
    const hours = String(date.getHours()).padStart(2, "0");
    const minutes = String(date.getMinutes()).padStart(2, "0");
    const seconds = String(date.getSeconds()).padStart(2, "0");

    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
  }

  // 如果只有日期部分，添加默认时间 00:00:00
  return `${dateStr} 00:00:00`;
};

// 将日期格式化为 ISO 日期时间字符串（格式：YYYY-MM-DDTHH:mm:ss，不带时区）
// 后端会按照服务器时区解析此格式
const formatLocalISOString = (date: Date): string => {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, "0");
  const day = String(date.getDate()).padStart(2, "0");
  const hours = String(date.getHours()).padStart(2, "0");
  const minutes = String(date.getMinutes()).padStart(2, "0");
  const seconds = String(date.getSeconds()).padStart(2, "0");
  return `${year}-${month}-${day}T${hours}:${minutes}:${seconds}`;
};

// 加载用户信息并更新推荐链接（从接口获取）
const loadUserProfile = async () => {
  try {
    // 直接调用接口获取用户信息
    const userProfile = await getUserProfile();
    // 从接口返回的用户信息中获取 personalInviteCode
    const personalInviteCode = userProfile?.personalInviteCode;

    if (personalInviteCode) {
      // 替换推荐链接中 ref= 后面的内容
      referralLink.value = referralLink.value.replace(
        /ref=[^&]*/,
        `ref=${personalInviteCode}`,
      );
      // 加载小程序码（用于海报展示）
      await loadQrcode(personalInviteCode);
    } else {
      qrcodeLoading.value = false;
    }

    // 从接口返回的用户信息中获取用户名（如果可用）
    if (userProfile?.name) {
      userName.value = userProfile.name;
    }
  } catch (error) {
    console.error("加载用户信息失败:", error);
    qrcodeLoading.value = false;
    // 不显示错误提示，避免影响用户体验
  }
};

// 加载资金余额
const loadFundsBalance = async () => {
  try {
    const response = await getFundsBalance();
    if (response.data) {
      balance.value = response.data.balance || 0;
      // balance.value = 8888;   // 暂时测试用
    }
  } catch (error) {
    ElMessage.error("加载余额失败");
  }
};

// 加载资金交易记录（使用服务端分页和筛选）
const loadFundsTransactions = async () => {
  try {
    // 构建请求参数
    const params: any = {
      page: fundsRecordsPage.value,
      size: fundsRecordsPageSize.value,
    };

    // 日期范围筛选
    if (
      fundsFilters.value.dateRange &&
      fundsFilters.value.dateRange.length === 2
    ) {
      const [start, end] = fundsFilters.value.dateRange;

      // 处理开始日期：确保是 Date 对象并设置为当天的 00:00:00.000
      const startDate = new Date(start);
      // 验证日期是否有效
      if (!isNaN(startDate.getTime())) {
        // 重置时间部分，确保是当天的开始（00:00:00.000）
        startDate.setHours(0, 0, 0, 0);
        // 使用本地时间格式，避免时区转换问题
        params.fromTime = formatLocalISOString(startDate);
      }

      // 处理结束日期：确保是 Date 对象并设置为当天的 23:59:59.999
      const endDate = new Date(end);
      // 验证日期是否有效
      if (!isNaN(endDate.getTime())) {
        // 重置时间部分，确保是当天的结束（23:59:59.999）
        endDate.setHours(23, 59, 59, 999);
        // 使用本地时间格式，避免时区转换问题
        params.toTime = formatLocalISOString(endDate);
      }
    }

    // 交易类型筛选
    if (fundsFilters.value.type && fundsFilters.value.type !== "") {
      params.transactionType = fundsFilters.value.type;
    }

    // 交易状态筛选
    if (fundsFilters.value.status && fundsFilters.value.status !== "") {
      params.status = fundsFilters.value.status;
    }

    const response = await getFundsTransactionsPage(params);
    if (response.data) {
      // 将接口返回的数据映射到 Record 类型
      records.value = (response.data.items || []).map(
        (item: FundsTransactionItem) => ({
          id: item.id || 0,
          date: item.transactionTime || "",
          type: item.transactionType || "-",
          transactionNo: item.transactionNo,
          paidAmount: item.paidAmount,
          status: item.status || "-",
          inviteLevel: item.inviteLevel,
          sourceUserName: item.sourceUserName,
          distributionAmount: item.amount,
          distributionRate: item.distributionRate,
        }),
      );
      fundsRecordsTotal.value = response.data.total || 0;
    }
  } catch (error) {
    ElMessage.error("加载资金记录失败");
  }
};

// 推荐记录表 - 注册时间排序方式（默认旧的在前，即升序）
const inviteRegisteredSortOrder = ref<"asc" | "desc">("asc");

// 推荐记录搜索防抖定时器
let inviteSearchTimeout: number | undefined;

// 将日期字符串安全地转换为时间戳（用于排序）
const parseRegisteredTime = (dateStr?: string | null): number => {
  if (!dateStr) return 0;
  const time = new Date(dateStr).getTime();
  return Number.isNaN(time) ? 0 : time;
};

// 递归对邀请树进行排序：
// 1. 顶层每棵树的根节点按注册时间升序
// 2. 每棵树内部，每一层的 children 也按注册时间升序
const sortInviteTreeByRegisteredTime = (
  items: InviteTreeItem[] = [],
  order: "asc" | "desc" = "asc",
): InviteTreeItem[] => {
  const direction = order === "asc" ? 1 : -1;
  const sorted = [...items].sort(
    (a, b) =>
      direction *
      (parseRegisteredTime(a.registeredAt) -
        parseRegisteredTime(b.registeredAt)),
  );

  return sorted.map((item) => {
    const children =
      item.children && item.children.length > 0
        ? sortInviteTreeByRegisteredTime(item.children, order)
        : item.children;

    return {
      ...item,
      children,
    };
  });
};

// 根据 userId 集合过滤邀请树，只保留在邀请链上的节点及其祖先
const filterInviteTreeByUserIds = (
  items: InviteTreeItem[],
  userIdSet: Set<number>,
): InviteTreeItem[] => {
  const result: InviteTreeItem[] = [];

  for (const node of items) {
    const filteredChildren = node.children
      ? filterInviteTreeByUserIds(node.children, userIdSet)
      : [];

    if (userIdSet.has(node.userId) || filteredChildren.length > 0) {
      result.push({
        ...node,
        children: filteredChildren,
      });
    }
  }

  return result;
};

// 将 InviteItem 转换为 InviteTreeItem
const convertInviteItemToTreeItem = (item: InviteItem): InviteTreeItem => {
  return {
    userId: item.userId ?? 0,
    username: item.username ?? "",
    registeredAt: item.registeredAt ?? "",
    inviteLevel: item.inviteLevel ?? null,
    salesLevel: item.salesLevel ?? null, // 保持 null，不转换为 0
    maskedPhone: item.maskedPhone ?? null,
    maskedEmail: item.maskedEmail ?? "",
    totalEarnings: item.totalEarnings ?? 0,
    children: item.children?.map(convertInviteItemToTreeItem) ?? [],
    descendantCount: item.descendantCount,
  };
};

// 在树中查找指定 userId 的节点
const findNodeInTree = (
  items: InviteTreeItem[],
  userId: number,
): InviteTreeItem | null => {
  for (const item of items) {
    if (item.userId === userId) {
      return item;
    }
    if (item.children && item.children.length > 0) {
      const found = findNodeInTree(item.children, userId);
      if (found) {
        return found;
      }
    }
  }
  return null;
};

// 推荐记录表格数据
const loadInviteTree = async (transactionType?: string) => {
  try {
    // 保存当前交易类型，用于后续加载子节点
    currentTransactionType.value = transactionType;

    const params: any = {
      level: 1,
    };
    if (transactionType) {
      params.transactionType = transactionType;
    }
    const response = await getInvite(params);
    if (response.data) {
      // 将 InviteItem[] 转换为 InviteTreeItem[]
      const treeItems = response.data.map(convertInviteItemToTreeItem);
      // 对邀请树数据按注册时间进行排序：
      // 1. 每棵树的根节点按注册时间
      // 2. 每棵树内部同层级子节点按注册时间
      // 顺序由 inviteRegisteredSortOrder 控制（默认升序：旧的在前）
      inviteTreeData.value = sortInviteTreeByRegisteredTime(
        treeItems,
        inviteRegisteredSortOrder.value,
      );
      // 重置原始邀请树数据（用于搜索恢复）
      originalInviteTreeData.value = null;
      inviteTreeTotal.value = treeItems.length;
      // 重置展开状态和已加载节点标记
      expandedRows.value.clear();
      loadedChildrenNodes.value.clear();
      // 如果初始数据中有子节点，标记为已加载
      treeItems.forEach((item) => {
        if (item.children && item.children.length > 0) {
          loadedChildrenNodes.value.add(item.userId);
        }
      });
    }
  } catch (error) {
    ElMessage.error("加载推荐信息失败");
  }
};

// 加载邀请树汇总信息（总人数和总收益）
const loadInviteSummary = async (transactionType?: string) => {
  try {
    const params: any = {};
    if (transactionType) {
      params.transactionType = transactionType;
    }
    const response = await getInviteSummary(params);
    if (response.data) {
      inviteSummaryDescendantCount.value = response.data.descendantCount;
      inviteSummaryTotalAggregation.value = response.data.totalAggregation;
      // 直接使用接口返回的数据更新显示值
      totalInviteRecordsCount.value = response.data.descendantCount ?? 0;
      totalInviteEarnings.value = response.data.totalAggregation
        ? Number(NP.strip(response.data.totalAggregation)).toFixed(2)
        : "0.00";
    }
  } catch (error) {
    console.error("加载邀请树汇总信息失败:", error);
    // 失败时重置为默认值
    inviteSummaryDescendantCount.value = undefined;
    inviteSummaryTotalAggregation.value = undefined;
    totalInviteRecordsCount.value = 0;
    totalInviteEarnings.value = "0.00";
  }
};

// 切换推荐记录表中注册时间的排序方式
const toggleInviteRegisteredSortOrder = () => {
  inviteRegisteredSortOrder.value =
    inviteRegisteredSortOrder.value === "asc" ? "desc" : "asc";

  // 当前已有数据时，直接在前端重新排序，避免重复请求接口
  if (inviteTreeData.value && inviteTreeData.value.length > 0) {
    inviteTreeData.value = sortInviteTreeByRegisteredTime(
      inviteTreeData.value,
      inviteRegisteredSortOrder.value,
    );
  }
};

// 根据邀请链构造邀请树（通过多次调用 getInvite 接口）
// inviteChain: [316, 315, 314] 表示 316 -> 315 -> 314（从子到父，从底层到根）
// 最后一项 314 是当前用户的上级，从最后一项开始调用接口：
// 第一次：getInvite({ level: 0, pid: 314 }) - 获取 314 的子节点（包括 315）
// 第二次：getInvite({ level: 1, pid: 315 }) - 获取 315 的子节点（包括 316）
// 以此类推
const buildInviteTreeFromChains = async (
  chains: InviteChainItem[],
  transactionType?: string,
): Promise<InviteTreeItem[]> => {
  if (!chains || chains.length === 0) {
    return [];
  }

  // 1. 解析所有邀请链，构建父子关系映射
  const parentMap = new Map<number, number>(); // 子节点ID -> 父节点ID
  const allUserIds = new Set<number>();
  const rootUserIds = new Set<number>(); // 根节点ID集合（邀请链的倒数第二项，最后一项是当前用户的上级，不显示）
  const startUserIdMap = new Map<number, number>(); // userId -> startUserId（用于标识是否是搜索的目标节点）

  chains.forEach((item: InviteChainItem) => {
    const chain = item.inviteChain || [];
    if (chain.length === 0) return;

    const startUserId = item.startUserId;

    // 收集所有 userId（不包括最后一项，因为最后一项是当前用户的上级，不显示）
    for (let i = 0; i < chain.length - 1; i++) {
      const id = chain[i];
      if (typeof id === "number") {
        allUserIds.add(id);
        // 保存 startUserId 映射（用于标识是否是搜索的目标节点）
        if (startUserId !== undefined) {
          startUserIdMap.set(id, startUserId);
        }
      }
    }

    // 构建父子关系：链路的第一个是子节点，后续是父节点
    // 注意：最后一项（当前用户的上级）不参与构建
    for (let i = 0; i < chain.length - 2; i++) {
      const childId = chain[i];
      const parentId = chain[i + 1];
      if (typeof childId === "number" && typeof parentId === "number") {
        parentMap.set(childId, parentId);
      }
    }

    // 链路的倒数第二项是根节点（最后一项是当前用户的上级，不显示）
    if (chain.length >= 2) {
      const rootId = chain[chain.length - 2];
      if (typeof rootId === "number") {
        rootUserIds.add(rootId);
      }
    }
  });

  if (allUserIds.size === 0) {
    return [];
  }

  // 2. 获取所有节点的详细信息（通过调用 getInvite）
  const nodeMap = new Map<number, InviteTreeItem>(); // userId -> 节点信息
  const calledApiSet = new Set<string>(); // 记录已调用的 level+pid 组合，避免重复调用

  // 遍历每个邀请链，从最后一项开始，逐层调用接口
  for (const item of chains) {
    const chain = item.inviteChain || [];
    if (chain.length === 0) continue;

    // 从邀请链的最后一项开始，从后往前遍历
    // 第一次调用：level = 0, pid = 链路的最后一项（根节点，当前用户的上级）
    // 第二次调用：level = 1, pid = 链路的倒数第二项
    // 以此类推，直到倒数第二项（链路的第一个节点没有子节点，不需要调用）
    let currentLevel = 0;
    // 遍历到倒数第二项即可（i >= 1），因为最后一项（i=0）是链路的第一个节点，没有子节点
    for (let i = chain.length - 1; i >= 1; i--) {
      const pid = chain[i];
      if (typeof pid !== "number") continue;

      // 检查是否已经调用过这个 level+pid 组合
      const apiKey = `${currentLevel}_${pid}`;
      if (calledApiSet.has(apiKey)) {
        // 已经调用过，跳过
        currentLevel++;
        continue;
      }

      try {
        const params: any = {
          level: currentLevel,
          pid: pid,
        };
        if (transactionType) {
          params.transactionType = transactionType;
        }

        const response = await getInvite(params);
        const items = response.data || [];

        // 标记已调用
        calledApiSet.add(apiKey);

        // 保存获取到的节点信息（只保存 inviteChain 中的节点）
        items.forEach((item: InviteItem) => {
          if (item.userId && allUserIds.has(item.userId)) {
            // 只保存 inviteChain 数组中的节点，过滤掉其他子节点
            const treeNode = convertInviteItemToTreeItem(item);
            // 清空 children，因为我们要根据 inviteChain 重新构建
            // 添加 startUserId 信息（用于标识是否是搜索的目标节点）
            const startUserId = startUserIdMap.get(item.userId);
            nodeMap.set(item.userId, {
              ...treeNode,
              children: [],
              startUserId: startUserId,
            });
          }
        });

        // level 递增，准备下一次调用
        currentLevel++;
      } catch (error) {
        console.error(
          `获取节点信息失败 (level: ${currentLevel}, pid: ${pid}):`,
          error,
        );
        // 即使失败，也标记为已调用，避免重复尝试
        calledApiSet.add(apiKey);
        currentLevel++;
      }
    }
  }

  // 3. 根据父子关系构建树结构（只包含 inviteChain 中的节点）
  const rootNodes: InviteTreeItem[] = [];

  // 先添加所有根节点（只添加在 nodeMap 中存在的节点）
  rootUserIds.forEach((rootId) => {
    const rootNode = nodeMap.get(rootId);
    if (rootNode) {
      rootNodes.push({ ...rootNode, children: [] });
    } else {
      // 如果根节点不在 nodeMap 中，说明接口没有返回该节点，跳过
      console.warn(`根节点 ${rootId} 不在返回的数据中`);
    }
  });

  // 如果没有根节点，返回空数组
  if (rootNodes.length === 0) {
    console.warn(
      "没有找到任何根节点，可能接口返回的数据中没有 inviteChain 中的节点",
    );
    return [];
  }

  // 递归构建子树（只包含 inviteChain 中的节点）
  const buildSubtree = (parentNode: InviteTreeItem): void => {
    // 找到所有以当前节点为父节点的子节点（只从 parentMap 中查找，确保只包含 inviteChain 中的节点）
    const children: InviteTreeItem[] = [];
    parentMap.forEach((parentId, childId) => {
      if (parentId === parentNode.userId) {
        const childNode = nodeMap.get(childId);
        if (childNode) {
          const childTreeNode = { ...childNode, children: [] };
          buildSubtree(childTreeNode);
          children.push(childTreeNode);
        } else {
          // 如果子节点不在 nodeMap 中，说明接口没有返回该节点，跳过
          console.warn(`子节点 ${childId} 不在返回的数据中`);
        }
      }
    });

    // 按注册时间排序子节点
    parentNode.children = sortInviteTreeByRegisteredTime(
      children,
      inviteRegisteredSortOrder.value,
    );
  };

  // 为每个根节点构建子树
  rootNodes.forEach((rootNode) => {
    buildSubtree(rootNode);
  });

  // 4. 按注册时间排序根节点
  return sortInviteTreeByRegisteredTime(
    rootNodes,
    inviteRegisteredSortOrder.value,
  );
};

// 处理推荐记录搜索输入（用户名 / 手机号后4位），防抖调用邀请链接口
const handleReferralSearchInput = () => {
  if (inviteSearchTimeout) {
    window.clearTimeout(inviteSearchTimeout);
  }

  inviteSearchTimeout = window.setTimeout(async () => {
    const keyword = referralFilters.value.search.trim();

    // 搜索为空时恢复原始邀请树数据
    if (!keyword) {
      if (originalInviteTreeData.value) {
        inviteTreeData.value = originalInviteTreeData.value;
        originalInviteTreeData.value = null;
      } else {
        // 如果没有备份，重新按当前交易类型加载
        const chineseType = referralFilters.value.type
          ? getTransactionTypeFromI18n(referralFilters.value.type)
          : "";
        if (chineseType === "收益" || chineseType === "销售分成") {
          await loadInviteTree(chineseType);
        } else {
          await loadInviteTree();
        }
      }
      expandedRows.value.clear();
      loadedChildrenNodes.value.clear();
      targetNodeChildrenUserIds.value.clear();
      return;
    }

    try {
      // 设置搜索加载状态
      inviteTreeSearching.value = true;

      // 首次搜索时备份当前完整邀请树数据
      if (!originalInviteTreeData.value && inviteTreeData.value.length > 0) {
        originalInviteTreeData.value = JSON.parse(
          JSON.stringify(inviteTreeData.value),
        );
      }

      // 调用邀请链接口获取邀请链
      const response = await getInviteChains({ q: keyword });
      const chains = response.data || [];

      // 没有匹配结果时显示空表
      if (!chains || chains.length === 0) {
        inviteTreeData.value = [];
        expandedRows.value.clear();
        loadedChildrenNodes.value.clear();
        targetNodeChildrenUserIds.value.clear();
        inviteTreeSearching.value = false;
        return;
      }

      // 获取当前交易类型
      const chineseType = referralFilters.value.type
        ? getTransactionTypeFromI18n(referralFilters.value.type)
        : "";
      const transactionType =
        chineseType === "收益" || chineseType === "销售分成"
          ? chineseType
          : undefined;

      // 根据邀请链构造邀请树
      const searchTree = await buildInviteTreeFromChains(
        chains,
        transactionType,
      );
      inviteTreeData.value = searchTree;

      // 收集所有在邀请链中的 userId 和目标节点（startUserId）
      const userIdSet = new Set<number>();
      const targetUserIds = new Set<number>(); // 目标节点集合（startUserId）
      // 构建父节点到子节点的映射（用于判断哪些节点在邀请链中有子节点）
      const parentToChildrenMap = new Map<number, Set<number>>();

      chains.forEach((item: InviteChainItem) => {
        // 收集 startUserId（目标节点）
        if (item.startUserId !== undefined) {
          targetUserIds.add(item.startUserId);
        }
        // 收集所有在邀请链中的 userId（不包括最后一项，因为最后一项是当前用户的上级，不显示）
        const chain = item.inviteChain || [];
        for (let i = 0; i < chain.length - 1; i++) {
          const id = chain[i];
          if (typeof id === "number") {
            userIdSet.add(id);
          }
        }

        // 构建父节点到子节点的映射
        for (let i = 0; i < chain.length - 2; i++) {
          const childId = chain[i];
          const parentId = chain[i + 1];
          if (typeof childId === "number" && typeof parentId === "number") {
            if (!parentToChildrenMap.has(parentId)) {
              parentToChildrenMap.set(parentId, new Set());
            }
            parentToChildrenMap.get(parentId)!.add(childId);
          }
        }
      });

      // 默认展开所有节点（包括目标节点）
      expandedRows.value.clear();
      loadedChildrenNodes.value.clear();
      targetNodeChildrenUserIds.value.clear();
      userIdSet.forEach((id) => {
        // 如果在邀请链中有子节点，则标记为已加载
        if (parentToChildrenMap.has(id)) {
          loadedChildrenNodes.value.add(id);
        }
        // 所有节点默认展开
        expandedRows.value.add(id);
      });

      // 对于目标节点，需要调用接口获取其子节点并添加到树中
      for (const targetUserId of targetUserIds) {
        // 查找目标节点在树中的位置
        const targetNode = findNodeInTree(inviteTreeData.value, targetUserId);
        if (!targetNode) {
          continue;
        }

        // 计算目标节点的层级
        const targetLevel = getNodeLevel(inviteTreeData.value, targetUserId);
        if (targetLevel === null) {
          continue;
        }

        // 如果目标节点还没有加载过子节点，则调用接口获取
        if (!loadedChildrenNodes.value.has(targetUserId)) {
          try {
            // 使用 targetLevel + 1 来获取目标节点的子节点（与 toggleExpand 函数保持一致）
            const params: any = {
              level: targetLevel,
              pid: targetUserId,
            };
            if (transactionType) {
              params.transactionType = transactionType;
            }

            const response = await getInvite(params);
            if (response.data && response.data.length > 0) {
              // 将子节点数据转换为 InviteTreeItem 并添加到目标节点
              const children = response.data.map(convertInviteItemToTreeItem);
              targetNode.children = sortInviteTreeByRegisteredTime(
                children,
                inviteRegisteredSortOrder.value,
              );
              // 记录目标节点的子节点 userId
              children.forEach((child) => {
                if (child.userId) {
                  targetNodeChildrenUserIds.value.add(child.userId);
                }
              });
            } else {
              // 如果没有子节点，设置为空数组
              targetNode.children = [];
            }
            // 标记目标节点已加载过子节点
            loadedChildrenNodes.value.add(targetUserId);
            // 触发响应式更新
            inviteTreeData.value = [...inviteTreeData.value];
          } catch (error) {
            console.error(`获取目标节点 ${targetUserId} 的子节点失败:`, error);
          }
        }
      }

      // 搜索完成，取消加载状态
      inviteTreeSearching.value = false;
    } catch (error) {
      console.error("搜索邀请链失败:", error);
      ElMessage.error("搜索失败，请稍后重试");
      // 搜索失败时也要取消加载状态
      inviteTreeSearching.value = false;
    }
  }, 500);
};

// 计算节点在树中的层级（从根节点开始，根节点为1）
const getNodeLevel = (
  items: InviteTreeItem[],
  targetUserId: number,
  currentLevel: number = 1,
): number | null => {
  for (const item of items) {
    if (item.userId === targetUserId) {
      return currentLevel;
    }
    if (item.children && item.children.length > 0) {
      const level = getNodeLevel(item.children, targetUserId, currentLevel + 1);
      if (level !== null) {
        return level;
      }
    }
  }
  return null;
};

// 切换展开/收起
const toggleExpand = async (userId: number) => {
  if (expandedRows.value.has(userId)) {
    // 收起
    expandedRows.value.delete(userId);
  } else {
    // 展开
    expandedRows.value.add(userId);

    // 查找节点
    const node = findNodeInTree(inviteTreeData.value, userId);
    if (!node) {
      return;
    }

    // 如果节点已经加载过子节点（无论是否有子节点），不需要重新加载
    if (loadedChildrenNodes.value.has(userId)) {
      return;
    }

    // 计算当前节点的层级
    const currentLevel = getNodeLevel(inviteTreeData.value, userId);
    if (currentLevel === null) {
      return;
    }

    // 加载子节点数据
    try {
      const params: any = {
        level: currentLevel + 1,
        pid: userId,
      };
      // 如果有交易类型筛选，也需要传递
      if (currentTransactionType.value) {
        params.transactionType = currentTransactionType.value;
      }

      const response = await getInvite(params);
      if (response.data && response.data.length > 0) {
        // 将子节点数据转换为 InviteTreeItem 并添加到父节点
        const children = response.data.map(convertInviteItemToTreeItem);
        node.children = sortInviteTreeByRegisteredTime(
          children,
          inviteRegisteredSortOrder.value,
        );
      } else {
        // 如果没有子节点，设置为空数组（表示已加载过但没有子节点）
        node.children = [];
      }
      // 标记节点已加载过子节点
      loadedChildrenNodes.value.add(userId);
      // 触发响应式更新
      inviteTreeData.value = [...inviteTreeData.value];
    } catch (error) {
      ElMessage.error("加载子节点数据失败");
      // 加载失败时移除展开状态
      expandedRows.value.delete(userId);
    }
  }
};

// 加载优惠券数据
const loadCoupons = async () => {
  try {
    couponsLoading.value = true;
    const response = await getCouponsPage({
      page: couponsPage.value,
      size: couponsPageSize.value,
    });
    if (response.data) {
      let items = response.data.items || [];
      // 前端筛选
      items = applyCouponFilters(items);
      couponsData.value = items;
      couponsTotal.value = response.data.total || 0;
    }
  } catch (error) {
    console.error("加载优惠券数据失败:", error);
    ElMessage.error("加载优惠券数据失败");
  } finally {
    couponsLoading.value = false;
  }
};

// 应用优惠券筛选
const applyCouponFilters = (
  items: CouponWithUsageRow[],
): CouponWithUsageRow[] => {
  let result = [...items];

  // 按使用状态筛选
  if (
    couponFilters.value.usageStatus !== "" &&
    couponFilters.value.usageStatus !== null &&
    couponFilters.value.usageStatus !== undefined
  ) {
    const usageStatus = Number(couponFilters.value.usageStatus);
    if (usageStatus === 0) {
      // 选择"未使用"时，筛选 usageStatus 为 null 的数据
      result = result.filter((item) => item.usageStatus === null);
    } else {
      // 其他状态正常筛选
      result = result.filter(
        (item) =>
          item.usageStatus !== undefined && item.usageStatus === usageStatus,
      );
    }
  }

  // 按有效期日期范围筛选
  if (
    couponFilters.value.dateRange &&
    couponFilters.value.dateRange.length === 2
  ) {
    const [startDate, endDate] = couponFilters.value.dateRange;
    const start = new Date(startDate);
    start.setHours(0, 0, 0, 0);
    const end = new Date(endDate);
    end.setHours(23, 59, 59, 999);

    result = result.filter((item) => {
      if (!item.effectiveStart || !item.effectiveEnd) return false;
      const itemStart = new Date(item.effectiveStart);
      const itemEnd = new Date(item.effectiveEnd);
      // 检查有效期是否与筛选范围有交集
      return itemStart <= end && itemEnd >= start;
    });
  }

  // 按优惠券类型筛选（如果需要，可以根据实际业务逻辑实现）
  // 目前API返回的数据中没有明确的类型字段，这里先预留

  return result;
};

// 处理优惠券分页大小变化
const handleCouponsPageSizeChange = (size: number) => {
  couponsPageSize.value = size;
  couponsPage.value = 0; // 重置到第一页
  loadCoupons();
};

// 处理资金记录分页大小变化
const handleFundsRecordsPageSizeChange = (size: number) => {
  fundsRecordsPageSize.value = size;
  fundsRecordsPage.value = 0; // 重置到第一页
  loadFundsTransactions();
};

// 处理资金记录页码变化
const handleFundsRecordsPageChange = (page: number) => {
  fundsRecordsPage.value = page - 1; // el-pagination 从1开始，内部从0开始
  loadFundsTransactions();
};

// 处理优惠券页码变化
const handleCouponsPageChange = (page: number) => {
  couponsPage.value = page - 1; // el-pagination 从1开始，后端从0开始
  loadCoupons();
};

// 格式化优惠券状态
const formatCouponStatus = (status?: number): string => {
  if (status === undefined || status === null) return "-";
  // 根据实际业务定义状态映射
  const statusMap: { [key: number]: string } = {
    0: "未启用",
    1: "已启用",
    2: "已禁用",
  };
  return statusMap[status] || `状态${status}`;
};

// 格式化用户使用状态
const formatUsageStatus = (usageStatus?: number | null): string => {
  if (usageStatus === null) return t("settingsSidebar.unused");
  if (usageStatus === undefined) return "-";
  // 根据实际业务定义使用状态映射
  const usageStatusMap: { [key: number]: string } = {
    1: t("settingsSidebar.used"),
  };
  return usageStatusMap[usageStatus] || `使用状态${usageStatus}`;
};

// 格式化交易类型（将后端返回的中文值映射到国际化key）
const formatTransactionType = (type?: string): string => {
  if (!type) return "-";
  const typeMap: { [key: string]: string } = {
    收益: "settingsSidebar.transactionTypeIncome",
    收益回滚: "settingsSidebar.transactionTypeIncomeRollback",
    提现: "settingsSidebar.transactionTypeWithdraw",
    抵扣: "settingsSidebar.transactionTypeDeduct",
    活动奖励: "settingsSidebar.transactionTypeActivityReward",
    销售分成: "settingsSidebar.transactionTypeSalesCommission",
    销售分成回滚: "settingsSidebar.transactionTypeSalesCommissionRollback",
  };
  const i18nKey = typeMap[type];
  return i18nKey ? t(i18nKey) : type;
};

// 格式化交易状态（将后端返回的中文值映射到国际化key）
const formatTransactionStatus = (status?: string): string => {
  if (!status) return "-";
  const statusMap: { [key: string]: string } = {
    已完成: "settingsSidebar.transactionStatusCompleted",
    处理中: "settingsSidebar.transactionStatusProcessing",
    失败: "settingsSidebar.transactionStatusFailed",
    待审核: "settingsSidebar.transactionStatusPending",
    待确认: "settingsSidebar.transactionStatusPendingConfirmation",
    待支付: "settingsSidebar.transactionStatusPendingPayment",
    已支付: "settingsSidebar.transactionStatusPaid",
    已取消: "settingsSidebar.transactionStatusCancelled",
    退款中: "settingsSidebar.transactionStatusRefunding",
    退款驳回: "settingsSidebar.transactionStatusRefundRejected",
    已退款: "settingsSidebar.transactionStatusRefunded",
  };
  const i18nKey = statusMap[status];
  return i18nKey ? t(i18nKey) : status;
};

// 将国际化值映射回中文值（用于筛选匹配）
const getTransactionTypeFromI18n = (i18nValue: string): string => {
  const reverseMap: { [key: string]: string } = {
    [t("settingsSidebar.transactionTypeIncome")]: "收益",
    [t("settingsSidebar.transactionTypeWithdraw")]: "提现",
    [t("settingsSidebar.transactionTypeDeduct")]: "抵扣",
    [t("settingsSidebar.transactionTypeActivityReward")]: "活动奖励",
    [t("settingsSidebar.transactionTypeSalesCommission")]: "销售分成",
  };
  return reverseMap[i18nValue] || i18nValue;
};

// 格式化来源用户名（将中文前缀映射到国际化翻译）
const formatSourceUserName = (userName?: string): string => {
  if (!userName) return "-";

  // 匹配"销售代表"（可能有后缀，也可能没有）
  if (userName.startsWith("销售代表")) {
    const suffix = userName.substring(4); // "销售代表"长度为4
    return suffix
      ? `${t("settingsSidebar.salesRepresentative")}${suffix}`
      : t("settingsSidebar.salesRepresentative");
  }

  // 匹配"用户"（可能有后缀，也可能没有）
  if (userName.startsWith("用户")) {
    const suffix = userName.substring(2); // "用户"长度为2
    return suffix
      ? `${t("settingsSidebar.user")}${suffix}`
      : t("settingsSidebar.user");
  }

  // 其他情况直接返回原文本
  return userName;
};

// 加载认证状态并判断是否显示优惠券Tab
const loadCertificationStatus = async () => {
  try {
    const response = await apiGetCertificationStatus();
    const data = response.data as any;
    showCouponsTab.value = data.isSales === true;
    if (data.salesTitle && data.salesTitle.includes("内部")) {
      isInternal.value = true;
    } else {
      isInternal.value = false;
    }
  } catch (error) {
    showCouponsTab.value = false;
    isInternal.value = false;
  }
};

// 组件初始化时加载数据
onMounted(() => {
  loadUserProfile();
  loadFundsBalance();
  loadFundsTransactions();
  loadInviteTree();
  loadInviteSummary();
  loadCertificationStatus();
});
</script>

<style scoped lang="scss">
.member-referral-panel {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}
.panel-title {
  font-size: 28px;
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 24px 0;
}

/* 余额头部 */
.balance-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background: linear-gradient(135deg, #fff5e6 0%, #ffe8cc 100%);
  border-radius: 12px;
  margin-bottom: 20px;
}

.balance-info {
  display: flex;
  align-items: center;
  gap: 12px;

  .balance-label {
    font-size: 16px;
    color: #666;
  }

  .balance-amount {
    font-size: 24px;
    font-weight: 600;
    color: #ff6b00;
  }
}

.withdraw-btn {
  padding: 6px 14px;
  background: #ff6b00;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;

  &:hover {
    background: #e55f00;
    transform: translateY(-1px);
  }
}

/* Tab 切换 */
.tabs-container {
  display: flex;
  gap: 0;
  margin-bottom: 32px;
  border-bottom: 2px solid #e5e7eb;
}

.tab-item {
  padding: 12px 32px;
  font-size: 16px;
  font-weight: 500;
  color: #666;
  cursor: pointer;
  transition: all 0.2s;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;

  &:hover {
    color: #333;
  }

  &.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
  }
}

/* 推荐内容区域 */
.referral-content {
  max-width: 900px;
}

.section-title-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.section-title {
  font-size: 18px;
  color: #333;
  margin: 0;
}

.section-title-stats {
  font-size: 14px;
  color: #666;
}
.section-title-sub {
  font-size: 16px;
  color: #333;
  margin-bottom: 12px;
}

.section-subtitle {
  font-size: 14px;
  color: #666;
  margin-bottom: 24px;
}

/* 二维码区域 */
.qrcode-section {
  margin-bottom: 28px;
}

.loading-icon {
  color: var(--color-primary, #409eff);
  animation: rotate 1.5s linear infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 海报区域 */
.poster-section {
  display: flex;
  flex-direction: row;
  gap: 20px;
  margin: 20px 0;
  align-items: flex-end;
}

/* 左侧大图 */
.poster-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.poster-wrapper {
  position: relative;
  width: 100%;
  max-width: 280px;
  display: flex;
  justify-content: center;
}

.poster-image {
  width: 100%;
  max-width: 280px;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  display: block;
}

.poster-qrcode-overlay {
  position: absolute;
  bottom: 12%;
  left: 50%;
  transform: translateX(-50%);
  width: 17%;
  max-width: 120px;
  min-width: 80px;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.poster-qrcode-loading {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  background: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.poster-qrcode-image {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  border-radius: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
  transition: opacity 0.3s;
  display: block;
  object-fit: contain;
  object-position: center center;
  margin: auto;
}

.poster-qrcode-image-hidden {
  opacity: 0;
  position: absolute;
}

.poster-download-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
}

/* 右侧区域 */
.poster-right {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: auto;
  flex-shrink: 0;
}

/* 缩略图列表 */
.poster-thumbnails {
  display: flex;
  flex-direction: row;
  gap: 16px;
}

.poster-thumbnail-item {
  position: relative;
  width: 100px;
  height: 160px;
  cursor: pointer;
  border-radius: 8px;
  overflow: hidden;
  border: 3px solid transparent;
  transition: all 0.3s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }

  &.active {
    border-color: var(--color-primary);
    box-shadow: 0 4px 16px rgba(64, 158, 255, 0.3);
  }
}

.poster-thumbnail-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  padding: 10px 0;
}

/* 下载按钮包装器 */
.poster-download-wrapper {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
}

.btn-primary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
}

.btn-primary {
  background: var(--color-primary);
  color: white;

  &:hover {
    background: #1557b0;
    transform: translateY(-1px);
  }
}

/* 推荐链接 */
.referral-link-section {
  margin-bottom: 40px;
}

.link-input-wrapper {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}

.link-input {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  font-size: 14px;
  background: var(--color-card);
  color: #333;
}

.copy-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  background: var(--color-primary);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;

  &:hover {
    background: #1557b0;
  }
}

.link-tip {
  font-size: 13px;
  color: #999;
  line-height: 1.6;
}

/* 二级推荐分销体系 */
.referral-process-section {
  margin-bottom: 20px;
}

.referral-process {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin: 24px 0;
  padding: 24px;
  background: var(--color-card);
  border-radius: 12px;
}

.process-step {
  text-align: center;
}

.process-icon {
  width: 60px;
  height: 60px;
  background: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  margin-bottom: 8px;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.process-label {
  font-size: 14px;
  color: #666;
}

.process-arrow {
  font-size: 24px;
  color: #999;
}

.reward-section {
  padding: 20px 20px 10px 20px;
  background: var(--color-card);
  border-radius: 12px;
}
/* 奖励规则 || 奖励示例 */
.reward-examples-section {
  margin-bottom: 20px;
}

.examples-list {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--color-card);
}

// 奖励规则 - 保留表格样式
.examples-list.reward-rules-list {
  .example-item {
    display: flex;
    padding: 16px;
    border-bottom: 1px solid var(--color-border);
    font-size: 14px;
    .example-label {
      color: #333;
      margin-right: 16px;
      text-align: left;
    }

    .example-value {
      text-align: right;
      color: #666;
      flex: 1;
    }
  }
}

// 奖励示例和推荐规则 - 简单列表样式
.examples-list.simple-list {
  background: var(--color-card);
  border-radius: 8px;
  padding: 16px;
}

.example-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 16px;

  &:last-child {
    margin-bottom: 0;
  }
}

.example-group-title {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
  line-height: 1.5;
}

.example-group-items {
  display: flex;
  flex-direction: column;
  padding-left: 0;
}

.example-item {
  display: flex;
  padding: 4px 0;
  font-size: 14px;

  .example-label {
    color: #333;
    text-align: left;
    line-height: 1.5;
  }

  .example-value {
    text-align: right;
    color: #666;
    flex: 1;

    &.reward {
      color: #00c853;
    }
  }
}

.notice-list {
  margin: 0;
  padding-left: 24px;

  li {
    color: var(--color-text);
    font-size: 14px;
    line-height: 1.8;
    margin-bottom: 8px;

    &:last-child {
      margin-bottom: 0;
    }
  }
}

/* 推荐记录内容 */
.records-content {
  width: 100%;
}

/* 筛选器 */
.filters-section {
  margin-bottom: 24px;
  margin-top: 12px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}

.coupon-filter-group {
  flex-wrap: nowrap;
  gap: 12px;
}
.filter-item-date {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 220px;
}
.filter-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 180px;
}

.filter-item-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: 16px;
  flex-shrink: 0;
}

.coupon-filter-group .filter-item-label {
  margin-right: 0;
}

.filter-label {
  font-size: 14px;
  color: #333;
  white-space: nowrap;
}

.coupon-filter-select {
  width: 130px !important;
  min-width: 130px;
}

.coupon-filter-date {
  width: 200px !important;
  min-width: 200px;
}

.filter-input {
  font-size: 14px;
  min-width: 180px;
}

.filter-input-small {
  padding: 8px 12px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  font-size: 14px;
  width: 80px;
}

.filter-date-picker {
  font-size: 14px;
  min-width: 220px;
}

.filter-select {
  font-size: 14px;
  min-width: 120px;
  cursor: pointer;
}

.filter-actions {
  display: flex;
  margin-left: auto;
}

.filter-btn {
  padding: 8px 16px;
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;

  &:hover {
    background: #f9f9f9;
    border-color: var(--color-primary);
    color: var(--color-primary);
  }
}

/* 记录表格 */
.records-table-wrapper {
  background: white;
  border-radius: 12px;
  border: 1px solid #e0e0e0;
  overflow-x: auto;
  overflow-y: auto;
  max-height: 360px;
  margin-top: 12px;
}

.records-table {
  width: 100%;
  border-collapse: collapse;

  thead {
    background: #f9f9f9;

    th {
      padding: 10px;
      text-align: left;
      font-size: 14px;
      font-weight: 600;
      color: #666;
      border-bottom: 1px solid #e0e0e0;
      position: sticky;
      top: 0;
      background: var(--color-card);
      z-index: 10;
    }
  }

  tbody {
    tr {
      transition: all 0.2s;

      &:hover {
        background: #f9f9f9;
      }

      &:not(:last-child) {
        border-bottom: 1px solid #f0f0f0;
      }
    }

    td {
      padding: 10px;
      font-size: 14px;
      color: #333;

      &.amount {
        font-weight: 600;

        &.positive {
          color: #00c853;
        }

        &.negative {
          color: #ff3d00;
        }
      }
    }
  }
}

.empty-state {
  padding: 60px 20px;
  text-align: center;
  color: var(--color-text-secondary);
  font-size: 14px;
}

/* 资金记录表格 */
.funds-records-section {
  margin-top: 2px;
}

/* 优惠券内容 */
.coupons-content {
  width: 100%;
}

.coupons-table-wrapper {
  background: white;
  border-radius: 12px;
  border: 1px solid #e0e0e0;
  overflow: hidden;
  overflow-x: auto;
  overflow-y: auto;
  max-height: 360px;

  // 自定义滚动条样式，使其更明显
  &::-webkit-scrollbar {
    height: 12px;
  }

  &::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 6px;
  }

  &::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 6px;
    border: 2px solid #f1f1f1;
  }

  // Firefox 滚动条样式
  scrollbar-width: thin;
  scrollbar-color: #c1c1c1 #f1f1f1;
}

.coupons-table {
  width: 100%;
  min-width: 1400px;
  border-collapse: collapse;

  thead {
    background: #f9f9f9;

    th {
      padding: 16px 12px;
      text-align: left;
      font-size: 14px;
      font-weight: 600;
      color: #666;
      border-bottom: 1px solid #e0e0e0;
      white-space: nowrap;
      position: sticky;
      top: 0;
      background: var(--color-card);
      z-index: 10;
    }
  }

  tbody {
    tr {
      transition: all 0.2s;

      &:hover {
        background: #f9f9f9;
      }

      &:not(:last-child) {
        border-bottom: 1px solid #f0f0f0;
      }
    }

    td {
      padding: 16px 12px;
      font-size: 14px;
      color: #333;
      white-space: nowrap;
    }
  }

  // 禁用状态的复制按钮样式
  .el-button.is-disabled {
    color: #909399 !important;
    background-color: #f5f7fa !important;
    border-color: #e4e7ed !important;
    cursor: not-allowed !important;
    opacity: 1 !important;

    &:hover {
      color: #909399 !important;
      background-color: #f5f7fa !important;
      border-color: #e4e7ed !important;
    }
  }
}

.loading-state {
  padding: 60px 20px;
  text-align: center;
  color: #999;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.pagination-wrapper {
  margin-top: 14px;
  display: flex;
  justify-content: center;
}

/* 邀请树表格 */
.invite-tree-section {
  margin: 20px 0;
}

.invite-tree-table-wrapper {
  background: white;
  border-radius: 12px;
  border: 1px solid #e0e0e0;
  overflow-x: auto;
  overflow-y: auto;
  max-height: 360px;
}

.invite-tree-table {
  width: 100%;
  border-collapse: collapse;

  thead {
    background: #f9f9f9;

    th {
      padding-top: 10px !important;
      padding-right: 10px !important;
      padding-bottom: 10px !important;
      text-align: left;
      font-size: 14px;
      font-weight: 600;
      color: #666;
      border-bottom: 1px solid #e0e0e0;
      position: sticky;
      top: 0;
      background: var(--color-card);
      z-index: 10;
    }
  }

  /* 注册时间排序按钮 */
  .invite-sort-btn {
    background: none;
    border: none;
    padding: 0 0 0 6px;
    cursor: pointer;
    vertical-align: middle;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 4px;

    &:hover {
      opacity: 0.8;
    }
  }

  .invite-sort-icon {
    display: inline-block;
    width: 12px;
    height: 18px;
    position: relative;
  }

  .invite-sort-icon::before,
  .invite-sort-icon::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
  }

  .invite-sort-icon::before {
    top: 0;
    border-bottom: 6px solid #999; /* 上箭头 */
  }

  .invite-sort-icon::after {
    bottom: 0;
    border-top: 6px solid #999; /* 下箭头 */
  }

  .invite-sort-asc::before {
    border-bottom-color: #333;
  }

  .invite-sort-desc::after {
    border-top-color: #333;
  }

  tbody {
    tr {
      transition: all 0.2s;

      &:hover {
        background: #f9f9f9;
      }

      &:not(:last-child) {
        border-bottom: 1px solid #f0f0f0;
      }

      // 子行样式已移至 InviteTreeChildRows 组件
    }

    td {
      padding: 16px;
      font-size: 14px;
      color: #333;

      &.earnings {
        font-weight: 600;
        color: #00c853;
      }
    }
  }
}

/* 展开按钮样式（父行使用） */
.expand-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.2s;
  color: #666;

  &:hover {
    background: #e8e8e8;
    color: #333;
  }

  .expand-icon {
    font-size: 12px;
    transition: transform 0.2s;
  }

  &.expanded .expand-icon {
    transform: rotate(0deg);
  }
}

/* 提现表单样式 */
.withdraw-form {
  :deep(.el-form-item__label) {
    white-space: nowrap;
  }
  :deep(.el-form-item) {
    margin-bottom: 6px;
  }
}

.received-amount {
  font-size: 16px;
  font-weight: 500;
  color: #67c23a;
}
.tax-consent-checkbox {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
}
.tax-consent-text {
  color: var(--color-primary);
  font-size: 14px;
  cursor: pointer;
}

/* 支付二维码弹窗样式 */
.qr-code-dialog-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0;
}

.qr-code-tip {
  font-size: 14px;
  color: #666;
  text-align: center;
  margin-bottom: 20px;
  line-height: 1.6;
}

.qr-code-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  min-height: 300px;
  min-width: 300px;
}

.qr-code-loading {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 300px;
  height: 300px;
  border-radius: 12px;
  background: white;
  border: 1px solid var(--color-border, #e0e0e0);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.qr-code-image {
  width: 300px;
  height: 300px;
  border-radius: 12px;
  border: 1px solid var(--color-border, #e0e0e0);
  background: white;
  padding: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: opacity 0.3s;
}

.qr-code-image-hidden {
  opacity: 0;
  position: absolute;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .member-referral-panel {
    padding: 16px;
  }

  .balance-header {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }

  .tab-item {
    padding: 12px 16px;
    font-size: 14px;
  }

  .filter-group {
    flex-direction: column;
    align-items: stretch;
  }

  .filter-item {
    width: 100%;
  }

  .filter-input,
  .filter-select {
    flex: 1;
  }

  .filter-actions {
    margin-left: 0;
    width: 100%;

    .filter-btn {
      flex: 1;
    }
  }

  .records-table-wrapper {
    overflow-x: auto;
  }

  .records-table {
    min-width: 600px;
  }

  .poster-section {
    flex-direction: column;
  }

  .poster-right {
    width: 100%;
  }

  .poster-thumbnails {
    flex-direction: row;
    justify-content: center;
  }

  .poster-thumbnail-item {
    width: 100px;
    flex: 0 0 100px;
  }
}
</style>