antissoft / lvqianmeiye_ERP

<template>
  <div class="refund-wrapper">
    <div class="refund-layout">
      <!-- 左侧：门店分布 + 列表 -->
      <div class="refund-left">
        <div class="chart-card">
          <div class="chart-title">
            <i class="el-icon-s-data"></i>
            门店退卡分布
            <el-tooltip content="实际退卡额，且不含转卡:产生了实际现金支出的退款" placement="top">
              <i class="el-icon-info" style="margin-left: 2px; color: #909399; cursor: help;"></i>
            </el-tooltip>
          </div>
          <div ref="storeDistributionChart" class="chart-mini"></div>
        </div>

        <div class="table-card">
          <div class="table-header">
            <div class="table-title">
              <i class="el-icon-document"></i>
              退卡明细清单
              <el-button v-if="selectedStoreName" type="text" size="small" icon="el-icon-refresh" @click="showAllStores"
                style="margin-left: 12px; color: #409EFF;">
                显示全部
              </el-button>
              <span v-if="selectedStoreName" class="filter-tag">
                已筛选：{{ selectedStoreName }}
              </span>
            </div>
          </div>

          <el-table v-loading="loading" :data="displayList" size="small" height="300" border stripe>
            <el-table-column v-for="col in columns" :key="col.prop" :prop="col.prop" :label="col.label"
              :width="col.width" :min-width="col.minWidth">
              <template slot-scope="scope">
                <span v-if="col.type === 'money'">￥{{ formatMoney(scope.row[col.prop]) }}</span>
                <span v-else>{{ scope.row[col.prop] || '—' }}</span>
              </template>
            </el-table-column>
          </el-table>

          <div class="pagination-bar">
            <el-pagination layout="total, sizes, prev, pager, next" :page-sizes="[10, 20, 50]" :total="pagination.total"
              :current-page="pagination.pageIndex" :page-size="pagination.pageSize" @size-change="handleSizeChange"
              @current-change="handleCurrentChange" />
          </div>
        </div>
      </div>

      <!-- 右侧：统计卡片 -->
      <div class="refund-right" >
        <div class="stat-card neon-blue">
          <div class="stat-icon-circle">
            <i class="el-icon-money"></i>
          </div>
          <div class="stat-content">
            <div class="stat-title">退卡总计
              <el-tooltip content="应退款额，剩余品项金额" placement="top">
                <i class="el-icon-info" style="margin-left: 2px; color: #909399; cursor: help;"></i>
              </el-tooltip>
            </div>
            <div class="stat-value">￥{{ formatMoney(statistics.totalRefundAmount) }}</div>
          </div>
        </div>

        <div class="stat-card neon-green">
          <div class="stat-icon-circle">
            <i class="el-icon-wallet"></i>
          </div>
          <div class="stat-content">
            <div class="stat-title">实际退卡总计</div>
            <div class="stat-value">￥{{ formatMoney(statistics.totalActualRefundAmount) }}</div>
          </div>
        </div>

        <div class="stat-card neon-orange">
          <div class="stat-icon-circle">
            <i class="el-icon-refresh"></i>
          </div>
          <div class="stat-content">
            <div class="stat-title">转卡总计
              <el-tooltip content="因转卡识别为退款的金额" placement="top">
                <i class="el-icon-info" style="margin-left: 2px; color: #909399; cursor: help;"></i>
              </el-tooltip>
            </div>
            <div class="stat-value">￥{{ formatMoney(statistics.totalTransferAmount) }}</div>
          </div>
        </div>

        <div class="stat-card neon-purple">
          <div class="stat-icon-circle">
            <i class="el-icon-trophy"></i>
          </div>
          <div class="stat-content">
            <div class="stat-title">退卡金额最大的人</div>
            <div class="stat-body">
              <div class="highlight text-ellipsis-2">
                {{ (statistics.maxAmountPerson && (statistics.maxAmountPerson.MemberName ||
                  statistics.maxAmountPerson.memberName)) || '无' }}
                <span class="value-inline">￥{{ formatMoney((statistics.maxAmountPerson &&
                  (statistics.maxAmountPerson.TotalRefundAmount || statistics.maxAmountPerson.totalRefundAmount)) || 0)
                }}</span>
              </div>
            </div>
          </div>
        </div>

        <div class="stat-card neon-cyan" style="display: none;">
          <div class="stat-icon-circle">
            <i class="el-icon-user"></i>
          </div>
          <div class="stat-content">
            <div class="stat-title">退卡次数最多的人</div>
            <div class="stat-body">
              <div class="highlight text-ellipsis-2">
                {{ (statistics.maxCountPerson && (statistics.maxCountPerson.MemberName ||
                  statistics.maxCountPerson.memberName)) || '无' }}
                <span class="value-inline">{{ (statistics.maxCountPerson && (statistics.maxCountPerson.RefundCount ||
                  statistics.maxCountPerson.refundCount)) || 0 }} 次</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 退卡金额与实际退款差距清单 -->
        <div class="stat-card gap-refund-card" v-if="gapRefundList && gapRefundList.length > 0">
          <div class="gap-refund-header">
            <div class="stat-icon-circle" style="background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);">
              <i class="el-icon-warning"></i>
            </div>
            <div class="stat-content">
              <div class="stat-title">退卡金额与实际退款差距（≥1元）</div>
            </div>
          </div>
          <div class="gap-refund-list-wrapper">
            <div class="gap-refund-list">
              <div v-for="(item, index) in gapRefundList" :key="index" class="gap-refund-item">
                <div class="gap-refund-member">{{ item.MemberName || item.memberName || '—' }}<span
                    class="gap-amount">差距：￥{{
                      formatMoney(item.GapAmount || item.gapAmount || 0) }}</span></div>
                <div class="gap-refund-details">
                  <div class="gap-detail-row">
                    <span class="gap-label">退卡金额：</span>
                    <span class="gap-value">￥{{ formatMoney(item.RefundAmount || item.refundAmount || 0) }}</span>
                  </div>
                  <div class="gap-detail-row">
                    <span class="gap-label">实际退款：</span>
                    <span class="gap-value">￥{{ formatMoney(item.ActualRefundAmount || item.actualRefundAmount ||
                      0) }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import request from '@/utils/request'
import dayjs from 'dayjs'
import * as echarts from 'echarts'
import { kpiDrillMixin } from './mixins'

export default {
  name: 'RefundAnalysis',
  mixins: [kpiDrillMixin],
  props: {
    filters: {
      type: Object,
      default: () => ({ startTime: null, endTime: null, storeIds: [], month: null })
    },
    storeOptions: { type: Array, default: () => [] }
  },
  data() {
    return {
      loading: false,
      list: [],
      displayList: [],
      pagination: { pageIndex: 1, pageSize: 10, total: 0 },
      statistics: {
        totalRefundAmount: 0,
        totalActualRefundAmount: 0,
        totalTransferAmount: 0,
        maxAmountPerson: null,
        maxCountPerson: null
      },
      gapRefundList: [],
      selectedStoreName: '', // 当前选中的门店名称
      selectedStoreId: '', // 当前选中的门店ID
      storeDistribution: [],
      columns: [
        { prop: 'tksj', label: '退卡时间', minWidth: 160 },
        { prop: 'mdmc', label: '门店', minWidth: 120 },
        { prop: 'hymc', label: '会员', minWidth: 120 },
        { prop: 'gklx', label: '顾客类型', minWidth: 100 },
        { prop: 'tkje', label: '退款金额', width: 110, type: 'money' },
        { prop: 'actualRefundAmount', label: '实际退款', width: 110, type: 'money' },
        { prop: 'tkyy', label: '退款原因', minWidth: 140 }
      ],
      chart: null
    }
  },
  watch: {
    filters: {
      deep: true,
      handler() {
        this.resetAndFetch()
      }
    }
  },
  mounted() {
    this.fetchData()
    this.fetchStatistics()
  },
  beforeDestroy() {
    if (this.chart) this.chart.dispose()
  },
  methods: {
    resetAndFetch() {
      this.pagination = { ...this.pagination, pageIndex: 1 }
      this.fetchData()
      this.fetchStatistics()
    },
    handleSizeChange(size) {
      this.pagination.pageSize = size
      this.pagination.pageIndex = 1
      this.fetchData()
    },
    handleCurrentChange(page) {
      this.pagination.pageIndex = page
      this.fetchData()
    },
    async fetchStatistics() {
      try {
        const range = this.buildDateRange()
        if (!range) {
          console.warn('No date range available for refund statistics')
          return
        }

        const url = '/api/Extend/LqReport/get-refund-drill-statistics'
        const data = {
          startTime: dayjs(range.start).format('YYYY-MM-DD HH:mm:ss'),
          endTime: dayjs(range.end).format('YYYY-MM-DD HH:mm:ss'),
          storeIds: this.filters.storeIds || []
        }

        const res = await request({ url, method: 'POST', data })
        console.log('Refund statistics response:', res) // 调试日志

        if (res && res.data) {
          // 兼容不同的响应格式
          let stats = null
          if (res.data.Success && res.data.Data) {
            stats = res.data.Data
          } else if (res.data.data) {
            stats = res.data.data
          } else if (res.data.Data) {
            stats = res.data.Data
          } else {
            stats = res.data
          }

          console.log('Parsed stats:', stats) // 调试日志

          if (stats) {
            // 解析统计数据
            this.statistics = {
              totalRefundAmount: Number(stats.TotalRefundAmount || stats.totalRefundAmount || 0),
              totalActualRefundAmount: Number(stats.TotalActualRefundAmount || stats.totalActualRefundAmount || 0),
              totalTransferAmount: Number(stats.TotalTransferAmount || stats.totalTransferAmount || 0),
              maxAmountPerson: stats.MaxAmountPerson || stats.maxAmountPerson || null,
              maxCountPerson: stats.MaxCountPerson || stats.maxCountPerson || null
            }

            // 解析差距清单
            const rawGapList = stats.GapRefundList || stats.gapRefundList || []
            this.gapRefundList = rawGapList.map(item => ({
              RefundId: item.RefundId || item.refundId || '',
              MemberId: item.MemberId || item.memberId || '',
              MemberName: item.MemberName || item.memberName || '—',
              RefundAmount: Number(item.RefundAmount || item.refundAmount || 0),
              ActualRefundAmount: Number(item.ActualRefundAmount || item.actualRefundAmount || 0),
              GapAmount: Number(item.GapAmount || item.gapAmount || 0),
              RefundTime: item.RefundTime || item.refundTime || null,
              RefundReason: item.RefundReason || item.refundReason || '—'
            }))

            // 处理门店分布数据，确保门店名称正确
            const rawStoreDist = stats.StoreDistribution || stats.storeDistribution || []
            console.log('Raw store distribution:', rawStoreDist) // 调试日志

            this.storeDistribution = rawStoreDist.map(item => {
              const storeId = item.StoreId || item.storeId || item.StoreId
              const storeName = this.getStoreName(storeId) || item.StoreName || item.storeName || '未知门店'
              const refundAmount = Number(item.RefundAmount || item.refundAmount || 0)
              return {
                StoreId: storeId,
                StoreName: storeName,
                RefundAmount: refundAmount,
                RefundCount: Number(item.RefundCount || item.refundCount || 0)
              }
            }).filter(item => item.StoreId) // 过滤掉没有门店ID的数据

            console.log('Processed statistics:', this.statistics)
            console.log('Processed store distribution:', this.storeDistribution)

            // 确保在下一个tick渲染图表
            this.$nextTick(() => {
              setTimeout(() => {
                this.renderStoreDistributionChart()
              }, 100)
            })
          } else {
            console.warn('No stats data found in response')
          }
        } else {
          console.warn('No response data')
        }
      } catch (error) {
        console.error('Refund statistics load error:', error)
        this.$message.error('加载统计数据失败: ' + (error.message || '未知错误'))
      }
    },
    async fetchData() {
      this.loading = true
      try {
        const range = this.buildDateRange()
        const storeId = this.getStoreId()
        const url = '/api/Extend/LqHytkHytk'
        const data = {
          currentPage: this.pagination.pageIndex,
          pageSize: this.pagination.pageSize
        }
        if (range) {
          data.tksj = `${range.startTs},${range.endTs}`
        }
        // 优先使用选中的门店ID，否则使用filters中的门店ID
        if (this.selectedStoreId) {
          data.md = this.selectedStoreId
        } else if (storeId) {
          data.md = storeId
        }

        const res = await request({ url, method: 'GET', data })
        await this.handleResponse(res)
      } catch (error) {
        console.error('Refund analysis load error:', error)
        this.$message.error(error.message || '加载数据失败')
        this.list = []
        this.displayList = []
      } finally {
        this.loading = false
      }
    },
    async handleResponse(res) {
      let list = []
      let pagination = this.pagination

      if (res && res.data) {
        if (res.data.list && res.data.pagination) {
          list = res.data.list
          pagination = {
            pageIndex: res.data.pagination.pageIndex || res.data.pagination.pageNumber || 1,
            pageSize: res.data.pagination.pageSize || this.pagination.pageSize,
            total: res.data.pagination.total || res.data.pagination.totalCount || 0
          }
        } else if (Array.isArray(res.data.list)) {
          list = res.data.list
        } else if (Array.isArray(res.data)) {
          list = res.data
        }
      }

      list = list.map(i => {
        // 处理门店名称
        const storeId = i.md || i.Md || i.storeId || i.StoreId
        const storeName = this.getStoreName(storeId) || i.mdmc || i.Mdmc || '—'

        // 处理退卡时间
        let tksj = ''
        if (i.tksj) {
          if (typeof i.tksj === 'string') {
            tksj = dayjs(i.tksj).format('YYYY-MM-DD HH:mm:ss')
          } else if (typeof i.tksj === 'number') {
            tksj = dayjs(i.tksj).format('YYYY-MM-DD HH:mm:ss')
          } else {
            tksj = dayjs(i.tksj).format('YYYY-MM-DD HH:mm:ss')
          }
        } else if (i.Tksj) {
          if (typeof i.Tksj === 'string') {
            tksj = dayjs(i.Tksj).format('YYYY-MM-DD HH:mm:ss')
          } else if (typeof i.Tksj === 'number') {
            tksj = dayjs(i.Tksj).format('YYYY-MM-DD HH:mm:ss')
          } else {
            tksj = dayjs(i.Tksj).format('YYYY-MM-DD HH:mm:ss')
          }
        }

        return {
          tksj: tksj || '—',
          mdmc: storeName,
          hymc: i.hymc || i.Hymc || '—',
          gklx: i.gklx || i.Gklx || '—',
          tkje: Number(i.tkje || i.Tkje || 0),
          actualRefundAmount: Number(i.actualRefundAmount || i.ActualRefundAmount || i.F_ActualRefundAmount || 0),
          tkyy: i.tkyy || i.Tkyy || '—'
        }
      })

      this.list = list
      this.displayList = list
      this.pagination = pagination
    },
    renderStoreDistributionChart() {
      const chartEl = this.$refs.storeDistributionChart
      if (!chartEl) {
        console.warn('storeDistributionChart ref not found, retrying...')
        this.$nextTick(() => {
          setTimeout(() => this.renderStoreDistributionChart(), 200)
        })
        return
      }

      if (this.chart) {
        this.chart.dispose()
        this.chart = null
      }

      const chart = echarts.init(chartEl)
      if (!chart) {
        console.error('Failed to initialize chart')
        return
      }

      if (!this.storeDistribution || this.storeDistribution.length === 0) {
        chart.setOption({
          title: {
            text: '暂无数据',
            left: 'center',
            top: 'middle',
            textStyle: { color: '#909399', fontSize: 14 }
          },
          grid: { left: 0, right: 0, top: 0, bottom: 0 }
        })
        this.chart = chart
        return
      }

      const stores = this.storeDistribution.map(s => s.StoreName || '未知门店')
      const amounts = this.storeDistribution.map(s => Number(s.RefundAmount || 0))

      console.log('Chart data - stores:', stores, 'amounts:', amounts) // 调试日志

      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: { type: 'shadow' },
          formatter: (params) => {
            const param = Array.isArray(params) ? params[0] : params
            return `${param.name}<br/>退卡金额: ￥${this.formatMoney(param.value)}<br/>（不包含转卡）`
          }
        },
        grid: { left: '12%', right: '5%', bottom: stores.length > 10 ? '28%' : '15%', top: '18%' },
        xAxis: {
          type: 'category',
          data: stores,
          axisLabel: {
            fontSize: 11,
            interval: 0,
            rotate: stores.length > 10 ? 45 : 0
          }
        },
        yAxis: {
          type: 'value',
          name: '金额',
          axisLabel: {
            formatter: (value) => {
              if (value >= 10000) return (value / 10000).toFixed(1) + '万'
              return value.toFixed(0)
            }
          }
        },
        series: [{
          name: '退卡金额',
          type: 'bar',
          data: amounts,
          itemStyle: {
            color: (params) => {
              // 如果当前门店被选中，高亮显示
              const storeName = stores[params.dataIndex]
              return storeName === this.selectedStoreName ? '#409EFF' : '#F56C6C'
            },
            borderRadius: [4, 4, 0, 0]
          },
          label: {
            show: true,
            position: 'top',
            formatter: (params) => {
              const value = params.value
              if (value >= 10000) return (value / 10000).toFixed(1) + '万'
              return value.toFixed(0)
            },
            fontSize: 10
          },
          barWidth: stores.length > 20 ? '40%' : '60%',
          // 添加点击事件
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(64, 158, 255, 0.5)'
            }
          }
        }]
      }

      chart.setOption(option)
      this.chart = chart

      // 添加点击事件监听
      chart.off('click') // 先移除之前的监听，避免重复绑定
      chart.on('click', (params) => {
        if (params.componentType === 'series' && params.seriesType === 'bar') {
          const clickedStoreName = stores[params.dataIndex]
          this.filterByStore(clickedStoreName)
        }
      })

      // 监听窗口大小变化
      const resizeHandler = () => {
        if (this.chart) {
          this.chart.resize()
        }
      }
      window.removeEventListener('resize', resizeHandler) // 先移除，避免重复绑定
      window.addEventListener('resize', resizeHandler)
    },
    getStoreName(storeId) {
      if (!storeId || !this.storeOptions || this.storeOptions.length === 0) return null
      const store = this.storeOptions.find(s => s.id === storeId || s.F_Id === storeId)
      return store ? (store.fullName || store.dm || store.F_FullName || store.FullName) : null
    },
    filterByStore(storeName) {
      // 如果点击的是已选中的门店，则取消筛选
      if (this.selectedStoreName === storeName) {
        this.showAllStores()
        return
      }

      // 从storeDistribution中找到对应的门店ID
      const storeInfo = this.storeDistribution.find(s => s.StoreName === storeName)
      if (!storeInfo || !storeInfo.StoreId) {
        this.$message.warning('未找到门店信息')
        return
      }

      this.selectedStoreName = storeName
      this.selectedStoreId = storeInfo.StoreId

      // 重置分页到第一页
      this.pagination.pageIndex = 1

      // 重新获取数据（通过接口筛选）
      this.fetchData()

      // 重新渲染图表，高亮选中的门店
      this.$nextTick(() => {
        this.renderStoreDistributionChart()
      })
    },
    showAllStores() {
      this.selectedStoreName = ''
      this.selectedStoreId = ''

      // 重置分页到第一页
      this.pagination.pageIndex = 1

      // 重新获取数据（获取全部数据）
      this.fetchData()

      // 重新渲染图表，恢复所有门店的颜色
      this.$nextTick(() => {
        this.renderStoreDistributionChart()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import './common-styles.scss';

.refund-wrapper {
  width: 100%;
  overflow: hidden;
  padding: 0;

  .refund-layout {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
  }

  .refund-left {
    flex: 0 0 75%;
    max-width: 75%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
  }

  .refund-right {
    flex: 0 0 25%;
    max-width: 23.5%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
  }

  // 复用公共样式中的 chart-card 和 table-card
  .chart-card {
    background: #fff;
    border: 1px solid #ebeef5;
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    flex-shrink: 0;

    .chart-title {
      font-size: 13px;
      color: #606266;
      margin-bottom: 6px;
      display: flex;
      align-items: center;
      gap: 6px;

      i {
        color: #409EFF;
      }
    }

    .chart-mini {
      height: 220px;
      width: 100%;
      min-height: 220px;
    }
  }

  .table-card {
    background: #fff;
    border: 1px solid #ebeef5;
    border-radius: 10px;
    padding: 10px 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    flex: 1;
    // min-height: 700px;
    display: flex;
    flex-direction: column;

    .table-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 8px;
      flex-shrink: 0;
    }

    .table-title {
      font-size: 14px;
      font-weight: 600;
      color: #303133;
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;

      i {
        color: #409EFF;
      }

      .filter-tag {
        margin-left: 8px;
        padding: 2px 8px;
        background: #E6F7FF;
        border: 1px solid #91D5FF;
        border-radius: 4px;
        font-size: 12px;
        color: #1890FF;
      }
    }

    .el-table {
      flex: 1;
      min-height: 0;
    }

    .pagination-bar {
      flex-shrink: 0;
      margin-top: 8px;
    }
  }

  // 统一统计卡片样式
  .stat-card {
    background: #fff;
    border: 1px solid #ebeef5;
    border-radius: 10px;
    padding: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 80px;
    position: relative;
    overflow: hidden;

    .stat-icon-circle {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      flex-shrink: 0;

      i {
        font-size: 18px;
      }
    }

    &.neon-blue {
      border-left: 4px solid #409EFF;
      border-left-color: #409EFF;

      .stat-icon-circle {
        background: #409EFF;
      }
    }

    &.neon-green {
      border-left: 4px solid #67C23A;
      border-left-color: #67C23A;

      .stat-icon-circle {
        background: #67C23A;
      }
    }

    &.neon-orange {
      border-left: 4px solid #E6A23C;
      border-left-color: #E6A23C;

      .stat-icon-circle {
        background: #E6A23C;
      }
    }

    &.neon-purple {
      border-left: 4px solid #9C27B0;
      border-left-color: #9C27B0;

      .stat-icon-circle {
        background: #9C27B0;
      }
    }

    &.neon-cyan {
      border-left: 4px solid #17A2B8;
      border-left-color: #17A2B8;

      .stat-icon-circle {
        background: #17A2B8;
      }
    }

    .stat-content {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .stat-title {
      font-size: 13px;
      color: #606266;
      margin-bottom: 6px;
      line-height: 1.3;
    }

    .stat-value {
      font-size: 20px;
      font-weight: 700;
      color: #303133;
      line-height: 1.2;
    }

    .stat-body {
      color: #303133;
      margin-top: 4px;

      .highlight {
        font-size: 14px;
        font-weight: 600;
        line-height: 1.4;
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;

        .value-inline {
          font-size: 16px;
          font-weight: 700;
          color: #409EFF;
          white-space: nowrap;
        }
      }
    }

    // 差距清单卡片样式
    &.gap-refund-card {
      min-height: auto;
      max-height: 400px;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      padding: 12px;

      .gap-refund-header {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 12px;
        flex-shrink: 0;
        margin-bottom: 12px;

        .stat-content {
          flex: 1;
          min-width: 0;
        }

        .stat-title {
          margin-bottom: 0;
        }
      }

      .gap-refund-list-wrapper {
        flex: 1;
        overflow-y: auto;
        padding-right: 4px;
        min-height: 0;

        // 自定义滚动条
        &::-webkit-scrollbar {
          width: 6px;
        }

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

        &::-webkit-scrollbar-thumb {
          background: #c1c1c1;
          border-radius: 3px;

          &:hover {
            background: #a8a8a8;
          }
        }
      }

      .gap-refund-list {
        display: flex;
        flex-direction: column;
        gap: 10px;
      }

      .gap-refund-item {
        padding: 10px;
        background: #f8f9fa;
        border-radius: 6px;
        border-left: 3px solid #ff6b6b;
        transition: all 0.2s;

        &:hover {
          background: #f0f0f0;
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .gap-refund-member {
          font-size: 14px;
          font-weight: 600;
          color: #303133;
          margin-bottom: 6px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 8px;

          .gap-amount {
            color: #FFF;
            font-weight: 700;
            font-size: 12px;
            padding: 2px 8px;
            border-radius: 4px;
            background: #ff6b6b;
            white-space: nowrap;
            flex-shrink: 0;
          }
        }

        .gap-refund-details {
          display: flex;
          flex-direction: column;
          gap: 6px;
          font-size: 12px;
          color: #606266;

          .gap-detail-row {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 4px;

            .gap-label {
              color: #909399;
              white-space: nowrap;
            }

            .gap-value {
              color: #303133;
              font-weight: 500;
              white-space: nowrap;
            }
          }



        }
      }
    }
  }
}
</style>