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

<template>
  <div class="page-container">
    <div class="page-head">
      <div>
        <h2>客户结算</h2>
        <p>按区域管理待结算订单与结算单记录</p>
      </div>
    </div>
    <div class="region-tabs">
      <div class="tab-button-group">
        <el-button
          v-for="r in regionList"
          :key="r.id"
          :type="activeRegionId === r.id ? 'primary' : 'default'"
          @click="selectRegion(r.id)"
        >
          {{ r.name }}
        </el-button>
      </div>
    </div>

    <el-tabs v-model="activeTab" @tab-change="onTabChange">
      <el-tab-pane label="待结算订单" name="pending">
        <el-card shadow="never" class="search-card">
          <el-form :inline="true" :model="searchForm">
            <el-form-item label="客户">
              <el-select
                v-model="searchForm.clientId"
                filterable
                clearable
                placeholder="请选择客户"
                style="width: 220px"
              >
                <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="请输入订单号"
                style="width: 220px"
              />
            </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>
            <el-form-item>
              <el-button class="btn-main" @click="handleSearch">搜索</el-button>
              <el-button class="btn-ghost" @click="handleReset">重置</el-button>
            </el-form-item>
          </el-form>
        </el-card>

        <div class="stats-row">
          <el-card shadow="never"
            ><div class="stat-title">可结算金额(元)（已完结·按售价）</div>
            <div class="stat-value">¥{{ formatAmount(summary.pendingAmount) }}</div></el-card
          >
          <el-card shadow="never"
            ><div class="stat-title">当前页·可结算售价(元)</div>
            <div class="stat-value">¥{{ formatAmount(summary.currentPageAmount) }}</div></el-card
          >
          <el-card shadow="never"
            ><div class="stat-title">已选订单数</div>
            <div class="stat-value">{{ selectedCount }}</div></el-card
          >
          <el-card shadow="never"
            ><div class="stat-title">已选结算金额(元)</div>
            <div class="stat-value amount">¥{{ formatAmount(selectedAmount) }}</div></el-card
          >
        </div>

        <el-card shadow="never" class="list-table-card">
          <div class="toolbar">
            <el-button class="btn-ghost" @click="handleSelectAllFiltered">全选可结算订单（已完结·跨分页）</el-button>
            <el-button class="btn-main" :disabled="!selectedCount" @click="openSettlementDialog"
              >结算</el-button
            >
            <el-tag v-if="selectionMode === 'allFiltered'" type="warning"
              >已启用跨分页全选，可取消少量订单</el-tag
            >
          </div>
          <el-table
            ref="tableRef"
            :data="tableData"
            row-key="id"
            stripe
            v-loading="loading"
            max-height="calc(100vh - 420px)"
            @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 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) }}</template>
                    </el-table-column>
                    <el-table-column label="售出金额(元)" min-width="110" align="right">
                      <template #default="{ row: line }">¥{{ formatAmount(line.sellingAmount) }}</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 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="clientName" label="客户名称" min-width="150" show-overflow-tooltip />
            <el-table-column prop="regionName" label="区域" min-width="120" show-overflow-tooltip />
            <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 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="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 label="应收金额(元)" min-width="130" align="right">
              <template #default="{ row }">
                <span class="amount-text">¥{{ formatAmount(orderReceivableAmount(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="clientSettlementStatus" label="客户结算" width="100">
              <template #default="{ row }">
                <el-tag :type="row.clientSettlementStatus === 'settled' ? 'success' : 'warning'" size="small">
                  {{ row.clientSettlementStatus === 'settled' ? '已结算' : '待结算' }}
                </el-tag>
              </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>
      </el-tab-pane>

      <el-tab-pane label="结算单记录" name="sheets">
        <el-card shadow="never" class="search-card">
          <el-form :inline="true" :model="sheetSearchForm">
            <el-form-item label="客户">
              <el-select
                v-model="sheetSearchForm.clientId"
                filterable
                clearable
                placeholder="全部"
                style="width: 200px"
              >
                <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="模糊查询"
                style="width: 200px"
              />
            </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>
            <el-form-item>
              <el-button class="btn-main" @click="handleSheetSearch">搜索</el-button>
              <el-button class="btn-ghost" @click="handleSheetReset">重置</el-button>
            </el-form-item>
          </el-form>
        </el-card>

        <el-card shadow="never" v-loading="sheetLoading">
          <el-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 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) }}</template
                              >
                            </el-table-column>
                            <el-table-column label="售出金额(元)" min-width="110" align="right">
                              <template #default="{ row: line }"
                                >¥{{ formatAmount(line.sellingAmount) }}</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="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="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="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="操作" width="140" fixed="right">
              <template #default="{ row }">
                <el-button class="btn-op-item primary" link @click="openSheetDetail(row.id)">详情</el-button>
                <el-button class="btn-op-item" link @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>
      </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="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="1040px" destroy-on-close>
      <SettlementSheetDetailPanel
        v-if="sheetDetail"
        :detail="sheetDetail"
        counterparty-label="客户"
        :counterparty-name="sheetDetail.clientName"
      />
    </el-dialog>

    <el-dialog
      v-model="sheetEditVisible"
      title="编辑结算单"
      width="720px"
      destroy-on-close
      @closed="resetSheetEdit"
    >
      <el-form label-width="100px">
        <el-form-item label="结算备注">
          <el-input
            v-model="sheetEditForm.remark"
            type="textarea"
            :rows="3"
            maxlength="500"
            show-word-limit
          />
        </el-form-item>
      </el-form>
      <VoucherMediaUploader
        v-model="sheetEditForm.voucherUrls"
        business-type="client_settlement"
        :business-id="sheetEditId || 'temp'"
      />
      <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" />
  </div>
</template>

<script setup lang="ts">
  import { computed, nextTick, onMounted, reactive, ref } from 'vue'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import {
    fetchCreateClientSettlement,
    fetchClientSettlementOrderList,
    fetchClientSettlementSheetList,
    fetchClientSettlementSheetDetail,
    fetchUpdateClientSettlementSheet
  } 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 VoucherMediaUploader from '@/components/settlement/VoucherMediaUploader.vue'
  import SettlementSheetDetailPanel from '@/components/settlement/SettlementSheetDetailPanel.vue'

  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 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 sheetLoading = ref(false)
  const sheetTableData = ref<any[]>([])
  const sheetSearchForm = reactive({
    clientId: '',
    settlementNo: ''
  })
  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 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_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?.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 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 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 loadClientOptions()
    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 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
    } 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 || []
      sheetExpandedTreeMap.value = {}
      sheetRowLoadingMap.value = {}
      sheetPagination.total = res?.total || 0
    } finally {
      sheetLoading.value = false
    }
  }

  const onTabChange = (name: string | number) => {
    if (name === 'sheets') loadSheetList()
  }

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

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

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

  const handleSheetReset = () => {
    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 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()
    await loadData()
  })
</script>

<style lang="scss" scoped>
  .page-container {
    padding: 20px;
  }

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

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

  .stat-title {
    color: #909399;
    font-size: 13px;
  }

  .stat-value {
    margin-top: 6px;
    font-size: 24px;
    font-weight: 600;
  }

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

  .toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
  }

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

  .pagination {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
  }

  .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: 8px 12px;
    background: #fafbfc;
    border-radius: 8px;
  }

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

  .order-row-expand-table {
    width: max-content;
    max-width: 100%;

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

  .settlement-row-expand-table-wrap {
    display: inline-block;
    width: fit-content;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: 8px;
    text-align: left;

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

  .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: 10px 12px;
    background: #fafbfc;
    border-radius: 8px;
  }

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