mtsd/web-admin/src/views/system/supplier-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 regionList"
          :key="r.id"
          class="region-tab-btn"
          :type="activeRegionId === r.id ? 'primary' : 'default'"
          @click="selectRegion(r.id)"
        >
          {{ r.name }}
        </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.supplierId" filterable clearable placeholder="请选择供应商">
                    <el-option
                      v-for="u in supplierOptions"
                      :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="supplier-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 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="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.settlementAmount) }}</span
                        ></span
                      >
                      <span
                        >售出总金额(元)：<span class="sqxp-subtable-summary__amount"
                          >¥{{ formatAmount(row.clientSellingTotal) }}</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 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="supplierName" label="供应商名称" min-width="150" show-overflow-tooltip />
            <el-table-column prop="regionName" label="区域" min-width="120" show-overflow-tooltip />
            <el-table-column prop="settlementAmount" label="供货总金额(元)" min-width="140" align="right">
              <template #default="{ row }">
                <span class="amount-text">¥{{ formatAmount(row.settlementAmount) }}</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="createAt" label="下单时间" min-width="170" />
            <el-table-column prop="supplierSettlementStatus" label="商家结算" width="100">
              <template #default="{ row }">
                <el-tag :type="row.supplierSettlementStatus === 'settled' ? 'success' : 'warning'" 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.supplierId" filterable clearable placeholder="全部">
                    <el-option
                      v-for="u in supplierOptions"
                      :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="supplier-settlement-sheet-table"
            :data="sheetTableData"
            stripe
            @expand-change="handleSheetRowExpand"
          >
            <el-table-column type="expand" width="48">
              <template #default="{ row }">
                <div class="sheet-row-expand-wrap" v-loading="isSheetRowLoading(row.id)">
                  <el-table
                    v-if="getSheetOrders(row.id).length"
                    :data="getSheetOrders(row.id)"
                    row-key="id"
                    stripe
                    size="small"
                    class="sheet-orders-table"
                    @expand-change="handleSheetOrderExpand(row.id)"
                  >
                    <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"
                          >
                            <el-table
                              :data="ord.children"
                              stripe
                              size="small"
                              class="order-row-expand-table sqxp-subtable"
                              @row-dblclick="openOrderProductView"
                            >
                            <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="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(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 prop="regionName" label="区域" min-width="110" show-overflow-tooltip />
                    <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="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="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="170" />
                  </el-table>
                  <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="supplierName" 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="260" 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>
              </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"
    >
      <el-alert type="info" :closable="false" class="mb-3">
        已选 {{ selectedCount }} 笔订单，合计
        <strong>¥{{ formatAmount(selectedAmount) }}</strong>
      </el-alert>
      <VoucherMediaUploader v-model="settlementVoucherUrls" business-type="supplier_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-icon><Close /></el-icon>取消</el-button>
        <el-button class="btn-main" :loading="submitLoading" @click="confirmSettlementSubmit">
          <el-icon><Check /></el-icon>确认结算
        </el-button>
      </template>
    </el-dialog>

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

    <el-dialog
      v-model="sheetEditVisible"
      title="编辑结算单"
      width="720px"
      destroy-on-close
      @closed="resetSheetEdit"
      class="supplier-settlement-dialog sheet-edit-dialog"
      modal-class="supplier-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="supplier_settlement"
            :business-id="sheetEditId || 'temp'"
          />
        </div>
      </div>
      <template #footer>
        <el-button class="btn-ghost" @click="sheetEditVisible = false"><el-icon><Close /></el-icon>取消</el-button>
        <el-button class="btn-main" :loading="sheetEditSaving" @click="saveSheetEdit">
          <el-icon><Check /></el-icon>保存
        </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 { Check, Close } from '@element-plus/icons-vue'
  import {
    fetchCreateSupplierSettlement,
    fetchSupplierSettlementOrderList,
    fetchSupplierSettlementHistorySummary,
    fetchSupplierSettlementSheetList,
    fetchSupplierSettlementSheetDetail,
    fetchUpdateSupplierSettlementSheet
  } from '@/api/business'
  import { fetchUserList, fetchActiveRegions } 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'

  defineOptions({ name: 'SupplierSettlement' })

  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()
  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 supplierOptions = 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({
    supplierId: '',
    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({
    supplierId: '',
    settlementNo: ''
  })
  const skipSheetSupplierAutoSearch = 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 sheetEditId = ref('')
  const sheetEditForm = reactive({
    remark: '',
    voucherUrls: [] as string[]
  })

  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 formatMeasureCell = (v: unknown) => {
    if (v == null || v === '') return '-'
    const n = Number(v)
    if (Number.isNaN(n)) return '-'
    return n.toFixed(3).replace(/\.?0+$/, '')
  }

  const formatQty = (v: any) => (v == null || v === '' ? '—' : String(v))
  const formatSheetMeasure = (row: any) => {
    const u = row.unitName || ''
    const m = row.measureValue
    if (m != null && m !== '') return `${m} · ${u || '—'}`
    return u || '—'
  }
  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 fetchSupplierSettlementSheetDetail(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_review_cancel: '待审核取消',
    pending_delivery: '待分配配送',
    delivering: '配送中',
    partial_delivered: '部分送达',
    pending_confirm: '待确认收货',
    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 === 'completed') return 'success'
    if (s === 'cancelled') return 'info'
    if (s === 'pending_payment' || s === 'partial_delivered') return 'warning'
    return 'primary'
  }
  const DELIVERY_STATUS_MAP: Record<string, string> = {
    pending_dispatch: '待分配配送',
    pending_delivery: '待配送',
    delivering: '配送中',
    partial_delivered: '部分送达',
    delivered: '配送完成',
    pending: '待取货',
    picking: '取货中',
    completed: '已完成'
  }
  const resolveDeliveryStatus = (row: any) =>
    row?.deliveryStatus ||
    (['pending_payment', 'pending_dispatch', 'pending_delivery', 'pending_review_cancel'].includes(
      resolveOrderStatus(row)
    )
      ? 'pending_dispatch'
      : resolveOrderStatus(row) === 'delivering'
        ? 'delivering'
        : resolveOrderStatus(row) === 'partial_delivered'
          ? 'partial_delivered'
          : ['pending_confirm', 'completed'].includes(resolveOrderStatus(row))
            ? '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 orderTotalAmount = (row: any) =>
    Number(row?.totalAmount ?? row?.sellingTotalAmount ?? row?.clientSellingTotal ?? row?.settlementAmount ?? 0)
  const orderReceivableAmount = (row: any) => Number(row?.receivableAmount ?? orderTotalAmount(row))

  // 线上/线下支付订单均支持商家结算，不在前端按 settlementSelectable 进行勾选限制。
  const rowSelectable = (row: any) => row.rowType === 'order'
  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,
    supplierId: searchForm.supplierId || undefined,
    keyword: searchForm.keyword || undefined,
    startDate: dateRange.value?.[0] || undefined,
    endDate: dateRange.value?.[1] || undefined
  })

  const loadRegions = async () => {
    const res: any = await fetchActiveRegions()
    const all = res || []
    const bindId = userStore.getUserInfo?.regionId
    if (bindId) {
      regionList.value = all.filter((r: any) => r.id === bindId)
      if (!regionList.value.length && userStore.getUserInfo?.regionName) {
        regionList.value = [{ id: bindId, name: userStore.getUserInfo.regionName }]
      }
    } else {
      regionList.value = all
    }
    if (!activeRegionId.value && regionList.value.length > 0) {
      activeRegionId.value = regionList.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 loadSupplierOptions()
    applyDefaultPendingSupplierFilter()
    if (activeTab.value === 'pending') {
      await loadData()
    } else {
      await loadSheetList()
    }
    await nextTick()
    tableRef.value?.clearSelection?.()
  }

  const loadSupplierOptions = 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: 'supplier',
        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++
    }
    supplierOptions.value = all
  }

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

  const loadHistorySummary = async () => {
    if (activeTab.value !== 'pending') return
    try {
      const res: any = await fetchSupplierSettlementHistorySummary({
        regionId: activeRegionId.value || undefined,
        supplierId: searchForm.supplierId || 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 fetchSupplierSettlementHistorySummary({
        regionId: activeRegionId.value || undefined,
        supplierId: sheetSearchForm.supplierId || 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 fetchSupplierSettlementOrderList({
        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 fetchSupplierSettlementSheetList({
        page: sheetPagination.page,
        pageSize: sheetPagination.pageSize,
        regionId: activeRegionId.value || undefined,
        supplierId: sheetSearchForm.supplierId || 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') {
      skipSheetSupplierAutoSearch.value = true
      sheetSearchForm.supplierId = searchForm.supplierId || ''
      sheetPagination.page = 1
      loadSheetList()
    }
    if (name === 'pending') {
      // 结算单记录 tab 中切换过供应商后，回到待结算订单时保持同一筛选条件
      skipPendingSupplierAutoSearch.value = true
      searchForm.supplierId = sheetSearchForm.supplierId || ''
      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 = []
    applyDefaultPendingSupplierFilter()
    handleSearch()
  }

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

  const handleSheetReset = () => {
    skipSheetSupplierAutoSearch.value = true
    sheetSearchForm.supplierId = ''
    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' && !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 sids = [...new Set(picked.map((x: any) => x.supplierId).filter(Boolean))]
      if (sids.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 fetchCreateSupplierSettlement({
        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 fetchSupplierSettlementSheetDetail(id)
    sheetDetail.value = res
    sheetDetailVisible.value = true
  }

  const openSheetEdit = async (row: any) => {
    sheetEditId.value = row.id
    const res: any = await fetchSupplierSettlementSheetDetail(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 fetchUpdateSupplierSettlementSheet(sheetEditId.value, {
        remark: sheetEditForm.remark,
        voucherUrls: sheetEditForm.voucherUrls
      })
      ElMessage.success('已保存')
      sheetEditVisible.value = false
      loadSheetList()
    } finally {
      sheetEditSaving.value = false
    }
  }

  onMounted(async () => {
    await loadRegions()
    await loadSupplierOptions()
    applyDefaultPendingSupplierFilter()
    await loadData()
  })

  watch(
    () => searchForm.supplierId,
    async (val, oldVal) => {
      // 初始化/重置时会程序化赋值一次：跳过自动检索，避免重复请求
      if (skipPendingSupplierAutoSearch.value) {
        skipPendingSupplierAutoSearch.value = false
        return
      }
      if (val === oldVal) return
      if (activeTab.value !== 'pending') return
      handleSearch()
    }
  )

  watch(
    () => sheetSearchForm.supplierId,
    (val, oldVal) => {
      if (skipSheetSupplierAutoSearch.value) {
        skipSheetSupplierAutoSearch.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;
  }

  /* 卡片风格：对齐 delivery-demo（白底 + 薄边框 + 10px 圆角 + 轻阴影） */
  .search-card,
  .stat-card,
  .list-table-card,
  .pending-main-card,
  .sheet-list-card,
  .sheet-main-card {
    border: 1px solid var(--mint-border, #d9e8e2) !important;
    border-radius: 10px !important;
    background: var(--mint-surface, #fff) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    overflow: hidden;
  }

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

  .search-card :deep(.el-card__body) {
    padding: 12px 16px 12px;
  }

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

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

  .stat-card :deep(.el-card__body) {
    padding: 12px 14px;
    min-height: 112px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

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

  /* 结算单记录：三级展开子表按 fresh-mint-green.html（§8）对齐 */
  .supplier-settlement-sheet-table :deep(td.el-table__expanded-cell),
  .sheet-orders-table :deep(td.el-table__expanded-cell),
  .supplier-settlement-sheet-table :deep(.el-table__body td.el-table__expanded-cell),
  .sheet-orders-table :deep(.el-table__body td.el-table__expanded-cell) {
    /* 关键：在 table-cell 上做四周留白，避免 margin 被超宽子表“顶穿” */
    padding: 12px !important;
    text-align: left !important;
    vertical-align: top;
    background: #f8fafc;
    box-sizing: border-box;
    overflow: hidden;
  }

  .supplier-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,
  .order-row-expand-wrap {
    padding: 0;
    background: #f8fafc;
  }

  /* 第二层：结算单展开后的“订单列表”容器 */
  .sheet-row-expand-wrap {
    /* 外层留白交给 td.el-table__expanded-cell 的 padding，这里不再用 margin */
    margin: 0;
    border-radius: 10px;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    overflow-x: auto;
  }

  .sheet-row-expand-wrap :deep(.sheet-orders-table) {
    width: 100%;
  }

  .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 {
    position: relative;
    padding: 12px 12px 14px 18px;
  }

  .sheet-row-expand-wrap :deep(.sheet-orders-table) {
    border: 1px solid var(--mint-border, #d9e8e2);
    border-radius: 8px;
    overflow: hidden;
    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 {
    width: 100%;
    max-width: 100%;
  }

  .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: max-content !important;
    min-width: 100% !important;
  }

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

  .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: max-content !important;
    min-width: 100% !important;
  }

  /* 第三级（商品明细表）同样按内容撑开并可横向滚动 */
  .supplier-settlement-sheet-table :deep(.sheet-orders-table .settlement-row-expand-table-wrap) {
    overflow: visible;
    width: 100%;
    max-width: 100%;
  }

  /* 第三层容器再缩进一档，形成清晰层级 */
  .supplier-settlement-sheet-table :deep(.sheet-orders-table .order-row-expand-wrap) {
    /* 外层留白交给“二级表格的 expanded-cell padding”，这里不再用 margin */
    margin: 0;
    border-radius: 10px;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    overflow-x: auto;
  }

  /* 第三层外层（琥珀）也与二级内容保持四周留白 */
  .supplier-settlement-sheet-table :deep(.sheet-orders-table .settlement-row-expand-table-wrap) {
    /* 外层留白交给 expanded-cell padding，这里不再用 margin */
    margin: 0;
    border-radius: 10px;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    overflow-x: auto;
  }

  /* 二级展开/收起 icon 与一级完全一致（不受 size="small" 影响） */
  .supplier-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;
  }

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

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

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

  .supplier-settlement-sheet-table :deep(.sheet-orders-table .order-row-expand-table .el-scrollbar__wrap) {
    overflow-x: auto !important;
  }

  .supplier-settlement-sheet-table :deep(.sheet-orders-table .order-row-expand-table.el-table),
  .supplier-settlement-sheet-table :deep(.sheet-orders-table .order-row-expand-table .el-table) {
    width: max-content !important;
    min-width: 100% !important;
  }

  .search-card {
    margin-bottom: 16px;
  }

  .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;
  }

  .region-tab-strip {
    margin-bottom: 0;
  }

  .region-tab-group.tab-button-group {
    gap: 8px;
  }

  .region-tab-btn {
    min-width: 96px;
  }

  .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;
  }

  /* 待结算订单：顶部 4 个统计卡去边框，并保持居中展示 */
  .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;
  }

  .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;
  }

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

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

  .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;
  }

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

  .tab-button-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
  }

  .region-tabs {
    margin-bottom: 16px;
  }

  .mb-3 {
    margin-bottom: 12px;
  }

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

  .voucher-list {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 12px;
  }

  .voucher-list--block {
    display: flex;
    flex-wrap: wrap;
    margin-left: 0;
    margin-top: 8px;
  }

  .text-muted {
    color: #909399;
    font-size: 12px;
    margin-top: 2px;
  }

  .ml-1 {
    margin-left: 6px;
  }

  .line-cell {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  .line-img {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    flex-shrink: 0;
  }

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

  :deep(td.el-table__expanded-cell) {
    padding: 0 !important;
    text-align: left !important;
  }

  :deep(td.el-table__expanded-cell > .cell) {
    display: block !important;
    padding: 0 !important;
    text-align: left !important;
  }

  /* 展开列单元格兜底：避免出现意外的“..”文本占位 */
  .supplier-settlement-table :deep(td.el-table__cell.el-table__expand-column > .cell),
  .supplier-settlement-sheet-table :deep(td.el-table__cell.el-table__expand-column > .cell),
  .supplier-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;
  }

  /* 展开按钮：对齐【订单列表】树形列表展开/收起区域样式 */
  .supplier-settlement-table :deep(.el-table__expand-icon),
  .supplier-settlement-sheet-table :deep(.el-table__expand-icon),
  .supplier-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;
  }

  .supplier-settlement-table :deep(.el-table__expand-icon:hover),
  .supplier-settlement-sheet-table :deep(.el-table__expand-icon:hover),
  .supplier-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);
  }

  .supplier-settlement-table :deep(.el-table__expand-icon--expanded),
  .supplier-settlement-sheet-table :deep(.el-table__expand-icon--expanded),
  .supplier-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);
  }

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

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

  .order-row-expand-table {
    width: 100%;
    max-width: 100%;
    border: 1px solid var(--mint-border, #d9e8e2);
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
  }

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

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

  .settlement-row-expand-table-wrap {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow: 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;
  }

  /* 第三层（结算单→订单→商品明细）：在结算单记录 Tab 内按 demo 的“孙列表”风格（琥珀）呈现 */
  .supplier-settlement-sheet-table :deep(.sheet-orders-table .settlement-row-expand-table-wrap) {
    margin-top: 4px;
    padding-left: 14px;
    padding-top: 10px;
    padding-right: 0;
    padding-bottom: 0;
    border-left: 3px solid #f59e0b;
    background: linear-gradient(90deg, rgba(254, 243, 199, 0.35) 0%, transparent 12px);
  }

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

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

  .supplier-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;
  }

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

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

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

  .order-row-expand-summary {
    margin-top: 10px;
    display: flex;
    gap: 20px;
    justify-content: flex-end;
    color: #606266;
    font-size: 13px;
  }

  .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-row-expand-wrap {
    padding: 0;
    background: #f8fafc;
    border-radius: 0;
  }

  :deep(.el-dialog__footer .el-button) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  :deep(.el-dialog__footer .el-button .el-icon) {
    margin-right: 6px;
  }

  .sheet-order-tree-table {
    :deep(.el-table__body-wrapper) {
      overflow-x: auto;
    }
  }

  .sheet-orders-table {
    :deep(.el-table__body-wrapper) {
      overflow-x: auto;
    }
  }

  .order-row-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 4px;
  }

  .order-row-meta {
    font-size: 12px;
    line-height: 1.5;
    color: #606266;

    &.muted {
      color: #909399;
    }
  }

  .line-product-cell {
    display: flex;
    align-items: flex-start;
    gap: 10px;
  }

  .line-thumb {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    flex-shrink: 0;
  }

  .line-thumb--ph {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ebeef5;
    font-size: 11px;
    color: #909399;
  }

  .line-product-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    font-size: 13px;
  }

  .line-note {
    font-size: 12px;
    color: #909399;
  }

  .cell-muted {
    color: #c0c4cc;
  }

</style>

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

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

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

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

  .supplier-settlement-dialog.sheet-detail-dialog .el-dialog__body {
    padding: 0 !important;
  }

  .supplier-settlement-dialog.sheet-edit-dialog .el-dialog__body {
    padding: 0 !important;
  }

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

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

  .supplier-settlement-dialog .el-dialog__footer .el-button .el-icon {
    margin-right: 6px;
  }

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

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

  .supplier-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;
  }

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

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

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

  .supplier-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;
  }

  .supplier-settlement-dialog.sheet-edit-dialog .el-input__wrapper,
  .supplier-settlement-dialog.sheet-edit-dialog .el-textarea__inner {
    box-shadow: 0 0 0 1px var(--mint-border, #d9e8e2) inset !important;
    border-radius: 8px !important;
  }

  .supplier-settlement-dialog.sheet-edit-dialog .el-input__wrapper.is-focus,
  .supplier-settlement-dialog.sheet-edit-dialog .el-textarea__inner:focus {
    box-shadow:
      0 0 0 1px var(--mint-primary, #10b981) inset,
      0 0 0 2px rgba(16, 185, 129, 0.2) !important;
  }

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

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