sqxp/web-admin/src/views/system/client-settlement/index.vue

<template>
  <div class="page-container">
    <div class="page-head">
      <h1>客户结算管理</h1>
      <p class="page-desc">按区域管理待结算订单与结算单记录，支持结算、查看和编辑结算单。</p>
    </div>
    <div class="region-tabs region-tab-strip">
      <div class="tab-button-group region-tab-group">
        <el-button
          v-for="r in allowedRegionList"
          :key="r.id"
          class="region-tab-btn"
          :type="activeRegionId === r.id ? 'primary' : 'default'"
          @click="selectRegion(r.id)"
        >
          <span class="region-tab-inner">
            <span class="region-tab-name">{{ r.name }}</span>
            <span v-if="r.isActive === false" class="region-tab-badge">禁用</span>
          </span>
        </el-button>
      </div>
    </div>

    <el-tabs v-model="activeTab" class="settlement-page-tabs" @tab-change="onTabChange">
      <el-tab-pane label="待结算订单" name="pending">
        <section class="panel">
          <div class="panel-top">
            <h2 class="title-bar-heading">待结算订单</h2>
          </div>

          <el-card shadow="never" class="pending-main-card">
            <div class="filter-block">
              <el-form :model="searchForm" class="filter-form" label-position="top">
                <div class="filter-grid">
                  <el-form-item label="客户">
                    <el-select v-model="searchForm.clientId" filterable clearable placeholder="请选择客户">
                      <el-option
                        v-for="u in clientOptions"
                        :key="u.id"
                        :label="u.realName || u.username"
                        :value="u.id"
                      />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="订单号">
                    <el-input v-model="searchForm.keyword" clearable placeholder="请输入订单号" />
                  </el-form-item>
                  <el-form-item label="日期区间">
                    <el-date-picker
                      v-model="dateRange"
                      type="daterange"
                      value-format="YYYY-MM-DDTHH:mm:ss"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                    />
                  </el-form-item>
                </div>
                <div class="filter-actions-row">
                  <div class="filter-actions-end">
                    <el-button class="btn-ghost" @click="handleReset">重置</el-button>
                    <el-button class="btn-main" type="primary" @click="handleSearch">搜索</el-button>
                  </div>
                </div>
              </el-form>
            </div>

          <div class="toolbar">
            <span class="list-toolbar-selected" aria-live="polite"
              >已选<span class="sel-num">{{ selectedCount }}</span
              >项</span
            >
            <el-button class="btn-ghost" @click="handleSelectAllFiltered">全选可结算订单（已完结·跨分页）</el-button>
            <el-button class="btn-main" :disabled="!selectedCount" @click="openSettlementDialog"
              >结算</el-button
            >
            <div class="toolbar-inline-stats" role="status">
              <template v-if="selectedCount">
                <span class="toolbar-stat"
                  >本次结算金额 <strong class="stat-money">¥{{ formatAmount(selectedAmount) }}</strong></span
                >
                <span class="toolbar-stat">本次结算订单数 <strong>{{ selectedCount }}</strong></span>
              </template>
              <span class="toolbar-stat"
                >历史结算金额 <strong class="stat-money">¥{{ formatAmount(historySummary.amount) }}</strong></span
              >
              <span class="toolbar-stat">历史结算订单数 <strong>{{ historySummary.orderCount }}</strong></span>
            </div>
            <el-tag v-if="selectionMode === 'allFiltered'" type="warning"
              >已启用跨分页全选，可取消少量订单</el-tag
            >
          </div>
          <el-table
            ref="tableRef"
            class="client-settlement-table"
            :data="tableData"
            row-key="id"
            stripe
            v-loading="loading"
            max-height="calc(100vh - 440px)"
            @selection-change="handleSelectionChange"
            @expand-change="handleRowExpand"
          >
            <el-table-column type="expand" width="48">
              <template #default="{ row }">
                <div class="order-row-expand-wrap">
                  <div
                    v-if="getExpandedItems(row.id).length"
                    class="settlement-row-expand-table-wrap sqxp-subtable-wrap"
                  >
                    <el-table
                      :data="getExpandedItems(row.id)"
                      stripe
                      size="small"
                      class="order-row-expand-table sqxp-subtable"
                      @row-dblclick="openOrderProductView"
                    >
                    <el-table-column type="index" label="序号" width="68" align="center" header-align="center" :index="index => index + 1" />
                    <el-table-column prop="productName" label="商品" min-width="220">
                      <template #default="{ row: line }">
                        <div class="expand-product-cell">
                          <div class="expand-product-thumb-wrap">
                            <el-image
                              v-if="line.imageUrl"
                              :src="line.imageUrl"
                              fit="cover"
                              class="expand-product-thumb"
                            />
                            <span v-else class="expand-product-thumb placeholder">无图</span>
                          </div>
                          <span class="expand-product-name">{{ line.productName || '-' }}</span>
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column prop="supplierName" label="供货商" min-width="120" show-overflow-tooltip>
                      <template #default="{ row: line }">{{ line.supplierName || '-' }}</template>
                    </el-table-column>
                    <el-table-column label="计量" width="88" align="center">
                      <template #default="{ row: line }">{{ formatMeasureCell(line.measureValue) }}</template>
                    </el-table-column>
                    <el-table-column prop="unitName" label="单位" width="70" align="center" />
                    <el-table-column prop="spec" label="规格" width="90" align="center">
                      <template #default="{ row: line }">{{ formatSpecCell(line.spec) }}</template>
                    </el-table-column>
                    <el-table-column prop="quantity" label="数量" width="80" align="right" />
                    <el-table-column label="供货价" min-width="110" align="right">
                      <template #default="{ row: line }">¥{{ formatAmount(line.supplierUnitPrice) }}</template>
                    </el-table-column>
                    <el-table-column label="供货金额" min-width="110" align="right">
                      <template #default="{ row: line }">¥{{ formatAmount(line.supplierAmount) }}</template>
                    </el-table-column>
                    <el-table-column label="商品售价" min-width="110" align="right">
                      <template #default="{ row: line }"
                        >¥{{ formatAmount(line.sellingUnitPrice ?? line.unitPrice) }}</template
                      >
                    </el-table-column>
                    <el-table-column label="商品金额" min-width="110" align="right">
                      <template #default="{ row: line }"
                        >¥{{ formatAmount(line.sellingAmount ?? line.amount) }}</template
                      >
                    </el-table-column>
                    </el-table>
                    <div class="order-row-expand-summary sqxp-subtable-summary">
                      <span
                        >供货总金额(元)：<span class="sqxp-subtable-summary__amount"
                          >¥{{ formatAmount(row.supplierReferenceTotal) }}</span
                        ></span
                      >
                      <span
                        >售出总金额(元)：<span class="sqxp-subtable-summary__amount"
                          >¥{{ formatAmount(row.settlementAmount) }}</span
                        ></span
                      >
                    </div>
                  </div>
                  <el-empty v-else description="暂无商品明细" :image-size="72" />
                </div>
              </template>
            </el-table-column>
            <el-table-column type="selection" width="48" :selectable="rowSelectable" />
            <el-table-column
              type="index"
              label="序号"
              width="68"
              align="center"
              header-align="center"
              :index="index => (pagination.page - 1) * pagination.pageSize + index + 1"
            />
            <el-table-column label="订单编号" min-width="180" show-overflow-tooltip>
              <template #default="{ row }">
                <el-button link type="primary" @click="toggleRowExpand(row)">{{ row.orderNo }}</el-button>
              </template>
            </el-table-column>
            <el-table-column prop="createAt" label="下单时间" min-width="170" />
            <el-table-column prop="clientName" label="客户名称" min-width="150" show-overflow-tooltip />
            <el-table-column prop="regionName" label="区域" min-width="120" show-overflow-tooltip />
            <el-table-column prop="supplierReferenceTotal" label="供货总金额(元)" min-width="140" align="right">
              <template #default="{ row }">
                <span class="amount-text">¥{{ formatAmount(row.supplierReferenceTotal) }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="totalAmount" label="订单金额(元)" min-width="130" align="right">
              <template #default="{ row }">
                <span class="amount-text">¥{{ formatAmount(orderTotalAmount(row)) }}</span>
              </template>
            </el-table-column>
            <el-table-column label="订单状态" min-width="120">
              <template #default="{ row }">
                <el-tag :type="orderStatusTagType(resolveOrderStatus(row))" size="small">
                  {{ orderStatusLabel(resolveOrderStatus(row)) }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="配送状态" min-width="120">
              <template #default="{ row }">
                <el-tag :type="deliveryStatusTagType(resolveDeliveryStatus(row))" size="small">
                  {{ deliveryStatusLabel(resolveDeliveryStatus(row)) }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="支付状态" min-width="120">
              <template #default="{ row }">
                <el-tag :type="payStatusTagType(resolvePayStatus(row))" size="small">
                  {{ payStatusLabel(resolvePayStatus(row)) }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="支付方式" min-width="110" align="center">
              <template #default="{ row }">
                <el-tag :type="resolvePaymentMethod(row) === 'offline' ? 'warning' : 'primary'" size="small">
                  {{ paymentMethodLabel(resolvePaymentMethod(row)) }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="clientSettlementStatus" label="客户结算" min-width="120" align="center">
              <template #default="{ row }">
                <el-tag :type="row.clientSettlementStatus === 'settled' ? 'success' : 'info'" size="small">
                  {{ row.clientSettlementStatus === 'settled' ? '已与客户结算' : '待客户结算' }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="supplierSettlementStatus" label="供应商结算" min-width="120" align="center">
              <template #default="{ row }">
                <el-tag :type="row.supplierSettlementStatus === 'settled' ? 'success' : 'info'" size="small">
                  {{ row.supplierSettlementStatus === 'settled' ? '已与供应商结算' : '待供应商结算' }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" min-width="120" fixed="right" align="center" header-align="center">
              <template #default="{ row }">
                <el-button class="btn-op-item primary" @click="openOrderOperate(row)">查看/运营</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination list-pager-bar">
            <el-pagination
              :current-page="pagination.page"
              :page-size="pagination.pageSize"
              :page-sizes="[10, 20, 50, 100]"
              :total="pagination.total"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="
                (val) => {
                  pagination.pageSize = val
                  loadData()
                }
              "
              @current-change="
                (val) => {
                  pagination.page = val
                  loadData()
                }
              "
            />
          </div>
          </el-card>
        </section>
      </el-tab-pane>

      <el-tab-pane label="结算单记录" name="sheets">
        <section class="panel">
          <div class="panel-top">
            <h2 class="title-bar-heading">结算单记录</h2>
          </div>

          <el-card shadow="never" class="sheet-main-card" v-loading="sheetLoading">
            <div class="filter-block">
              <el-form :model="sheetSearchForm" class="filter-form" label-position="top">
                <div class="filter-grid">
                  <el-form-item label="客户">
                    <el-select v-model="sheetSearchForm.clientId" filterable clearable placeholder="全部">
                      <el-option
                        v-for="u in clientOptions"
                        :key="u.id"
                        :label="u.realName || u.username"
                        :value="u.id"
                      />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="结算单号">
                    <el-input v-model="sheetSearchForm.settlementNo" clearable placeholder="模糊查询" />
                  </el-form-item>
                  <el-form-item label="结算时间">
                    <el-date-picker
                      v-model="sheetDateRange"
                      type="daterange"
                      value-format="YYYY-MM-DDTHH:mm:ss"
                      range-separator="至"
                      start-placeholder="开始"
                      end-placeholder="结束"
                    />
                  </el-form-item>
                </div>
                <div class="filter-actions-row">
                  <div class="filter-actions-end">
                    <el-button class="btn-ghost" @click="handleSheetReset">重置</el-button>
                    <el-button class="btn-main" type="primary" @click="handleSheetSearch">搜索</el-button>
                  </div>
                </div>
              </el-form>
            </div>

            <div class="sheet-summary-bar" role="status">
              <div class="sheet-summary-group">
                <span class="sheet-summary-label">历史结算总金额</span>
                <span class="sheet-summary-value amount-text">¥{{ formatAmount(sheetHistorySummary.amount) }}</span>
              </div>
              <div class="sheet-summary-group">
                <span class="sheet-summary-label">历史结算总订单数</span>
                <span class="sheet-summary-value amount-text">{{ sheetHistorySummary.orderCount }}</span>
              </div>
              <div class="sheet-summary-divider" aria-hidden="true"></div>
              <div class="sheet-summary-group">
                <span class="sheet-summary-label">当前检索结算总金额</span>
                <span class="sheet-summary-value amount-text">¥{{ formatAmount(sheetCurrentSummary.amount) }}</span>
              </div>
              <div class="sheet-summary-group">
                <span class="sheet-summary-label">当前检索结算总订单数</span>
                <span class="sheet-summary-value amount-text">{{ sheetCurrentSummary.orderCount }}</span>
              </div>
            </div>

          <el-table
            class="client-settlement-sheet-table"
            :data="sheetTableData"
            stripe
            @expand-change="handleSheetRowExpand"
          >
            <el-table-column
              type="index"
              label="序号"
              width="68"
              align="center"
              header-align="center"
              :index="index => (sheetPagination.page - 1) * sheetPagination.pageSize + index + 1"
            />
            <el-table-column type="expand" width="48">
              <template #default="{ row }">
                <div class="sheet-row-expand-wrap" v-loading="isSheetRowLoading(row.id)">
                  <div v-if="getSheetOrders(row.id).length" class="sheet-orders-scroll">
                    <el-table
                      :data="getSheetOrders(row.id)"
                      row-key="id"
                      stripe
                      size="small"
                      :fit="false"
                      scrollbar-always-on
                      class="sheet-orders-table"
                      @expand-change="handleSheetOrderExpand(row.id)"
                    >
                    <el-table-column type="index" label="序号" width="68" align="center" header-align="center" :index="index => index + 1" />
                    <el-table-column type="expand" width="48">
                      <template #default="{ row: ord }">
                        <div class="order-row-expand-wrap">
                          <div
                            v-if="Array.isArray(ord.children) && ord.children.length"
                            class="settlement-row-expand-table-wrap sqxp-subtable-wrap"
                          >
                            <div class="order-row-expand-scroll">
                              <el-table
                                :data="ord.children"
                                stripe
                                size="small"
                                :fit="true"
                                scrollbar-always-on
                                class="order-row-expand-table sqxp-subtable"
                                @row-dblclick="openOrderProductView"
                              >
                            <el-table-column type="index" label="序号" width="68" align="center" header-align="center" :index="index => index + 1" />
                            <el-table-column prop="productName" label="商品" min-width="220">
                              <template #default="{ row: line }">
                                <div class="expand-product-cell">
                                  <div class="expand-product-thumb-wrap">
                                    <el-image
                                      v-if="line.imageUrl"
                                      :src="line.imageUrl"
                                      fit="cover"
                                      class="expand-product-thumb"
                                    />
                                    <span v-else class="expand-product-thumb placeholder">无图</span>
                                  </div>
                                  <span class="expand-product-name">{{ line.productName || '-' }}</span>
                                </div>
                              </template>
                            </el-table-column>
                            <el-table-column prop="supplierName" label="供货商" min-width="120" show-overflow-tooltip>
                              <template #default="{ row: line }">{{ line.supplierName || '-' }}</template>
                            </el-table-column>
                            <el-table-column label="计量" width="88" align="center">
                              <template #default="{ row: line }">{{
                                formatMeasureCell(line.measureValue)
                              }}</template>
                            </el-table-column>
                            <el-table-column prop="unitName" label="单位" width="70" align="center" />
                            <el-table-column prop="spec" label="规格" width="90" align="center">
                              <template #default="{ row: line }">{{ formatSpecCell(line.spec) }}</template>
                            </el-table-column>
                            <el-table-column prop="quantity" label="数量" width="80" align="right" />
                            <el-table-column label="供货价" min-width="110" align="right">
                              <template #default="{ row: line }"
                                >¥{{ formatAmount(line.supplierUnitPrice) }}</template
                              >
                            </el-table-column>
                            <el-table-column label="供货金额" min-width="110" align="right">
                              <template #default="{ row: line }"
                                >¥{{ formatAmount(line.supplierAmount) }}</template
                              >
                            </el-table-column>
                            <el-table-column label="商品售价" min-width="110" align="right">
                              <template #default="{ row: line }"
                                >¥{{ formatAmount(line.sellingUnitPrice ?? line.unitPrice) }}</template
                              >
                            </el-table-column>
                            <el-table-column label="商品金额" min-width="110" align="right">
                              <template #default="{ row: line }"
                                >¥{{ formatAmount(line.sellingAmount ?? line.amount) }}</template
                              >
                            </el-table-column>
                              </el-table>
                            </div>
                            <div class="order-row-expand-summary sqxp-subtable-summary">
                              <span
                                >供货总金额(元)：<span class="sqxp-subtable-summary__amount"
                                  >¥{{ formatAmount(sheetOrderSupplierTotal(ord)) }}</span
                                ></span
                              >
                              <span
                                >售出总金额(元)：<span class="sqxp-subtable-summary__amount"
                                  >¥{{ formatAmount(sheetOrderSellingTotal(ord)) }}</span
                                ></span
                              >
                            </div>
                          </div>
                          <el-empty v-else description="暂无商品明细" :image-size="72" />
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column label="订单编号" min-width="180" show-overflow-tooltip>
                      <template #default="{ row: ord }">
                        <strong>{{ ord.orderNo }}</strong>
                      </template>
                    </el-table-column>
                    <el-table-column prop="clientName" label="客户名称" min-width="150" show-overflow-tooltip />
                    <el-table-column label="供应商名称" min-width="150" show-overflow-tooltip>
                      <template #default="{ row: ord }">
                        {{ resolveSupplierName(ord) }}
                      </template>
                    </el-table-column>
                    <el-table-column prop="regionName" label="区域" min-width="110" show-overflow-tooltip />
                    <el-table-column label="订单金额(元)" min-width="130" align="right">
                      <template #default="{ row: ord }">
                        <span class="amount-text">¥{{ formatAmount(orderTotalAmount(ord)) }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column label="供货总金额(元)" min-width="140" align="right">
                      <template #default="{ row: ord }">
                        <span class="amount-text">¥{{ formatAmount(sheetOrderSupplierTotal(ord)) }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column label="售出总金额(元)" min-width="140" align="right">
                      <template #default="{ row: ord }">
                        <span class="amount-text">¥{{ formatAmount(sheetOrderSellingTotal(ord)) }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column label="应收金额(元)" min-width="130" align="right">
                      <template #default="{ row: ord }">
                        <span class="amount-text">¥{{ formatAmount(orderReceivableAmount(ord)) }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column label="订单状态" min-width="120">
                      <template #default="{ row: ord }">
                        <el-tag :type="orderStatusTagType(resolveOrderStatus(ord))" size="small">
                          {{ orderStatusLabel(resolveOrderStatus(ord)) }}
                        </el-tag>
                      </template>
                    </el-table-column>
                    <el-table-column label="配送状态" min-width="120">
                      <template #default="{ row: ord }">
                        <el-tag :type="deliveryStatusTagType(resolveDeliveryStatus(ord))" size="small">
                          {{ deliveryStatusLabel(resolveDeliveryStatus(ord)) }}
                        </el-tag>
                      </template>
                    </el-table-column>
                    <el-table-column label="支付状态" min-width="120">
                      <template #default="{ row: ord }">
                        <el-tag :type="payStatusTagType(resolvePayStatus(ord))" size="small">
                          {{ payStatusLabel(resolvePayStatus(ord)) }}
                        </el-tag>
                      </template>
                    </el-table-column>
                    <el-table-column label="支付方式" min-width="110" align="center">
                      <template #default="{ row: ord }">
                        <el-tag
                          :type="resolvePaymentMethod(ord) === 'offline' ? 'warning' : 'primary'"
                          size="small"
                        >
                          {{ paymentMethodLabel(resolvePaymentMethod(ord)) }}
                        </el-tag>
                      </template>
                    </el-table-column>
                    <el-table-column prop="orderCreateAt" label="下单时间" min-width="300" />
                    </el-table>
                  </div>
                  <el-empty v-else description="暂无明细" :image-size="72" />
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="settlementNo" label="结算单号" min-width="200" />
            <el-table-column prop="clientName" label="客户" min-width="120" />
            <el-table-column prop="orderCount" label="订单数" width="90" align="center" />
            <el-table-column prop="totalAmount" label="结算金额(元)" min-width="120" align="right">
              <template #default="{ row }">
                <span class="amount-text">¥{{ formatAmount(row.totalAmount) }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="settlementAt" label="结算时间" min-width="170" />
            <el-table-column prop="createName" label="操作人" width="100" />
            <el-table-column label="操作" min-width="520" fixed="right" align="center" header-align="center">
              <template #default="{ row }">
                <el-button class="btn-op-item primary" @click="openSheetDetail(row.id)">详情</el-button>
                <el-button class="btn-op-item" @click="openSheetEdit(row)">编辑</el-button>
                <el-button
                  class="btn-op-item"
                  :loading="sheetDownloadId === row.id"
                  @click="downloadSettlementSheet(row)"
                >
                  下载结算单
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination list-pager-bar">
            <el-pagination
              :current-page="sheetPagination.page"
              :page-size="sheetPagination.pageSize"
              :page-sizes="[10, 20, 50]"
              :total="sheetPagination.total"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="
                (val) => {
                  sheetPagination.pageSize = val
                  loadSheetList()
                }
              "
              @current-change="
                (val) => {
                  sheetPagination.page = val
                  loadSheetList()
                }
              "
            />
          </div>
          </el-card>
        </section>
      </el-tab-pane>
    </el-tabs>

    <el-dialog
      v-model="settlementDialogVisible"
      title="确认客户结算"
      width="720px"
      destroy-on-close
      @closed="resetSettlementDialog"
      class="client-settlement-dialog settlement-confirm-dialog"
      modal-class="client-settlement-dialog-mask"
    >
      <el-alert type="info" :closable="false" class="mb-3">
        已选 {{ selectedCount }} 笔订单，合计
        <strong>¥{{ formatAmount(selectedAmount) }}</strong>
      </el-alert>
      <VoucherMediaUploader v-model="settlementVoucherUrls" business-type="client_settlement" />
      <el-form label-width="100px" class="settlement-remark-form">
        <el-form-item label="结算备注">
          <el-input
            v-model="settlementRemark"
            type="textarea"
            :rows="3"
            maxlength="500"
            show-word-limit
            placeholder="选填"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button class="btn-ghost" @click="settlementDialogVisible = false">取消</el-button>
        <el-button class="btn-main" :loading="submitLoading" @click="confirmSettlementSubmit"
          >确认结算</el-button
        >
      </template>
    </el-dialog>

    <el-dialog
      v-model="sheetDetailVisible"
      title="结算单详情"
      width="1240px"
      destroy-on-close
      class="client-settlement-dialog sheet-detail-dialog"
      modal-class="client-settlement-dialog-mask"
    >
      <div class="dialog-scroll sheet-detail-dialog-scroll">
        <SettlementSheetDetailPanel
          v-if="sheetDetail"
          :detail="sheetDetail"
          counterparty-label="客户"
          :counterparty-name="sheetDetail.clientName"
        />
      </div>
    </el-dialog>

    <el-dialog
      v-model="sheetEditVisible"
      title="编辑结算单"
      width="720px"
      destroy-on-close
      @closed="resetSheetEdit"
      class="client-settlement-dialog sheet-edit-dialog"
      modal-class="client-settlement-dialog-mask"
    >
      <div class="dialog-scroll sheet-edit-dialog-scroll">
        <div class="form-section">
          <h4>结算信息</h4>
          <el-form label-position="top">
            <div class="form-grid-2">
              <el-form-item label="结算备注" class="form-col-span-2">
                <el-input
                  v-model="sheetEditForm.remark"
                  type="textarea"
                  :rows="4"
                  maxlength="500"
                  show-word-limit
                  placeholder="请输入结算备注（选填）"
                />
              </el-form-item>
            </div>
          </el-form>
        </div>
        <div class="form-section">
          <h4>结算凭证</h4>
          <VoucherMediaUploader
            v-model="sheetEditForm.voucherUrls"
            business-type="client_settlement"
            :business-id="sheetEditId || 'temp'"
          />
        </div>
      </div>
      <template #footer>
        <el-button class="btn-ghost" @click="sheetEditVisible = false">取消</el-button>
        <el-button class="btn-main" :loading="sheetEditSaving" @click="saveSheetEdit">保存</el-button>
      </template>
    </el-dialog>

    <ProductViewDialog v-model="productViewDialogVisible" :product-id="productViewTargetId" />
    <OrderOperateLocalDialog v-model="orderOperateDialogVisible" :order-id="orderOperateTargetId" />
  </div>
</template>

<script setup lang="ts">
  import { computed, nextTick, onMounted, reactive, ref, watch } from 'vue'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import {
    fetchCreateClientSettlement,
    fetchClientSettlementOrderList,
    fetchClientSettlementHistorySummary,
    fetchClientSettlementSheetList,
    fetchClientSettlementSheetDetail,
    fetchUpdateClientSettlementSheet
  } from '@/api/business'
  import { fetchUserList, fetchNotDeletedRegions } from '@/api/admin'
  import { useUserStore } from '@/store/modules/user'
  import ProductViewDialog from '@/components/business/product-view-dialog/index.vue'
  import OrderOperateLocalDialog from '@/components/business/order-operate-local-dialog/index.vue'
  import VoucherMediaUploader from '@/components/settlement/VoucherMediaUploader.vue'
  import SettlementSheetDetailPanel from '@/components/settlement/SettlementSheetDetailPanel.vue'
  import { exportClientSettlementSheetExcel } from '@/utils/client-settlement-sheet-excel'
  import { formatMeasureCell, formatSpecCell, formatMeasureUnitSpec } from '@/utils/product-measure-display'

  defineOptions({ name: 'ClientSettlement' })

  const userStore = useUserStore()
  const regionList = ref<any[]>([])
  const activeRegionId = ref('')

  const activeTab = ref<'pending' | 'sheets'>('pending')
  const loading = ref(false)
  const submitLoading = ref(false)
  const tableRef = ref()
  /** 程序化勾选/清空时跳过 selection-change，避免跨分页全选逻辑被误改 */
  const skipSelectionSync = ref(false)
  const tableData = ref<any[]>([])
  const expandedItemsMap = ref<Record<string, any[]>>({})
  const productViewDialogVisible = ref(false)
  const productViewTargetId = ref('')
  const orderOperateDialogVisible = ref(false)
  const orderOperateTargetId = ref('')
  const clientOptions = ref<any[]>([])
  const currentPageIds = ref<string[]>([])
  const selectionMode = ref<'ids' | 'allFiltered'>('ids')
  const selectedIds = ref<Set<string>>(new Set())
  const excludedIds = ref<Set<string>>(new Set())
  const amountMap = ref<Record<string, number>>({})
  const settlementDialogVisible = ref(false)
  const settlementVoucherUrls = ref<string[]>([])
  const settlementRemark = ref('')
  const dateRange = ref<string[]>([])

  const searchForm = reactive({
    clientId: '',
    keyword: ''
  })

  const pagination = reactive({
    page: 1,
    pageSize: 20,
    total: 0
  })

  const summary = reactive({
    pendingAmount: 0,
    currentPageAmount: 0,
    settleableOrderCount: 0
  })

  /** 当前区域+客户下，已生成结算单的历史汇总（无勾选时展示） */
  const historySummary = reactive({
    amount: 0,
    orderCount: 0
  })

  const sheetLoading = ref(false)
  const sheetTableData = ref<any[]>([])
  const sheetSearchForm = reactive({
    clientId: '',
    settlementNo: ''
  })
  const skipSheetClientAutoSearch = ref(false)
  const sheetHistorySummary = reactive({
    amount: 0,
    orderCount: 0
  })
  const sheetCurrentSummary = reactive({
    amount: 0,
    orderCount: 0
  })
  const sheetDateRange = ref<string[]>([])
  const sheetPagination = reactive({
    page: 1,
    pageSize: 20,
    total: 0
  })

  const sheetDetailVisible = ref(false)
  const sheetDetail = ref<any>(null)
  const sheetExpandedTreeMap = ref<Record<string, any[]>>({})
  const sheetRowLoadingMap = ref<Record<string, boolean>>({})

  const sheetEditVisible = ref(false)
  const sheetEditSaving = ref(false)
  const sheetDownloadId = ref('')
  const sheetEditId = ref('')
  const sheetEditForm = reactive({
    remark: '',
    voucherUrls: [] as string[]
  })

  const allowedRegionIds = computed<string[]>(() => {
    const info: any = userStore.getUserInfo
    const ids = Array.isArray(info?.regionIds) ? info.regionIds : []
    if (ids.length > 0) return ids.map((x: any) => String(x))
    return info?.regionId ? [String(info.regionId)] : []
  })

  const allowedRegionList = computed(() => {
    if (userStore.getUserInfo?.role === 'super_admin') return regionList.value
    const allow = new Set(allowedRegionIds.value)
    return regionList.value.filter((r: any) => allow.has(String(r.id)))
  })

  const selectedCount = computed(() => {
    if (selectionMode.value === 'allFiltered')
      return Math.max(0, summary.settleableOrderCount - excludedIds.value.size)
    return selectedIds.value.size
  })

  const selectedAmount = computed(() => {
    if (selectionMode.value === 'allFiltered') {
      const excludedAmount = Array.from(excludedIds.value).reduce(
        (acc, id) => acc + (amountMap.value[id] || 0),
        0
      )
      return Math.max(0, summary.pendingAmount - excludedAmount)
    }
    return Array.from(selectedIds.value).reduce((acc, id) => acc + (amountMap.value[id] || 0), 0)
  })

  const formatAmount = (val: number) => (Number(val || 0) || 0).toFixed(2)

  const formatQty = (v: any) => (v == null || v === '' ? '—' : String(v))
  const formatSheetMeasure = (row: any) =>
    formatMeasureUnitSpec(row.measureValue, row.unitName, row.spec)
  const sheetOrderSupplierTotal = (orderRow: any) => {
    const children = Array.isArray(orderRow?.children) ? orderRow.children : []
    return children.reduce((acc: number, ln: any) => acc + Number(ln?.supplierAmount || 0), 0)
  }
  const sheetOrderSellingTotal = (orderRow: any) => {
    const children = Array.isArray(orderRow?.children) ? orderRow.children : []
    return children.reduce((acc: number, ln: any) => acc + Number(ln?.sellingAmount || 0), 0)
  }
  const getSheetOrders = (sheetId: string) => {
    const items = sheetExpandedTreeMap.value[sheetId] || []
    return items.filter((x: any) => x && x.rowType === 'order')
  }
  const handleSheetOrderExpand = (_sheetId: string) => (_row: any, _expandedRows: any[]) => {
    // 明细数据已在结算单详情接口一次性带回；此处仅占位以统一交互（可后续做只允许展开一行等优化）
  }
  const getSheetTreeItems = (sheetId: string) => sheetExpandedTreeMap.value[sheetId] || []
  const isSheetRowLoading = (sheetId: string) => !!sheetRowLoadingMap.value[sheetId]
  const handleSheetRowExpand = async (row: any, expandedRows: any[]) => {
    const expanded = expandedRows.some((r) => r.id === row.id)
    if (!expanded) return
    if (sheetExpandedTreeMap.value[row.id]) return
    sheetRowLoadingMap.value = { ...sheetRowLoadingMap.value, [row.id]: true }
    try {
      const detail: any = await fetchClientSettlementSheetDetail(row.id)
      sheetExpandedTreeMap.value = { ...sheetExpandedTreeMap.value, [row.id]: detail?.items || [] }
    } finally {
      sheetRowLoadingMap.value = { ...sheetRowLoadingMap.value, [row.id]: false }
    }
  }

  const ORDER_STATUS_MAP: Record<string, string> = {
    pending_payment: '待支付',
    pending_confirm: '待收货',
    pending: '待收货',
    pending_review_cancel: '待审核取消',
    completed: '已完成',
    cancelled: '已取消'
  }
  const orderStatusLabel = (s: string) => (s ? ORDER_STATUS_MAP[s] || s : '—')
  const resolveOrderStatus = (row: any) => {
    if (row?.cancelStatus === 'pending_review') return 'pending_review_cancel'
    return row?.orderStatus || row?.status || ''
  }
  const orderStatusTagType = (s: string) => {
    if (s === 'pending_payment' || s === 'pending_review_cancel') return 'warning'
    if (s === 'pending_confirm' || s === 'pending') return 'primary'
    if (s === 'completed') return 'success'
    if (s === 'cancelled') return 'info'
    return 'info'
  }
  const DELIVERY_STATUS_MAP: Record<string, string> = {
    pending_dispatch: '待分配配送',
    pending_delivery: '待配送',
    delivering: '配送中',
    partial_delivered: '部分送达',
    delivered: '配送完成',
    pending: '待取货',
    picking: '取货中',
    completed: '已完成'
  }
  const resolveDeliveryStatus = (row: any) => {
    const direct = row?.deliveryStatus || row?.delivery_status
    if (direct) return direct
    const baseStatus = row?.status || row?.orderStatus || row?.order_status
    return ['pending_payment', 'pending_dispatch', 'pending_delivery', 'pending_review_cancel'].includes(
      baseStatus
    )
      ? 'pending_dispatch'
      : baseStatus === 'delivering'
        ? 'delivering'
        : baseStatus === 'partial_delivered'
          ? 'partial_delivered'
          : ['pending_confirm', 'completed'].includes(baseStatus)
            ? 'delivered'
            : 'pending_dispatch'
  }
  const deliveryStatusLabel = (s: string) => (s ? DELIVERY_STATUS_MAP[s] || s : '—')
  const deliveryStatusTagType = (s: string) => {
    if (s === 'delivered' || s === 'completed') return 'success'
    if (s === 'delivering') return 'info'
    if (s === 'partial_delivered' || s === 'pending_dispatch' || s === 'pending_delivery') return 'warning'
    if (s === 'picking') return 'primary'
    return 'info'
  }
  const resolvePayStatus = (row: any) =>
    row?.payStatus || (Number(row?.paidAmount || 0) > 0 ? 'paid' : 'pending_payment')
  const payStatusLabel = (s: string) => (s === 'paid' ? '已支付' : s === 'pending_payment' ? '待支付' : s || '—')
  const payStatusTagType = (s: string) => (s === 'paid' ? 'success' : s === 'pending_payment' ? 'warning' : 'info')
  const resolvePaymentMethod = (row: any) => String(row?.paymentMethod || '').toLowerCase()
  const paymentMethodLabel = (m: string) => {
    if (['online', 'wechat', 'wx'].includes(m)) return '线上支付'
    if (m === 'offline') return '线下支付'
    return m || '-'
  }
  const resolveSupplierName = (row: any) => {
    if (row?.supplierName) return row.supplierName
    if (row?.supplier?.name) return row.supplier.name
    const firstLine = Array.isArray(row?.children) ? row.children.find((x: any) => x?.supplierName) : null
    return firstLine?.supplierName || '-'
  }
  const orderTotalAmount = (row: any) =>
    Number(row?.totalAmount ?? row?.sellingTotalAmount ?? row?.settlementAmount ?? 0)
  const orderReceivableAmount = (row: any) => Number(row?.receivableAmount ?? orderTotalAmount(row))

  const rowSelectable = (row: any) => row.rowType === 'order' && !!row.settlementSelectable
  const getExpandedItems = (orderId: string) => expandedItemsMap.value[orderId] || []
  const handleRowExpand = (row: any, expandedRows: any[]) => {
    const expanded = expandedRows.some((r) => r.id === row.id)
    if (!expanded) return
    expandedItemsMap.value = {
      ...expandedItemsMap.value,
      [row.id]: Array.isArray(row.children) ? row.children : []
    }
  }
  const toggleRowExpand = (row: any) => {
    tableRef.value?.toggleRowExpansion?.(row)
    if (!expandedItemsMap.value[row.id]) {
      expandedItemsMap.value = {
        ...expandedItemsMap.value,
        [row.id]: Array.isArray(row.children) ? row.children : []
      }
    }
  }
  const openOrderProductView = (line: any) => {
    const pid = line?.productId
    if (!pid) return
    productViewTargetId.value = String(pid)
    productViewDialogVisible.value = true
  }
  const openOrderOperate = (row: any) => {
    const oid = row?.id
    if (!oid) return
    orderOperateTargetId.value = String(oid)
    orderOperateDialogVisible.value = true
  }
  const buildFilters = () => ({
    regionId: activeRegionId.value || undefined,
    clientId: searchForm.clientId || undefined,
    keyword: searchForm.keyword || undefined,
    startDate: dateRange.value?.[0] || undefined,
    endDate: dateRange.value?.[1] || undefined
  })

  const loadRegions = async () => {
    const res: any = await fetchNotDeletedRegions()
    regionList.value = Array.isArray(res) ? res : []
    if (!activeRegionId.value && allowedRegionList.value.length > 0) {
      activeRegionId.value = allowedRegionList.value[0].id
    }
  }

  const selectRegion = async (id: string) => {
    if (!id || activeRegionId.value === id) return
    activeRegionId.value = id
    selectionMode.value = 'ids'
    selectedIds.value = new Set()
    excludedIds.value = new Set()
    pagination.page = 1
    sheetPagination.page = 1
    await loadClientOptions()
    applyDefaultPendingClientFilter()
    if (activeTab.value === 'pending') {
      await loadData()
    } else {
      await loadSheetList()
    }
    await nextTick()
    tableRef.value?.clearSelection?.()
  }

  const loadClientOptions = async () => {
    const pageSize = 100
    const maxPages = 100
    const all: any[] = []
    let page = 1
    let total = 0
    while (page <= maxPages) {
      const res: any = await fetchUserList({
        page,
        pageSize,
        role: 'client',
        isActive: true,
        regionId: activeRegionId.value || undefined
      })
      const list = res?.list || []
      total = Number(res?.total || 0)
      all.push(...list)
      if (list.length < pageSize || all.length >= total) break
      page++
    }
    clientOptions.value = all
  }

  /** 待结算列表：默认选中当前区域下第一个客户，保证进入页面即按单一客户筛选 */
  const skipPendingClientAutoSearch = ref(false)
  const applyDefaultPendingClientFilter = () => {
    const first = clientOptions.value[0]
    skipPendingClientAutoSearch.value = true
    searchForm.clientId = first?.id ? String(first.id) : ''
  }

  const loadHistorySummary = async () => {
    if (activeTab.value !== 'pending') return
    try {
      const res: any = await fetchClientSettlementHistorySummary({
        regionId: activeRegionId.value || undefined,
        clientId: searchForm.clientId || undefined
      })
      historySummary.amount = Number(res?.historicalSettledAmount ?? 0)
      historySummary.orderCount = Number(res?.historicalSettledOrderCount ?? 0)
    } catch {
      historySummary.amount = 0
      historySummary.orderCount = 0
    }
  }

  const loadSheetHistorySummary = async () => {
    if (activeTab.value !== 'sheets') return
    try {
      const res: any = await fetchClientSettlementHistorySummary({
        regionId: activeRegionId.value || undefined,
        clientId: sheetSearchForm.clientId || undefined
      })
      sheetHistorySummary.amount = Number(res?.historicalSettledAmount ?? 0)
      sheetHistorySummary.orderCount = Number(res?.historicalSettledOrderCount ?? 0)
    } catch {
      sheetHistorySummary.amount = 0
      sheetHistorySummary.orderCount = 0
    }
  }

  const loadData = async () => {
    loading.value = true
    try {
      const res: any = await fetchClientSettlementOrderList({
        page: pagination.page,
        pageSize: pagination.pageSize,
        ...buildFilters()
      })
      tableData.value = res?.list || []
      expandedItemsMap.value = {}
      pagination.total = res?.total || 0
      summary.pendingAmount = Number(res?.summary?.pendingAmount || 0)
      summary.currentPageAmount = Number(res?.summary?.currentPageAmount || 0)
      summary.settleableOrderCount = Number(res?.summary?.settleableOrderCount || 0)
      currentPageIds.value = tableData.value
        .filter((x: any) => x.rowType === 'order')
        .map((x: any) => x.id)
      tableData.value.forEach((x: any) => {
        if (x.rowType === 'order') {
          amountMap.value[x.id] = Number(x.settlementAmount ?? 0)
        }
      })
      await nextTick()
      skipSelectionSync.value = true
      tableRef.value?.clearSelection?.()
      await nextTick()
      if (selectionMode.value === 'ids') {
        tableData.value.forEach((row: any) => {
          if (row.rowType === 'order' && selectedIds.value.has(row.id)) {
            tableRef.value?.toggleRowSelection?.(row, true)
          }
        })
      } else {
        tableData.value.forEach((row: any) => {
          if (row.rowType === 'order' && !excludedIds.value.has(row.id)) {
            tableRef.value?.toggleRowSelection?.(row, true)
          }
        })
      }
      await nextTick()
      skipSelectionSync.value = false
      await loadHistorySummary()
    } finally {
      loading.value = false
    }
  }

  const loadSheetList = async () => {
    sheetLoading.value = true
    try {
      const res: any = await fetchClientSettlementSheetList({
        page: sheetPagination.page,
        pageSize: sheetPagination.pageSize,
        regionId: activeRegionId.value || undefined,
        clientId: sheetSearchForm.clientId || undefined,
        settlementNo: sheetSearchForm.settlementNo || undefined,
        startDate: sheetDateRange.value?.[0] || undefined,
        endDate: sheetDateRange.value?.[1] || undefined
      })
      sheetTableData.value = res?.list || []
      const list = Array.isArray(sheetTableData.value) ? sheetTableData.value : []
      sheetCurrentSummary.amount = Number(
        res?.summary?.totalAmount ??
          list.reduce((acc: number, x: any) => acc + Number(x?.totalAmount || 0), 0)
      )
      sheetCurrentSummary.orderCount = Number(
        res?.summary?.totalOrderCount ??
          list.reduce((acc: number, x: any) => acc + Number(x?.orderCount || 0), 0)
      )
      sheetExpandedTreeMap.value = {}
      sheetRowLoadingMap.value = {}
      sheetPagination.total = res?.total || 0
      await loadSheetHistorySummary()
    } finally {
      sheetLoading.value = false
    }
  }

  const onTabChange = (name: string | number) => {
    if (name === 'sheets') {
      skipSheetClientAutoSearch.value = true
      sheetSearchForm.clientId = searchForm.clientId || ''
      sheetPagination.page = 1
      loadSheetList()
    }
    if (name === 'pending') {
      // 结算单记录 tab 中切换过客户后，回到待结算订单时保持同一筛选条件
      skipPendingClientAutoSearch.value = true
      searchForm.clientId = sheetSearchForm.clientId || ''
      pagination.page = 1
      loadData()
    }
  }

  const handleSearch = () => {
    pagination.page = 1
    selectionMode.value = 'ids'
    selectedIds.value = new Set()
    excludedIds.value = new Set()
    loadData()
  }

  const handleReset = () => {
    searchForm.keyword = ''
    dateRange.value = []
    applyDefaultPendingClientFilter()
    handleSearch()
  }

  const handleSheetSearch = () => {
    sheetPagination.page = 1
    loadSheetList()
  }

  const handleSheetReset = () => {
    skipSheetClientAutoSearch.value = true
    sheetSearchForm.clientId = ''
    sheetSearchForm.settlementNo = ''
    sheetDateRange.value = []
    handleSheetSearch()
  }

  const handleSelectionChange = (rows: any[]) => {
    if (skipSelectionSync.value) return
    const orderRows = rows.filter((x: any) => x.rowType === 'order')
    const selectedOnPage = new Set(orderRows.map((x: any) => x.id))
    if (selectionMode.value === 'allFiltered') {
      currentPageIds.value.forEach((id) => {
        if (selectedOnPage.has(id)) excludedIds.value.delete(id)
        else excludedIds.value.add(id)
      })
      return
    }
    currentPageIds.value.forEach((id) => selectedIds.value.delete(id))
    selectedOnPage.forEach((id) => selectedIds.value.add(id))
  }

  const handleSelectAllFiltered = async () => {
    if (!summary.settleableOrderCount) {
      ElMessage.warning('当前检索条件下没有可结算的已完结订单')
      return
    }
    await ElMessageBox.confirm(
      `将全选当前检索条件下的全部已完结订单（共 ${summary.settleableOrderCount} 笔，可结算售价合计约 ¥${formatAmount(summary.pendingAmount)}）。未完成订单不会参与结算。是否继续？`,
      '跨分页全选',
      { type: 'warning' }
    )
    selectionMode.value = 'allFiltered'
    selectedIds.value = new Set()
    excludedIds.value = new Set()
    ElMessage.success('已启用跨分页全选')
    await nextTick()
    skipSelectionSync.value = true
    tableRef.value?.clearSelection?.()
    await nextTick()
    tableData.value.forEach((row: any) => {
      if (row.rowType === 'order' && row.settlementSelectable && !excludedIds.value.has(row.id)) {
        tableRef.value?.toggleRowSelection?.(row, true)
      }
    })
    await nextTick()
    skipSelectionSync.value = false
  }

  const openSettlementDialog = () => {
    if (!selectedCount.value) {
      ElMessage.warning('请先选择要结算的订单')
      return
    }
    if (selectionMode.value === 'ids') {
      const picked = tableData.value.filter(
        (x: any) => x.rowType === 'order' && selectedIds.value.has(x.id)
      )
      const cids = [...new Set(picked.map((x: any) => x.clientId).filter(Boolean))]
      if (cids.length > 1) {
        ElMessage.warning('请选择同一客户的订单后再结算')
        return
      }
    }
    settlementVoucherUrls.value = []
    settlementRemark.value = ''
    settlementDialogVisible.value = true
  }

  const resetSettlementDialog = () => {
    settlementVoucherUrls.value = []
    settlementRemark.value = ''
  }

  const confirmSettlementSubmit = async () => {
    if (!selectedCount.value) return ElMessage.warning('请先选择要结算的订单')
    if (!settlementVoucherUrls.value.length) return ElMessage.warning('请先上传结算凭证')
    submitLoading.value = true
    try {
      await fetchCreateClientSettlement({
        selectionMode: selectionMode.value,
        orderIds: Array.from(selectedIds.value),
        filters: buildFilters(),
        excludedOrderIds: Array.from(excludedIds.value),
        voucherUrls: settlementVoucherUrls.value,
        remark: settlementRemark.value || undefined
      })
      ElMessage.success('客户结算完成')
      settlementDialogVisible.value = false
      selectionMode.value = 'ids'
      selectedIds.value = new Set()
      excludedIds.value = new Set()
      loadData()
      if (activeTab.value === 'sheets') loadSheetList()
      await nextTick()
      tableRef.value?.clearSelection?.()
    } finally {
      submitLoading.value = false
    }
  }

  const openSheetDetail = async (id: string) => {
    const res: any = await fetchClientSettlementSheetDetail(id)
    sheetDetail.value = res
    sheetDetailVisible.value = true
  }

  const downloadSettlementSheet = async (row: any) => {
    if (!row?.id || sheetDownloadId.value) return
    sheetDownloadId.value = row.id
    try {
      const res: any = await fetchClientSettlementSheetDetail(row.id)
      if (!res?.items?.length) {
        ElMessage.warning('该结算单暂无商品明细，无法导出')
        return
      }
      const lineCount = (res.items as any[]).reduce(
        (sum, ord) => sum + (Array.isArray(ord.children) ? ord.children.length : 0),
        0
      )
      if (!lineCount) {
        ElMessage.warning('该结算单暂无商品明细，无法导出')
        return
      }
      await exportClientSettlementSheetExcel({
        settlementNo: res.settlementNo || row.settlementNo,
        clientName: res.clientName || row.clientName,
        settlementAt: res.settlementAt || row.settlementAt,
        items: res.items
      })
      ElMessage.success('结算单已开始下载')
    } catch {
      ElMessage.error('下载失败，请稍后重试')
    } finally {
      sheetDownloadId.value = ''
    }
  }

  const openSheetEdit = async (row: any) => {
    sheetEditId.value = row.id
    const res: any = await fetchClientSettlementSheetDetail(row.id)
    sheetEditForm.remark = res?.remark || ''
    sheetEditForm.voucherUrls = Array.isArray(res?.voucherUrls) ? [...res.voucherUrls] : []
    sheetEditVisible.value = true
  }

  const resetSheetEdit = () => {
    sheetEditId.value = ''
    sheetEditForm.remark = ''
    sheetEditForm.voucherUrls = []
  }

  const saveSheetEdit = async () => {
    if (!sheetEditId.value) return
    sheetEditSaving.value = true
    try {
      await fetchUpdateClientSettlementSheet(sheetEditId.value, {
        remark: sheetEditForm.remark,
        voucherUrls: sheetEditForm.voucherUrls
      })
      ElMessage.success('已保存')
      sheetEditVisible.value = false
      loadSheetList()
    } finally {
      sheetEditSaving.value = false
    }
  }

  onMounted(async () => {
    await loadRegions()
    await loadClientOptions()
    applyDefaultPendingClientFilter()
    await loadData()
  })

  watch(
    () => searchForm.clientId,
    (val, oldVal) => {
      if (skipPendingClientAutoSearch.value) {
        skipPendingClientAutoSearch.value = false
        return
      }
      if (val === oldVal) return
      if (activeTab.value !== 'pending') return
      handleSearch()
    }
  )

  watch(
    () => sheetSearchForm.clientId,
    (val, oldVal) => {
      if (skipSheetClientAutoSearch.value) {
        skipSheetClientAutoSearch.value = false
        return
      }
      if (val === oldVal) return
      if (activeTab.value !== 'sheets') return
      handleSheetSearch()
    }
  )
</script>

<style lang="scss" scoped>
  .page-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .settlement-page-tabs :deep(.el-tabs__header) {
    margin-bottom: 12px;
  }

  .stats-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
  }

  .stats-row--compact {
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
  }

  .stats-row--compact .stat-card {
    border: 0 !important;
  }

  .stat-title {
    color: #64748b;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
  }

  .stat-value {
    margin-top: 6px;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.1;
  }

  .stat-value.amount {
    color: #dc2626;
  }

  .pending-main-card,
  .sheet-main-card,
  .stat-card {
    border: 1px solid var(--mint-border, #d9e8e2);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    overflow: hidden;
  }

  /* 客户结算管理 - 结算单记录主卡片：按需求去掉外边框 */
  .sheet-main-card {
    border: 0 !important;
  }

  .pending-main-card :deep(.el-card__body),
  .sheet-main-card :deep(.el-card__body) {
    padding: 0;
  }

  .filter-block {
    padding: 12px 16px 10px;
    border-bottom: 1px solid #eef4f0;
    background: #fff;
  }

  .filter-form :deep(.el-form-item) {
    margin-bottom: 0;
  }

  .filter-form :deep(.el-form-item__label) {
    font-size: 13px;
    font-weight: 500;
    color: var(--mint-text-muted, #64748b);
    padding-bottom: 4px;
    line-height: 1.2;
  }

  .filter-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 14px;
  }

  .filter-actions-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
  }

  .filter-actions-end {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  .toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    margin-bottom: 0;
    border-bottom: 1px solid var(--mint-border, #d9e8e2);
    background: #f8fafc;
  }

  .toolbar :deep(.btn-main.el-button:not(.is-disabled)) {
    color: #fff !important;
  }

  .toolbar :deep(.btn-main.el-button:not(.is-disabled):hover),
  .toolbar :deep(.btn-main.el-button:not(.is-disabled):active),
  .toolbar :deep(.btn-main.el-button:not(.is-disabled):focus-visible) {
    color: #fff !important;
  }

  .toolbar :deep(.btn-main.el-button.is-disabled) {
    color: var(--el-text-color-placeholder, #a8abb2) !important;
  }

  .toolbar-inline-stats {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px 20px;
    margin-left: 4px;
    font-size: 13px;
    color: var(--mint-text-muted, #64748b);
  }

  .toolbar-stat .stat-money {
    color: #dc2626;
    font-weight: 700;
  }

  .toolbar-stat strong:not(.stat-money) {
    color: #dc2626;
    font-weight: 700;
  }

  .amount-text {
    color: #dc2626;
    font-weight: 600;
  }

  .cell-muted {
    color: #c0c4cc;
  }

  .sheet-summary-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 18px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--mint-border, #d9e8e2);
    background: #f8fafc;
  }

  .sheet-summary-group {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    font-size: 13px;
  }

  .sheet-summary-label {
    color: var(--mint-text-muted, #64748b);
    font-weight: 500;
  }

  .sheet-summary-value {
    font-weight: 700;
  }

  .sheet-summary-divider {
    width: 1px;
    height: 18px;
    background: var(--mint-border, #d9e8e2);
    margin: 0 2px;
  }

.settlement-remark-form {
  margin-top: 16px;
}

  .pagination {
    display: flex;
    justify-content: flex-end;
    margin-top: 0;
    padding: 10px 16px 12px;
    border-top: 1px solid var(--mint-border, #d9e8e2);
    background: #fff;
  }

  .region-tab-btn {
    position: relative;
    min-width: 108px;
    padding: 0 12px;
  }

  .region-tab-btn.el-button > :deep(span) {
    position: static !important;
    display: inline-flex;
    width: 100%;
    justify-content: center;
  }

  .region-tab-inner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  .region-tab-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    padding: 0 4px;
    border-radius: 999px;
    font-size: 10px;
    line-height: 14px;
    color: #b91c1c;
    background: #fef2f2;
    border: 1px solid rgba(248, 113, 113, 0.6);
    pointer-events: none;
  }

  /* 结算单记录分页与其他页面保持一致：右对齐，不做人为右侧缩进 */
  .sheet-main-card .pagination {
    justify-content: flex-end;
    padding-right: 16px;
  }

  .order-row-expand-wrap {
    padding: 0;
    background: #f8fafc;
    border-radius: 0;
  }

  .client-settlement-table :deep(td.el-table__expanded-cell),
  .client-settlement-sheet-table :deep(td.el-table__expanded-cell),
  .sheet-orders-table :deep(td.el-table__expanded-cell),
  .client-settlement-table :deep(.el-table__body td.el-table__expanded-cell),
  .client-settlement-sheet-table :deep(.el-table__body td.el-table__expanded-cell),
  .sheet-orders-table :deep(.el-table__body td.el-table__expanded-cell) {
    padding: 12px !important;
    text-align: left !important;
    vertical-align: top;
    background: #f8fafc;
    box-sizing: border-box;
    overflow: hidden;
  }

  .client-settlement-table :deep(td.el-table__expanded-cell > .cell),
  .client-settlement-sheet-table :deep(td.el-table__expanded-cell > .cell),
  .sheet-orders-table :deep(td.el-table__expanded-cell > .cell) {
    display: block !important;
    padding: 0 !important;
    text-align: left !important;
  }

  /* 第二层：结算单展开后的“订单列表”容器 */
  .sheet-row-expand-wrap {
    margin: 0;
    border-radius: 10px;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: auto;
    overflow-y: hidden;
    position: relative;
    padding: 12px 12px 14px 18px;
    background: #f8fafc;
  }

  .sheet-row-expand-wrap::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: #10b981;
    z-index: 2;
    pointer-events: none;
  }

  .sheet-row-expand-wrap :deep(.sheet-orders-table) {
    border: 1px solid var(--mint-border, #d9e8e2);
    border-radius: 8px;
    background: #fff;
    position: relative;
    z-index: 1;
  }

  .sheet-row-expand-wrap :deep(.sheet-orders-table th.el-table__cell) {
    background: #e2e8f0 !important;
    color: var(--mint-text-muted, #64748b);
    font-size: 11px;
    font-weight: 600;
  }

  .sheet-row-expand-wrap :deep(.sheet-orders-table .el-table__cell) {
    padding: 8px 10px;
  }

  .sheet-row-expand-wrap :deep(.sheet-orders-table .el-table__inner-wrapper),
  .sheet-row-expand-wrap :deep(.sheet-orders-table .el-table__header-wrapper),
  .sheet-row-expand-wrap :deep(.sheet-orders-table .el-table__body-wrapper) {
    width: 100% !important;
    min-width: 100% !important;
    max-width: none !important;
  }

  .sheet-row-expand-wrap :deep(.sheet-orders-table .el-table__body-wrapper),
  .sheet-row-expand-wrap :deep(.sheet-orders-table .el-scrollbar__wrap) {
    overflow-x: auto !important;
  }

  .sheet-row-expand-wrap :deep(.sheet-orders-table.el-table),
  .sheet-row-expand-wrap :deep(.sheet-orders-table .el-table) {
    width: 100% !important;
    min-width: 100% !important;
  }

  .settlement-row-expand-table-wrap {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: hidden;
    border-radius: 0;
    text-align: left;
    position: relative;
    background: #f8fafc;
    padding: 12px 12px 14px 16px;

    :deep(.el-table__inner-wrapper),
    :deep(.el-table__header-wrapper),
    :deep(.el-table__body-wrapper) {
      width: 100%;
    }
  }

  .settlement-row-expand-table-wrap::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: #10b981;
  }

  /* 第三层：孙列表琥珀层级 */
  .client-settlement-sheet-table :deep(.sheet-orders-table .settlement-row-expand-table-wrap) {
    margin-top: 4px;
    padding-left: 14px;
    padding-top: 10px;
    padding-right: 12px;
    padding-bottom: 0;
    border-left: 3px solid #f59e0b;
    background: linear-gradient(90deg, rgba(254, 243, 199, 0.35) 0%, transparent 12px);
  }

  /* 第三级底部汇总（含“商品行数”）：跟随子表“内容宽度”右对齐（避免对齐到一级列表最右侧） */
  .client-settlement-sheet-table :deep(.sheet-orders-table .settlement-row-expand-table-wrap .order-row-expand-summary),
  .client-settlement-table :deep(.settlement-row-expand-table-wrap .order-row-expand-summary) {
    width: max-content;
    min-width: 100%;
    box-sizing: border-box;
    padding-right: 12px;
    justify-content: flex-end;
  }

  .client-settlement-sheet-table :deep(.sheet-orders-table .settlement-row-expand-table-wrap::before) {
    background: #f59e0b;
  }

  .client-settlement-sheet-table :deep(.sheet-orders-table .order-row-expand-table) {
    border-color: #fcd34d !important;
  }

  .client-settlement-sheet-table :deep(.sheet-orders-table .order-row-expand-table th.el-table__cell) {
    background: #fef3c7 !important;
    color: #92400e !important;
    font-size: 10px !important;
    border-bottom: 1px solid #fcd34d !important;
  }

  .client-settlement-sheet-table :deep(.sheet-orders-table .order-row-expand-table td.el-table__cell) {
    font-size: 12px;
    border-bottom: 1px solid #fef3c7 !important;
  }

  .client-settlement-sheet-table :deep(.sheet-orders-table .order-row-expand-table .el-table__cell) {
    padding: 6px 8px !important;
  }

  .client-settlement-sheet-table :deep(.sheet-orders-table .order-row-expand-table tr:hover td.el-table__cell) {
    background: #fffbeb !important;
  }

  .client-settlement-table :deep(td.el-table__cell.el-table__expand-column > .cell),
  .client-settlement-sheet-table :deep(td.el-table__cell.el-table__expand-column > .cell),
  .client-settlement-sheet-table :deep(.sheet-orders-table td.el-table__cell.el-table__expand-column > .cell) {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
  }

  .client-settlement-table :deep(.el-table__expand-icon),
  .client-settlement-sheet-table :deep(.el-table__expand-icon),
  .client-settlement-sheet-table :deep(.sheet-orders-table .el-table__expand-icon) {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid var(--mint-border, #d9e8e2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
    color: var(--mint-text-muted, #64748b);
    background: var(--mint-surface, #fff);
    font-size: 0;
    line-height: 0;
  }

  .client-settlement-table :deep(.el-table__expand-icon:hover),
  .client-settlement-sheet-table :deep(.el-table__expand-icon:hover),
  .client-settlement-sheet-table :deep(.sheet-orders-table .el-table__expand-icon:hover) {
    background: var(--mint-primary-bg, #ecfdf5);
    border-color: #10b981;
    color: var(--mint-primary-dark, #059669);
  }

  .client-settlement-table :deep(.el-table__expand-icon--expanded),
  .client-settlement-sheet-table :deep(.el-table__expand-icon--expanded),
  .client-settlement-sheet-table :deep(.sheet-orders-table .el-table__expand-icon--expanded) {
    background: var(--mint-primary-bg, #ecfdf5);
    border-color: #10b981;
    color: var(--mint-primary-dark, #059669);
  }

  .client-settlement-table :deep(.el-table__expand-icon svg),
  .client-settlement-sheet-table :deep(.el-table__expand-icon svg),
  .client-settlement-sheet-table :deep(.sheet-orders-table .el-table__expand-icon svg) {
    transition: transform 0.15s ease;
    width: 14px;
    height: 14px;
  }

  .client-settlement-table :deep(.el-table__expand-icon--expanded svg),
  .client-settlement-sheet-table :deep(.el-table__expand-icon--expanded svg),
  .client-settlement-sheet-table :deep(.sheet-orders-table .el-table__expand-icon--expanded svg) {
    transform: rotate(180deg);
  }

  /* 二级子表 expand icon：强制与一级一致（避免 size="small" 影响） */
  .client-settlement-sheet-table :deep(.sheet-orders-table .el-table__expand-icon) {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    border-radius: 6px !important;
  }

  .client-settlement-sheet-table :deep(.sheet-orders-table .el-table__expand-icon svg) {
    width: 14px !important;
    height: 14px !important;
  }

  /* 二/三级子表：商品缩略图尺寸对齐【商家结算管理】 */
  .expand-product-cell {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: 100%;
    min-width: 0;
  }

  .expand-product-thumb-wrap {
    flex: 0 0 auto;
  }

  .expand-product-thumb {
    width: 34px;
    height: 34px;
    border-radius: 6px;
    display: block;
  }

  .expand-product-thumb.placeholder {
    width: 34px;
    height: 34px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: #909399;
    background: #f5f7fa;
    border: 1px dashed #dcdfe6;
  }

  .expand-product-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* ---------- 客户结算：结算单记录展开层滚动兜底 ---------- */
  .sheet-orders-scroll,
  .order-row-expand-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: hidden;
    scrollbar-gutter: stable;
  }

  .sheet-orders-scroll :deep(.sheet-orders-table) {
    width: max(1560px, 100%) !important;
    min-width: 1560px !important;
  }

  .order-row-expand-scroll :deep(.order-row-expand-table) {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }

  .sheet-orders-scroll :deep(.sheet-orders-table .el-table__body-wrapper),
  .sheet-orders-scroll :deep(.sheet-orders-table .el-scrollbar__wrap),
  .order-row-expand-scroll :deep(.order-row-expand-table .el-table__body-wrapper),
  .order-row-expand-scroll :deep(.order-row-expand-table .el-scrollbar__wrap) {
    overflow-x: auto !important;
  }

  .sheet-orders-scroll :deep(.el-scrollbar__bar.is-horizontal),
  .order-row-expand-scroll :deep(.el-scrollbar__bar.is-horizontal) {
    opacity: 1 !important;
    display: block !important;
    height: 10px !important;
  }

</style>

<!-- Teleport 到 body：弹窗内容需非 scoped 才能稳定命中 -->
<style lang="scss">
  .client-settlement-dialog.el-dialog {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 64px);
  }

  .client-settlement-dialog .el-dialog__header {
    flex-shrink: 0;
    background: linear-gradient(135deg, #ecfdf5 0%, #ffffff 70%);
    border-bottom: 1px solid var(--mint-border, #d9e8e2);
  }

  .client-settlement-dialog .el-dialog__body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 0 !important;
    overflow: hidden;
  }

  /* “确认结算”弹窗内容区保留与商家结算一致的左右留白 */
  .client-settlement-dialog.settlement-confirm-dialog .el-dialog__body {
    padding: 20px 22px !important;
    overflow: auto;
  }

  .client-settlement-dialog .dialog-scroll {
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px 22px;
    flex: 1;
  }

  .client-settlement-dialog .el-dialog__footer {
    padding: 12px 22px !important;
    border-top: 1px solid var(--mint-border, #d9e8e2);
    background: #f8fafc;
  }

  .client-settlement-dialog .el-dialog__footer .el-button {
    height: 36px;
    border-radius: 8px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .client-settlement-dialog-mask {
    backdrop-filter: none !important;
  }

  .client-settlement-dialog.sheet-edit-dialog .form-section {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px dashed var(--mint-border, #d9e8e2);
  }

  .client-settlement-dialog.sheet-edit-dialog .form-section:last-of-type {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
  }

  .client-settlement-dialog.sheet-edit-dialog .form-section h4 {
    margin: 0 0 12px;
    font-size: 13px;
    font-weight: 700;
    color: var(--mint-text-muted, #64748b);
    letter-spacing: 0.04em;
  }

  .client-settlement-dialog.sheet-edit-dialog .form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
  }

  .client-settlement-dialog.sheet-edit-dialog .form-col-span-2 {
    grid-column: 1 / -1;
  }

  .client-settlement-dialog.sheet-edit-dialog .el-form-item {
    margin-bottom: 0;
  }

  .client-settlement-dialog.sheet-edit-dialog .el-form-item__label {
    color: var(--mint-text-muted, #64748b) !important;
    font-weight: 600;
    font-size: 12px;
    line-height: 1.2;
    padding-bottom: 6px;
  }

  @media (max-width: 760px) {
    .client-settlement-dialog.sheet-edit-dialog .form-grid-2 {
      grid-template-columns: 1fr;
    }
  }
</style>