gold-vue/src/views/moneyManage/financialAccount/performanceAttribution.vue

<script setup>
import { ref, reactive, onMounted, toRefs, nextTick, computed, watch, onBeforeUnmount } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import request from '@/util/http.js'
import dayjs from 'dayjs'
import Decimal from 'decimal.js'
import { useI18n } from 'vue-i18n'
import { refundOnline, performanceSelect, exportPerformance, adjustment } from '@/api/cash/financialAccount.js'
import { getUserInfo } from '@/api/common/common.js'
import { useAdminStore } from '@/store/index.js'
import { permissionMapping, hasMenuPermission } from "@/utils/menuTreePermission.js"
import { storeToRefs } from 'pinia'

const adminStore = useAdminStore()
const { menuTree, flag } = storeToRefs(adminStore)
const adminData = ref({})


const { t } = useI18n()

const paytypeList = [
  t('cash.payMethods.stripe'),
  t('cash.payMethods.paymentAsia'),
  t('cash.payMethods.ipay88'),
  t('cash.payMethods.bankTransfer'),
  t('cash.payMethods.card'),
  t('cash.payMethods.cash'),
  t('cash.payMethods.check'),
  t('cash.payMethods.grabpay'),
  t('cash.payMethods.nets'),
  t('cash.payMethods.transfer'),
  t('cash.payMethods.iotPay'),
  t('cash.payMethods.stripe3'),
  t('cash.payMethods.paypal'),
]

const hasperformanceAdjustment = ref(false)
// 初始化权限状态
const initPermissions = async () => {
  if (!menuTree.value || !menuTree.value.length) return;
  // 业绩调整
  hasperformanceAdjustment.value = hasMenuPermission(menuTree.value, permissionMapping.performance_adjustment);
  console.log('业绩调整权限', hasperformanceAdjustment.value);

};

const payPlatformOptions = ref([...paytypeList])

const statusOptions = [
  { label: t('cash.statusList.received'), value: 4 },
  { label: t('cash.statusList.refunded'), value: 6 }
]

// 地区树
const marketOptions = ref([])

// 查询参数
const queryParams = reactive({
  jwcode: '',
  adminMarket: [], // 下拉多选
  timeRange: [], // [startTime, endTime]
  customerMarket: [], // 客户地区
  pageNum: 1,
  pageSize: 20
})

const total = ref(0)
const tableData = ref([])
const tableRef = ref(null)
const scrollTableTop = () => {
  tableRef.value?.setScrollTop?.(0)
}
const loading = ref(false)

// 转换树形结构（参考 coinConsumeDetail.vue）
const transformTree = (nodes) => {
  const allChildren = nodes.flatMap(node => node.children || []);
  return allChildren.map(child => {
    const grandchildren = child.children && child.children.length
      ? transformTree([child])
      : null;
    return {
      value: child.id,
      label: child.name,
      children: grandchildren
    };
  });
};

// 获取地区数据
const getMarket = async () => {
  try {
    const result = await request({ url: '/market/selectMarket' });
    if (result && result.data) {
      marketOptions.value = transformTree(result.data)
      console.log('地区树:', marketOptions.value)
    }
  } catch (error) {
    console.error('获取地区失败', error)
  }
}

// 递归遍历地区树寻找匹配的 ID
const findIdsByNames = (nodes, names, resultIds) => {
  if (!nodes || nodes.length === 0) return;
  nodes.forEach(node => {
    if (names.includes(node.label)) {
      resultIds.push(node.value);
    }
    if (node.children) {
      findIdsByNames(node.children, names, resultIds);
    }
  });
};

// 查询列表
const fetchData = async () => {
  loading.value = true
  try {
    // 将 adminData 中的名称列表转换为 ID 列表
    const adminMarketNames = adminData.value.marketName?.split(',').map(item => item.trim()).filter(Boolean) || [];
    const adminMarketIds = [];
    findIdsByNames(marketOptions.value, adminMarketNames, adminMarketIds);
    // 构建请求参数
    console.log('adminData.value.markets:', adminData.value.markets)
    const params = {
      pageNum: queryParams.pageNum,
      pageSize: queryParams.pageSize,
      performanceDTO: {
        jwcode: queryParams.jwcode,
        adminMarket: adminMarketIds,
        customerMarket: queryParams.customerMarket,
        startTime: queryParams.timeRange?.[0] ? dayjs(queryParams.timeRange[0]).format('YYYY-MM-DD HH:mm:ss') : '',
        endTime: queryParams.timeRange?.[1] ? dayjs(queryParams.timeRange[1]).format('YYYY-MM-DD HH:mm:ss') : '',
      }
    }

    console.log('查询参数:', params)
    const res = await performanceSelect(params)
    if (res.code == 200) {
      tableData.value = res.data.list || []
      await nextTick()
      scrollTableTop()
      total.value = res.data.total || 0
      loading.value = false
    } else {
      ElMessage.error(res.msg || t('elmessage.getDataFailed'))
      loading.value = false
    }
  } catch (error) {
    console.error(error)
    loading.value = false
    ElMessage.error(t('elmessage.getDataFailed'))
  }
}

const handleAdminInfo = async () => {
  try {
    const res = await getUserInfo()
    adminData.value = res || {}
    console.log('adminData.value:', adminData.value);

  } catch (error) {
    console.error(error)
    ElMessage.error(t('elmessage.getDataFailed'))
  }
}

const handleSearch = () => {
  queryParams.pageNum = 1
  fetchData()
}

const handleReset = () => {
  queryParams.jwcode = ''
  queryParams.adminMarket = []
  queryParams.timeRange = null
  queryParams.customerMarket = []
  handleSearch()
}

const handlePageSizeChange = (val) => {
  queryParams.pageSize = val
  fetchData()
}

const handleCurrentChange = (val) => {
  queryParams.pageNum = val
  fetchData()
}


// 退款操作
const handleRefund = (row) => {
  ElMessageBox.confirm(t('elmessage.refundConfirmContent', { orderNo: row.systemTradeNo }), t('elmessage.refundConfirmTitle'), {
    confirmButtonText: t('common.confirm'),
    cancelButtonText: t('common.cancel'),
    type: 'warning'
  }).then(() => {
    ElMessage.success(t('elmessage.refundSubmitSuccess'))
    // 刷新列表
    fetchData()
  }).catch(() => { })
}

// ==================== 导出相关逻辑 ====================

const exportListVisible = ref(false)
const EXPORT_LIST_POLL_INTERVAL = 3000
let exportListPollingTimer = null
const exportList = ref([])
const exportListLoading = ref(false)
const exportListRequesting = ref(false)

const sortExportList = (list = []) => {
  return [...list].sort((a, b) => {
    return dayjs(b.createTime).valueOf() - dayjs(a.createTime).valueOf()
  })
}

const hasPendingExportTask = (list = []) => {
  const latestTask = sortExportList(list)[0]
  return latestTask ? latestTask.state === 0 || latestTask.state === 1 : false
}

const stopExportListPolling = () => {
  if (exportListPollingTimer) {
    clearInterval(exportListPollingTimer)
    exportListPollingTimer = null
  }
}

const startExportListPolling = () => {
  if (exportListPollingTimer) {
    return
  }
  exportListPollingTimer = setInterval(() => {
    if (!exportListVisible.value) {
      stopExportListPolling()
      return
    }
    getExportList({ showLoading: false, silentError: true })
  }, EXPORT_LIST_POLL_INTERVAL)
}

// 导出Excel
const handleExport = async () => {
  try {
    const adminMarketNames = adminData.value.marketName?.split(',').map(item => item.trim()).filter(Boolean) || [];
    const adminMarketIds = [];
    findIdsByNames(marketOptions.value, adminMarketNames, adminMarketIds);
    const params = {
      pageNum: queryParams.pageNum,
      pageSize: queryParams.pageSize,
      performanceDTO: {
        jwcode: queryParams.jwcode,
        adminMarket: adminMarketIds,
        customerMarket: queryParams.customerMarket,
        startTime: queryParams.timeRange?.[0] ? dayjs(queryParams.timeRange[0]).format('YYYY-MM-DD HH:mm:ss') : '',
        endTime: queryParams.timeRange?.[1] ? dayjs(queryParams.timeRange[1]).format('YYYY-MM-DD HH:mm:ss') : '',
      }
    }

    // TODO: 确认导出接口 URL
    const res = await exportPerformance(params)
    if (res.code == 200) {

      console.log('导出参数', params)
      ElMessage.success(t('elmessage.exportSuccess'))
    }

  } catch (error) {
    console.error(error)
    ElMessage.error(t('elmessage.exportError'))
  }
}

// 打开导出列表弹窗
const openExportList = () => {
  exportListVisible.value = true
}

// 获取导出列表
const getExportList = async ({ showLoading = true, silentError = false } = {}) => {
    if (exportListRequesting.value) {
      return
    }
    if (showLoading) {
      exportListLoading.value = true
    }
    exportListRequesting.value = true
    try {
      const result = await request({ url: '/export/export' })
      if (result.code === 200) {
      const filteredData = result.data.filter(item => item.type == 14);
      exportList.value = sortExportList(filteredData || [])
        if (exportListVisible.value && hasPendingExportTask(exportList.value)) {
          startExportListPolling()
        } else {
          stopExportListPolling()
        }
      } else {
        stopExportListPolling()
        if (!silentError) {
          ElMessage.error(result.msg || t('elmessage.getExportListError'))
        }
      }
    } catch (error) {
      console.error('获取导出列表出错:', error)
      stopExportListPolling()
      if (!silentError) {
        ElMessage.error(t('elmessage.getExportListError'))
      }
    } finally {
      exportListRequesting.value = false
      if (showLoading) {
        exportListLoading.value = false
      }
    }
}

// 下载导出文件
const downloadExportFile = (item) => {
  if (item.state === 2) {
    const link = document.createElement('a')
    link.href = item.url
    link.download = item.fileName
    link.click()
  } else {
    ElMessage.warning(t('elmessage.exportingInProgress'))
  }
}

// 根据状态返回对应的标签类型
const getTagType = (state) => {
  switch (state) {
    case 0: return 'info';
    case 1: return 'primary';
    case 2: return 'success';
    case 3: return 'danger';
    default: return 'info';
  }
}

// 根据状态返回对应的标签文案
const getTagText = (state) => {
  switch (state) {
    case 0: return t('elmessage.pendingExecution');
    case 1: return t('elmessage.executing');
    case 2: return t('elmessage.executed');
    case 3: return t('elmessage.errorExecution');
    default: return t('elmessage.unknownStatus');
  }
}

// ==================== 业绩调整弹窗相关逻辑 ====================
const adjustVisible = ref(false)
const adjustTime = ref('')
const adjustCoefficient = ref('')

const matrixMarkets = computed(() => [
  { key: 'sg', label: t('cash.markets.Singapore') },
  { key: 'my', label: t('cash.markets.Malaysia') },
  { key: 'hk', label: t('cash.markets.HongKong') },
  { key: 'th', label: t('cash.markets.Thailand') },
  { key: 'vn', label: t('clientCount.market.vnGold') },
  { key: 'ca', label: t('cash.markets.Canada') }
])

const adjustData = ref([])

const isEmptyAdjustValue = (value) => {
  return value === '' || value === undefined || value === null || value === '-'
}

const toSafeDecimal = (value) => {
  if (isEmptyAdjustValue(value)) {
    return new Decimal(0)
  }

  const normalized = formatNumber(value)
  if (!normalized || normalized === '-' || normalized === '.' || normalized === '-.') {
    return new Decimal(0)
  }

  try {
    return new Decimal(normalized)
  } catch (error) {
    return new Decimal(0)
  }
}

const formatDecimalValue = (value) => {
  const decimalValue = Decimal.isDecimal(value) ? value : toSafeDecimal(value)
  return decimalValue.toFixed().replace(/\.0+$/, '').replace(/(\.\d*?[1-9])0+$/, '$1')
}

const initAdjustData = () => {
  adjustData.value = matrixMarkets.value.map(rowMarket => {
    const row = { inMarket: rowMarket.label + t('common.customer') }
    matrixMarkets.value.forEach(colMarket => {
      row[colMarket.key] = '' // 默认空
    })
    return row
  })
}

const handleAdjustment = () => {
  adjustTime.value = dayjs().format('YYYY-MM-DD HH:mm:ss')
  adjustCoefficient.value = ''
  initAdjustData()
  adjustVisible.value = true
}

const computedAdjustData = computed(() => {
  const data = [...adjustData.value]
  const sumRow = { inMarket: t('cash.cashFlow.total'), isSum: true }

  matrixMarkets.value.forEach(colMarket => {
    let colSum = new Decimal(0)
    adjustData.value.forEach(row => {
      colSum = colSum.plus(toSafeDecimal(row[colMarket.key]))
    })
    sumRow[colMarket.key] = formatDecimalValue(colSum)
  })

  data.push(sumRow)
  return data
})

const getRowTotal = (row) => {
  let sum = new Decimal(0)
  matrixMarkets.value.forEach(colMarket => {
    sum = sum.plus(toSafeDecimal(row[colMarket.key]))
  })
  return formatDecimalValue(sum)
}

const formatNumber = (val) => {
  if (val === '' || val === '-' || val === undefined || val === null) return val;
  val = String(val);
  let formatted = val.replace(/[^\d.-]/g, ''); // 移除非数字、点和负号
  formatted = formatted.replace(/(?!^)-/g, ''); // 负号只能在开头
  formatted = formatted.replace(/(\..*?)\..*/g, '$1'); // 只能有一个点
  return formatted;
}

const submitAdjustment = async () => {
  if (!adjustTime.value) {
    ElMessage.warning(t('cash.cashFlow.time'))
    return
  }
  if (!adjustCoefficient.value) {
    ElMessage.warning(t('cash.cashFlow.coefficientPlaceholder'))
    return
  }

  // 组装矩阵数据 matrix (二维数组，6行6列)
  // 如果单元格为空或者非数字，默认为 0
  const matrix = adjustData.value.map(row => {
    return matrixMarkets.value.map(colMarket => {
      return toSafeDecimal(row[colMarket.key]).toNumber()
    })
  })

  // 构造最终提交的数据结构
  const payload = {
    matrix: matrix,
    weight: toSafeDecimal(adjustCoefficient.value).toNumber(), // 系数
    time: adjustTime.value,
    submitterId: adminData.value.id || 1000063, // 从全局 adminData 获取
    submitterMarket: adminData.value.marketName || '总部' // 如果为空默认传总部
  }

  console.log('提交的封装数据:', JSON.stringify(payload, null, 2))

  await adjustment(payload)
  ElMessage.success(t('elmessage.submitSuccess'))
  adjustVisible.value = false
  fetchData()
}

onMounted(async () => {
  await initPermissions()
  await handleAdminInfo()
  await getMarket()
  await fetchData()
})
watch(exportListVisible, (visible) => {
  if (visible) {
    getExportList()
  } else {
    stopExportListPolling()
  }
})

onBeforeUnmount(() => {
  stopExportListPolling()
})

</script>

<template>
  <div class="cash-flow-container">
    <!-- 搜索区域 -->
    <el-card class="search-card">
      <div class="search-bar">
        <!-- 第一行 -->
        <div class="search-row">
          <div class="search-item">
            <span class="label">{{ t('common.jwcode') }}：</span>
            <el-input v-model="queryParams.jwcode" :placeholder="t('common.jwcodePlaceholder')" clearable />
          </div>
          <div class="search-item">
            <span class="label">{{ t('common_list.market') }}：</span>
            <!-- 下拉多选，使用 el-cascader 匹配地区树结构 -->
            <el-cascader v-model="queryParams.customerMarket" :options="marketOptions"
              :props="{ multiple: true, emitPath: false }" collapse-tags collapse-tags-tooltip
              :placeholder="t('common_list.marketPlaceholder')" clearable style="width: 8vw;" />
          </div>

          <div class="search-item" style="width: auto;">
            <span class="label">{{ t('common.payTime2') }}：</span>
            <el-date-picker v-model="queryParams.timeRange" type="datetimerange" :range-separator="t('common.to')"
              :start-placeholder="t('common.startTime')" :end-placeholder="t('common.endTime')"
              :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]" style="width: 18vw;" />
          </div>
        </div>

        <div class="search-row">
          <el-button type="primary" @click="handleSearch">{{ t('common.search') }}</el-button>
          <el-button type="primary" @click="handleExport">{{ t('common.exportExcel') }}</el-button>
          <el-button type="primary" @click="openExportList">{{ t('common.viewExportList') }}</el-button>
          <el-button type="success" @click="handleReset">{{ t('common.reset') }}</el-button>
          <button v-if="hasperformanceAdjustment" class="adjust-btn" @click="handleAdjustment">{{
            t('cash.cashFlow.performanceAdjustment') }}</button>
        </div>
      </div>
    </el-card>

    <!-- 表格区域 -->
    <el-card class="table-card">
      <el-table ref="tableRef" :data="tableData" v-loading="loading" style="width: 100%; flex: 1;"
        :cell-style="{ textAlign: 'center' }"
        :header-cell-style="{ background: '#F3FAFE', color: '#333', textAlign: 'center' }">
        <el-table-column type="index" :label="t('common_list.id')" min-width="60" align="center" fixed="left">
          <template #default="scope">
            <span>{{ scope.$index + 1 + (queryParams.pageNum - 1) * queryParams.pageSize }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="payTime" :label="t('cash.cashFlow.payTime')" min-width="180" />
        <el-table-column prop="orderCode" :label="t('cash.cashFlow.orderCode')" min-width="350" show-overflow-tooltip />
        <el-table-column prop="receivedMarketName" :label="t('cash.cashFlow.receivedMarketName')" min-width="120"
          show-overflow-tooltip />
        <el-table-column prop="performanceMarketName" :label="t('cash.cashFlow.performanceMarket')" min-width="120"
          show-overflow-tooltip />
        <el-table-column prop="name" :label="t('common_list.name')" min-width="150" show-overflow-tooltip />
        <el-table-column prop="jwcode" :label="t('common_list.jwcode')" min-width="120" />
        <el-table-column prop="goodsName" :label="t('cash.cashFlow.goodsName')" min-width="120" show-overflow-tooltip />
        <el-table-column prop="remark" :label="t('common_list.remark')" min-width="120" show-overflow-tooltip />
        <el-table-column prop="goodNum" :label="t('cash.cashFlow.goodNum')" min-width="120" show-overflow-tooltip />
        <el-table-column prop="payType" :label="t('cash.cashFlow.payType')" min-width="120" show-overflow-tooltip />
        <el-table-column prop="receivedCurrency" :label="t('common_list.receiveCurrency')" min-width="180"
          show-overflow-tooltip />
        <el-table-column prop="paymentAmount" :label="t('common_list.payAmount')" min-width="150" />
        <el-table-column prop="handlingCharge" :label="t('common_list.fee')" min-width="100" />
        <el-table-column prop="receivedAmount" :label="t('common_list.receiveAmount')" min-width="150" />
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination background layout="total, sizes, prev, pager, next, jumper" :total="total"
          :current-page="queryParams.pageNum" :page-size="queryParams.pageSize" :page-sizes="[10, 20, 50, 100]"
          @size-change="handlePageSizeChange" @current-change="handleCurrentChange" />
      </div>
    </el-card>

    <!-- 导出列表弹窗 -->
    <el-dialog v-model="exportListVisible" :title="t('common_export.exportList')" width="80%">
      <el-table :data="exportList" style="width: 100% ;height: 60vh;" :loading="exportListLoading">
        <el-table-column prop="fileName" :label="t('common_export.fileName')" />
        <el-table-column prop="state" :label="t('common_export.status')">
          <template #default="scope">
            <el-tag :type="getTagType(scope.row.state)" :effect="scope.row.state === 3 ? 'light' : 'plain'">
              {{ getTagText(scope.row.state) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" :label="t('common_export.createTime')">
          <template #default="scope">
            {{ dayjs(scope.row.createTime).format('YYYY-MM-DD HH:mm:ss') }}
          </template>
        </el-table-column>
        <el-table-column :label="t('common_export.operation')">
          <template #default="scope">
            <el-button type="primary" size="small" @click="downloadExportFile(scope.row)"
              :disabled="scope.row.state !== 2">
              {{ t('common_export.download') }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <template #footer>
        <div class="dialog-footer">
          <el-button text @click="exportListVisible = false">{{ t('common_export.close') }}</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 业绩调整弹窗 -->
    <el-dialog v-model="adjustVisible" :title="t('cash.cashFlow.marketConsumption')" width="95vw" top="5vh" align-center
      class="custom-adjust-dialog">
      <template #header="{ titleId, titleClass }">
        <div style="text-align: center; font-weight: bold; font-size: 18px;" :id="titleId" :class="titleClass">{{
          t('cash.cashFlow.marketConsumption') }}</div>
      </template>
      <div style="display: flex; gap: 40px; margin-bottom: 20px; align-items: center;">
        <div style="display: flex; align-items: center;">
          <span style="margin-right: 10px; font-weight: bold;">{{ t('cash.cashFlow.time') }}</span>
          <el-date-picker style="width: 220px" v-model="adjustTime" type="datetime" :placeholder="t('cash.cashFlow.time')"
            value-format="YYYY-MM-DD HH:mm:ss" />
        </div>
        <div style="display: flex; align-items: center;">
          <span style="margin-right: 10px; font-weight: bold;">{{ t('cash.cashFlow.coefficient') }}</span>
          <el-input v-model="adjustCoefficient" :placeholder="t('cash.cashFlow.coefficientPlaceholder')"
            style="width: 260px;" @input="adjustCoefficient = formatNumber(adjustCoefficient)" />
        </div>
      </div>

      <el-table class="adjust-table" :data="computedAdjustData" border style="width: 100%" :cell-style="{ textAlign: 'center' }"
        :header-cell-style="{ background: '#F3FAFE', color: '#333', textAlign: 'center', padding: '0' }">
        <el-table-column width="180" align="center" fixed="left">
          <template #header>
            <div class="diagonal-header">
              <span class="top-right">{{ t('cash.cashFlow.adjustment') }}</span>
              <span class="bottom-left">{{ t('cash.cashFlow.adjustmentOut') }}</span>
            </div>
          </template>
          <template #default="{ row }">
            <span style="font-weight: bold;">{{ row.inMarket }}</span>
          </template>
        </el-table-column>

        <el-table-column v-for="col in matrixMarkets" :key="col.key"
          :label="col.label + ' ' + t('cash.cashFlow.marketTeam')" min-width="120" align="center">
          <template #default="{ row }">
            <span v-if="row.isSum">{{ row[col.key] }}</span>
            <el-input v-else v-model="row[col.key]" @input="row[col.key] = formatNumber($event)" placeholder=""
              class="seamless-input" />
          </template>
        </el-table-column>

        <el-table-column :label="t('cash.cashFlow.total')" min-width="120" align="center" fixed="right">
          <template #default="{ row }">
            {{ getRowTotal(row) }}
          </template>
        </el-table-column>
      </el-table>

      <template #footer>
        <div class="dialog-footer" style="text-align: center;">
          <el-button type="primary" plain @click="adjustVisible = false" style="width: 100px;">{{ t('common.cancel')
            }}</el-button>
          <el-button type="primary" @click="submitAdjustment" style="width: 100px;">{{ t('common.submit') }}</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">

:deep(.adjust-table .el-table__header-wrapper th .cell) {
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: break-word;
  line-height: 1.3;
  padding: 8px 6px;
}

.cash-flow-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.search-card {
  margin-bottom: 10px;
  background: #F3FAFE; // 浅蓝背景
  border: none;

  :deep(.el-card__body) {
    padding: 15px;
  }
}

.search-bar {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.search-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
}

.search-item {
  display: flex;
  align-items: center;

  .label {
    font-size: 15px; // 参考 coinConsumeDetail 的 .text size="large"
    color: #000; // 或 #606266
    white-space: nowrap;
    margin-right: 8px;
    min-width: 60px;
    text-align: right;
  }

  .el-input,
  .el-select {
    width: 8vw;
  }
}

.search-btn-group {
  margin-left: 2vw;
  display: flex;
  gap: 10px;
}

.adjust-btn {
  color: #fff;
  padding: 8px 15px;
  border-radius: 4px;
  cursor: pointer;
  border: none;
  background-color: #7349ad;
  margin-left: auto;
}

.table-card {
  background: #E7F4FD;
  flex: 1;
  border: none;
  display: flex;
  flex-direction: column;

  :deep(.el-card__body) {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
}

.pagination-container {
  margin-top: 15px;
  display: flex;
  justify-content: flex-start;
}

// 表格样式覆盖 (参考 coinConsumeDetail)
:deep(.el-table__header-wrapper),
:deep(.el-table__body-wrapper),
:deep(.el-table__cell),
:deep(.el-table__body td) {
  background-color: #F3FAFE !important; // 如果想完全一致可以加这个，但有时候会影响阅读，暂保留头部颜色
}

:deep(.el-table__row:hover > .el-table__cell) {
  background-color: #E5EBFE !important;
}

.diagonal-header {
  position: relative;
  width: 100%;
  height: 50px;
  /* Set a fixed height to make diagonal line work well */
  background: linear-gradient(to top right, transparent 49.5%, #dcdfe6 49.5%, #dcdfe6 50.5%, transparent 50.5%);
}

.diagonal-header .top-right {
  position: absolute;
  top: 5px;
  right: 15px;
  font-weight: bold;
}

.diagonal-header .bottom-left {
  position: absolute;
  bottom: 5px;
  left: 15px;
  font-weight: bold;
}

/* 业绩调整弹窗全局样式 */
:deep(.custom-adjust-dialog) {
  background-color: #f3fafe !important;
  /* 统一淡蓝色背景 */
  border-radius: 8px;
}

:deep(.custom-adjust-dialog .el-dialog__header) {
  padding-bottom: 20px;
  border-bottom: 1px solid #EBEEF5;
  margin-right: 0;
}

:deep(.custom-adjust-dialog .el-dialog__body) {
  padding-top: 20px;
}

/* 无缝输入框样式（去除边框和背景） */
.seamless-input :deep(.el-input__wrapper) {
  box-shadow: none !important;
  background-color: transparent !important;
  padding: 0;
}

.seamless-input :deep(.el-input__inner) {
  text-align: center;
  font-size: 14px;
  height: 100%;
}

.seamless-input :deep(.el-input__inner:focus) {
  outline: none;
}
</style>