<template>
  <div class="dealer-container">
    <!-- 搜索筛选区域 -->
    <div class="search-section">
      <div class="search-row">
        <div class="search-item">
          <label>经销商编码:</label>
          <input 
            v-model="searchParams.dealerCode" 
            type="text" 
            class="search-input" 
            placeholder="请输入经销商编码" 
          />
        </div>
        <div class="search-item">
          <label>经销商名称:</label>
          <input 
            v-model="searchParams.dealerName" 
            type="text" 
            class="search-input" 
            placeholder="请输入经销商名称" 
          />
        </div>
        <div class="search-item">
          <label>经销商等级:</label>
          <select v-model="searchParams.dealerLevel" class="search-select">
            <option value="">所有</option>
            <option value="1">一级经销商</option>
            <option value="2">二级经销商</option>
          </select>
        </div>
        <div class="search-item">
          <label>合作状态:</label>
          <select v-model="searchParams.cooperateStatus" class="search-select">
            <option value="">所有</option>
            <option value="1">正常合作</option>
            <option value="2">暂停合作</option>
            <option value="3">终止合作</option>
          </select>
        </div>
        <div class="search-actions">
          <button @click="handleSearch" class="search-btn">🔍 搜索</button>
          <button @click="handleReset" class="reset-btn">🔄 重置</button>
        </div>
      </div>
    </div>

    <!-- 操作按钮区域 -->
    <div class="action-section">
      <div class="action-buttons">
        <button @click="handleAdd" class="action-btn primary">✨ 新增</button>
        <button @click="handleBatchDelete" class="action-btn danger">🗑️ 删除</button>
      </div>
    </div>

    <!-- 数据表格 -->
    <div class="table-section">
      <div class="table-header">
        <div class="table-controls">
          <button @click="handleTableSearch" class="control-btn" title="搜索">🔍</button>
          <button @click="handleTableRefresh" class="control-btn" title="刷新">🔄</button>
          <button @click="handleTableExport" class="control-btn" title="导出">📋</button>
          <button @click="handleTableViewToggle" class="control-btn" title="视图切换">⊞</button>
        </div>
      </div>
      
      <div class="table-container">
        <div v-if="loading" class="loading-overlay">
          <div class="loading-spinner">加载中...</div>
        </div>
        <table class="data-table">
          <thead>
            <tr>
              <th>
                <input 
                  type="checkbox" 
                  class="select-all" 
                  v-model="selectAll"
                  @change="handleSelectAll"
                />
              </th>
              <th>经销商编码</th>
              <th>经销商名称</th>
              <th>统一社会信用代码</th>
              <th>经销商等级</th>
              <th>所在区域</th>
              <th>合作起始日期</th>
              <th>合作状态</th>
              <th>累计应返金额</th>
              <th>累计已返金额</th>
              <th>待返利总金额</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="dealer in dealerList" :key="dealer.dealerId">
              <td>
                <input 
                  type="checkbox" 
                  :value="dealer.dealerId"
                  v-model="selectedDealers"
                />
              </td>
              <td>{{ dealer.dealerCode }}</td>
              <td>{{ dealer.dealerName }}</td>
              <td>{{ dealer.creditCode }}</td>
              <td>{{ getDealerLevelText(dealer.dealerLevel) }}</td>
              <td>{{ dealer.region }}</td>
              <td>{{ dealer.cooperateStartDate }}</td>
              <td>
                <span :class="getCooperateStatusClass(dealer.cooperateStatus)">
                  {{ getCooperateStatusText(dealer.cooperateStatus) }}
                </span>
              </td>
              <td class="amount-cell">{{ formatAmount(dealer.totalRebateAmount) }}</td>
              <td class="amount-cell">{{ formatAmount(dealer.usedRebateAmount) }}</td>
              <td class="amount-cell">{{ formatAmount(dealer.pendingRebateAmount) }}</td>
              <td>
                <button @click="handleEdit(dealer)" class="table-btn edit">✏️ 编辑</button>
                <button @click="handleDelete(dealer)" class="table-btn delete">🗑️ 删除</button>
                <button @click="handleStatusChange(dealer)" class="table-btn status">🔄 状态</button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      
      <!-- 分页信息 -->
      <div class="table-footer">
        <div class="pagination-left">
          <div class="pagination-info">
            共 {{ total || 0 }} 条记录，第 {{ currentPage || 1 }} / {{ totalPages || 1 }} 页
          </div>
          <div class="page-size-selector">
            <label>每页显示:</label>
            <select v-model="pagination.pageSize" @change="handlePageSizeChange" class="page-size-select">
              <option value="10">10条</option>
              <option value="20">20条</option>
              <option value="50">50条</option>
              <option value="100">100条</option>
            </select>
          </div>
        </div>
        <div class="pagination-container">
           <button 
             @click="handlePageChange(currentPage - 1)" 
             :disabled="currentPage <= 1"
             class="pagination-btn prev-btn"
           >
             上一页
           </button>
          <div class="pagination-pages">
            <button 
              v-for="page in getPageNumbers()" 
              :key="page"
              @click="handlePageChange(page)"
              :class="['page-number', { active: page === currentPage }]"
            >
              {{ page }}
            </button>
          </div>
           <button 
             @click="handlePageChange(currentPage + 1)" 
             :disabled="currentPage >= totalPages"
             class="pagination-btn next-btn"
           >
             下一页
           </button>
        </div>
      </div>
    </div>

    <!-- 新增/编辑对话框 -->
    <div v-if="showDialog" class="dialog-overlay" @click="handleDialogClose">
      <div class="dialog-content" @click.stop>
        <div class="dialog-header">
          <h3>{{ isEdit ? '编辑经销商' : '新增经销商' }}</h3>
          <button @click="handleDialogClose" class="dialog-close">×</button>
        </div>
        <div class="dialog-body">
          <form @submit.prevent="handleSubmit" class="form-container">
            <div class="form-row">
              <div class="form-item">
                <label class="required">经销商编码:</label>
                <input 
                  v-model="formData.dealerCode" 
                  class="form-input" 
                  placeholder="请输入经销商编码（6-20位大写字母和数字）"
                  pattern="^[A-Z0-9]{6,20}$"
                  title="经销商编码应为6-20位大写字母和数字"
                  required
                />
              </div>
              <div class="form-item">
                <label class="required">经销商名称:</label>
                <input 
                  v-model="formData.dealerName" 
                  class="form-input" 
                  placeholder="请输入经销商名称"
                  required
                />
              </div>
            </div>
            <div class="form-row">
              <div class="form-item">
                <label class="required">统一社会信用代码:</label>
                <input 
                  v-model="formData.creditCode" 
                  class="form-input" 
                  placeholder="请输入统一社会信用代码"
                  required
                />
              </div>
              <div class="form-item">
                <label class="required">经销商等级:</label>
                <select v-model="formData.dealerLevel" class="form-select" required>
                  <option value="">请选择</option>
                  <option value="1">一级经销商</option>
                  <option value="2">二级经销商</option>
                </select>
              </div>
            </div>
            <div class="form-row">
              <div class="form-item">
                <label class="required">所在区域:</label>
                <input 
                  v-model="formData.region" 
                  class="form-input" 
                  placeholder="请输入所在区域"
                  required
                />
              </div>
              <div class="form-item">
                <label>联系人:</label>
                <input 
                  v-model="formData.contactPerson" 
                  class="form-input" 
                  placeholder="请输入联系人"
                />
              </div>
            </div>
            <div class="form-row">
              <div class="form-item">
                <label>联系电话:</label>
                <input 
                  v-model="formData.contactPhone" 
                  class="form-input" 
                  placeholder="请输入联系电话"
                />
              </div>
              <div class="form-item">
                <label class="required">合作起始日期:</label>
                <input 
                  v-model="formData.cooperateStartDate" 
                  class="form-input" 
                  type="date"
                  required
                />
              </div>
            </div>
            <div class="form-row">
              <div class="form-item">
                <label>合作状态:</label>
                <select v-model="formData.cooperateStatus" class="form-select">
                  <option value="1">正常合作</option>
                  <option value="2">暂停合作</option>
                  <option value="3">终止合作</option>
                </select>
              </div>
              <div class="form-item">
                <label>营业执照URL:</label>
                <input 
                  v-model="formData.businessLicenseUrl" 
                  class="form-input" 
                  placeholder="请输入营业执照URL"
                />
              </div>
            </div>
            <div class="form-row">
              <div class="form-item">
                <label>合作协议URL:</label>
                <input 
                  v-model="formData.cooperationAgreementUrl" 
                  class="form-input" 
                  placeholder="请输入合作协议URL"
                />
              </div>
              <div class="form-item">
                <label>审核意见:</label>
                <input 
                  v-model="formData.auditOpinion" 
                  class="form-input" 
                  placeholder="请输入审核意见"
                />
              </div>
            </div>
            <div class="form-row">
              <div class="form-item full-width">
                <label>备注:</label>
                <textarea 
                  v-model="formData.remark" 
                  class="form-textarea" 
                  placeholder="请输入备注"
                  rows="3"
                ></textarea>
              </div>
            </div>
          </form>
        </div>
        <div class="dialog-footer">
          <button @click="handleDialogClose" class="dialog-btn cancel">取消</button>
          <button @click="handleSubmit" class="dialog-btn confirm">确定</button>
        </div>
      </div>
    </div>

    <!-- 状态修改对话框 -->
    <div v-if="showStatusDialog" class="dialog-overlay" @click="handleStatusDialogClose">
      <div class="dialog-content" @click.stop>
        <div class="dialog-header">
          <h3>修改合作状态</h3>
          <button @click="handleStatusDialogClose" class="dialog-close">×</button>
        </div>
        <div class="dialog-body">
          <div class="form-item">
            <label>经销商名称:</label>
            <input v-model="currentDealer.dealerName" class="form-input" readonly />
          </div>
          <div class="form-item">
            <label>当前状态:</label>
            <input :value="getCooperateStatusText(currentDealer.cooperateStatus)" class="form-input" readonly />
          </div>
          <div class="form-item">
            <label>新状态:</label>
            <select v-model="newCooperateStatus" class="form-select">
              <option value="1">正常合作</option>
              <option value="2">暂停合作</option>
              <option value="3">终止合作</option>
            </select>
          </div>
        </div>
        <div class="dialog-footer">
          <button @click="handleStatusDialogClose" class="dialog-btn cancel">取消</button>
          <button @click="handleStatusSubmit" class="dialog-btn confirm">确定</button>
        </div>
      </div>
    </div>

  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue'
import { dealerApi, type DealerInfo, type DealerQueryReq, type DealerAddReq, type DealerUpdateReq } from '../../api/dealer'

// 响应式数据
const loading = ref(false)
const dealerList = ref<DealerInfo[]>([])
const selectedDealers = ref<number[]>([])
const showDialog = ref(false)
const isEdit = ref(false)
const showStatusDialog = ref(false)
const currentDealer = ref<DealerInfo>({} as DealerInfo)
const newCooperateStatus = ref<number>(1)

// 搜索参数
const searchParams = reactive<DealerQueryReq>({
  dealerCode: '',
  dealerName: '',
  creditCode: '',
  dealerLevel: undefined,
  region: '',
  contactPerson: '',
  contactPhone: '',
  cooperateStatus: undefined,
  pageNum: 1,
  pageSize: 10
})

// 分页信息
const pagination = reactive({
  total: 0,
  pageNum: 1,
  pageSize: 10
})

// 计算属性
const total = computed(() => pagination.total)
const currentPage = computed(() => pagination.pageNum)
const pageSize = computed(() => pagination.pageSize)
const totalPages = computed(() => {
  if (pagination.pageSize <= 0) return 1
  return Math.ceil(pagination.total / pagination.pageSize) || 1
})

// 表单数据
const formData = reactive<DealerAddReq & { dealerId?: number }>({
  dealerCode: '',
  dealerName: '',
  creditCode: '',
  dealerLevel: 1,
  region: '',
  contactPerson: '',
  contactPhone: '',
  cooperateStartDate: '',
  cooperateStatus: 1,
  businessLicenseUrl: '',
  cooperationAgreementUrl: '',
  qualificationAuditStatus: 1,
  auditOpinion: ''
})

// 计算属性
const selectAll = computed({
  get: () => selectedDealers.value.length === dealerList.value.length && dealerList.value.length > 0,
  set: (value: boolean) => {
    if (value) {
      selectedDealers.value = dealerList.value.map(dealer => dealer.dealerId)
    } else {
      selectedDealers.value = []
    }
  }
})

// 获取经销商等级文本
const getDealerLevelText = (level: number) => {
  return level === 1 ? '一级经销商' : '二级经销商'
}

// 获取合作状态文本
const getCooperateStatusText = (status: number) => {
  const statusMap: { [key: number]: string } = {
    1: '正常合作',
    2: '暂停合作',
    3: '终止合作'
  }
  return statusMap[status] || '未知'
}

// 获取合作状态样式
const getCooperateStatusClass = (status: number) => {
  const classMap: { [key: number]: string } = {
    1: 'status-normal',
    2: 'status-warning',
    3: 'status-danger'
  }
  return classMap[status] || ''
}

// 格式化金额显示
const formatAmount = (amount: number | undefined) => {
  if (amount === undefined || amount === null) {
    return '¥0.00'
  }
  return `¥${amount.toFixed(2)}`
}


// 获取分页页码数组
const getPageNumbers = () => {
  const pages = []
  const totalPagesValue = totalPages.value
  if (totalPagesValue <= 0) return []
  
  const start = Math.max(1, currentPage.value - 2)
  const end = Math.min(totalPagesValue, start + 4)
  
  for (let i = start; i <= end; i++) {
    pages.push(i)
  }
  return pages
}

// 获取经销商列表
const fetchDealers = async () => {
  try {
    loading.value = true
    const response = await dealerApi.getDealerList(searchParams)
    if (response.code === 200) {
      dealerList.value = response.data.records
      pagination.total = response.data.total
      pagination.pageNum = response.data.current
      pagination.pageSize = response.data.size
    }
  } catch (error) {
    console.error('获取经销商列表失败:', error)
  } finally {
    loading.value = false
  }
}

// 搜索
const handleSearch = () => {
  pagination.pageNum = 1
  fetchDealers()
}

// 重置
const handleReset = () => {
  Object.assign(searchParams, {
    dealerCode: '',
    dealerName: '',
    creditCode: '',
    dealerLevel: undefined,
    region: '',
    contactPerson: '',
    contactPhone: '',
    cooperateStatus: undefined
  })
  pagination.pageNum = 1
  fetchDealers()
}

// 新增
const handleAdd = () => {
  isEdit.value = false
  Object.assign(formData, {
    dealerCode: '',
    dealerName: '',
    creditCode: '',
    dealerLevel: 1,
    region: '',
    contactPerson: '',
    contactPhone: '',
    cooperateStartDate: '',
    cooperateStatus: 1,
    businessLicenseUrl: '',
    cooperationAgreementUrl: ''
  })
  showDialog.value = true
}

// 编辑
const handleEdit = (dealer: DealerInfo) => {
  isEdit.value = true
  Object.assign(formData, {
    dealerId: dealer.dealerId,
    dealerCode: dealer.dealerCode,
    dealerName: dealer.dealerName,
    creditCode: dealer.creditCode,
    dealerLevel: dealer.dealerLevel,
    region: dealer.region,
    contactPerson: dealer.contactPerson,
    contactPhone: dealer.contactPhone,
    cooperateStartDate: dealer.cooperateStartDate,
    cooperateStatus: dealer.cooperateStatus,
    businessLicenseUrl: dealer.businessLicenseUrl,
    cooperationAgreementUrl: dealer.cooperationAgreementUrl
  })
  showDialog.value = true
}

// 删除
const handleDelete = async (dealer: DealerInfo) => {
  if (confirm(`确定要删除经销商"${dealer.dealerName}"吗？`)) {
    try {
      const response = await dealerApi.deleteDealer(dealer.dealerId)
      if (response.code === 200) {
        alert('删除成功')
        fetchDealers()
      } else {
        alert(response.message || '删除失败')
      }
    } catch (error: any) {
      console.error('删除失败:', error)
      
      // 处理网络错误或服务器错误
      if (error.response && error.response.data) {
        const errorData = error.response.data
        let errorMessage = errorData.message || '删除失败'
        
        // 如果有具体的字段验证错误，显示详细错误信息
        if (errorData.data && typeof errorData.data === 'object') {
          const fieldErrors = Object.values(errorData.data).filter((err: any) => typeof err === 'string')
          if (fieldErrors.length > 0) {
            errorMessage = fieldErrors.join('; ')
          }
        }
        
        alert(errorMessage)
      } else {
        alert('删除失败')
      }
    }
  }
}

// 批量删除
const handleBatchDelete = async () => {
  if (selectedDealers.value.length === 0) {
    alert('请选择要删除的经销商')
    return
  }
  
  if (confirm(`确定要删除选中的 ${selectedDealers.value.length} 个经销商吗？`)) {
    try {
      const response = await dealerApi.batchDeleteDealer(selectedDealers.value)
      if (response.code === 200) {
        alert('批量删除成功')
        selectedDealers.value = []
        fetchDealers()
      } else {
        alert(response.message || '批量删除失败')
      }
    } catch (error: any) {
      console.error('批量删除失败:', error)
      
      // 处理网络错误或服务器错误
      if (error.response && error.response.data) {
        const errorData = error.response.data
        let errorMessage = errorData.message || '批量删除失败'
        
        // 如果有具体的字段验证错误，显示详细错误信息
        if (errorData.data && typeof errorData.data === 'object') {
          const fieldErrors = Object.values(errorData.data).filter((err: any) => typeof err === 'string')
          if (fieldErrors.length > 0) {
            errorMessage = fieldErrors.join('; ')
          }
        }
        
        alert(errorMessage)
      } else {
        alert('批量删除失败')
      }
    }
  }
}

// 状态修改
const handleStatusChange = (dealer: DealerInfo) => {
  currentDealer.value = dealer
  newCooperateStatus.value = dealer.cooperateStatus
  showStatusDialog.value = true
}


// 提交表单
const handleSubmit = async () => {
  try {
    // 前端验证经销商编码格式
    const dealerCodePattern = /^[A-Z0-9]{6,20}$/
    if (!dealerCodePattern.test(formData.dealerCode)) {
      alert('经销商编码格式不正确，应为6-20位大写字母和数字')
      return
    }
    
    let response
    if (isEdit.value) {
      response = await dealerApi.updateDealer(formData as DealerUpdateReq)
    } else {
      response = await dealerApi.addDealer(formData as DealerAddReq)
    }
    
    if (response.code === 200) {
      alert(isEdit.value ? '修改成功' : '新增成功')
      showDialog.value = false
      fetchDealers()
    } else {
      // 处理验证错误信息
      let errorMessage = response.message || (isEdit.value ? '修改失败' : '新增失败')
      
      // 如果有具体的字段验证错误，显示详细错误信息
      if (response.data && typeof response.data === 'object') {
        const fieldErrors = Object.values(response.data).filter(error => typeof error === 'string')
        if (fieldErrors.length > 0) {
          errorMessage = fieldErrors.join('; ')
        }
      }
      
      alert(errorMessage)
    }
  } catch (error: any) {
    console.error('提交失败:', error)
    
    // 处理网络错误或服务器错误
    if (error.response && error.response.data) {
      const errorData = error.response.data
      let errorMessage = errorData.message || (isEdit.value ? '修改失败' : '新增失败')
      
      // 如果有具体的字段验证错误，显示详细错误信息
      if (errorData.data && typeof errorData.data === 'object') {
        const fieldErrors = Object.values(errorData.data).filter((err: any) => typeof err === 'string')
        if (fieldErrors.length > 0) {
          errorMessage = fieldErrors.join('; ')
        }
      }
      
      alert(errorMessage)
    } else {
      alert(isEdit.value ? '修改失败' : '新增失败')
    }
  }
}

// 状态提交
const handleStatusSubmit = async () => {
  try {
    const response = await dealerApi.updateCooperateStatus(currentDealer.value.dealerId, newCooperateStatus.value)
    if (response.code === 200) {
      alert('状态修改成功')
      showStatusDialog.value = false
      fetchDealers()
    } else {
      alert(response.message || '状态修改失败')
    }
  } catch (error: any) {
    console.error('状态修改失败:', error)
    
    // 处理网络错误或服务器错误
    if (error.response && error.response.data) {
      const errorData = error.response.data
      let errorMessage = errorData.message || '状态修改失败'
      
      // 如果有具体的字段验证错误，显示详细错误信息
      if (errorData.data && typeof errorData.data === 'object') {
        const fieldErrors = Object.values(errorData.data).filter((err: any) => typeof err === 'string')
        if (fieldErrors.length > 0) {
          errorMessage = fieldErrors.join('; ')
        }
      }
      
      alert(errorMessage)
    } else {
      alert('状态修改失败')
    }
  }
}


// 全选
const handleSelectAll = () => {
  // 已在计算属性中处理
}

// 分页相关
const handlePageChange = (page: number) => {
  const totalPagesValue = totalPages.value
  if (page >= 1 && page <= totalPagesValue && totalPagesValue > 0) {
    pagination.pageNum = page
    searchParams.pageNum = page
    fetchDealers()
  }
}

const handlePageSizeChange = () => {
  pagination.pageSize = pageSize.value
  searchParams.pageSize = pageSize.value
  pagination.pageNum = 1
  searchParams.pageNum = 1
  fetchDealers()
}

// 表格工具栏
const handleTableSearch = () => {
  handleSearch()
}

const handleTableRefresh = () => {
  fetchDealers()
}

const handleTableExport = () => {
  alert('导出功能开发中...')
}

const handleTableViewToggle = () => {
  alert('视图切换功能开发中...')
}

// 对话框相关
const handleDialogClose = () => {
  showDialog.value = false
}

const handleStatusDialogClose = () => {
  showStatusDialog.value = false
}


// 初始化
onMounted(() => {
  fetchDealers()
})
</script>

<style scoped>
/* 基础样式 */
.dealer-container {
  background: #f5f5f5;
  min-height: 100vh;
  padding: 0;
}

/* 搜索区域 */
.search-section {
  background: white;
  padding: 16px 20px;
  border-bottom: 1px solid #e0e0e0;
}

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

.search-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.search-item label {
  font-size: 12px;
  color: #666;
  white-space: nowrap;
  min-width: 60px;
}

.search-input, .search-select {
  padding: 4px 8px;
  border: 1px solid #d9d9d9;
  border-radius: 3px;
  font-size: 11px;
  width: 140px;
  height: 24px;
}

.search-input:focus, .search-select:focus {
  outline: none;
  border-color: #409eff;
}

.search-actions {
  display: flex;
  gap: 6px;
}

.search-btn {
  background: #1890ff;
  color: white;
  border: none;
  padding: 4px 8px;
  border-radius: 3px;
  font-size: 11px;
  cursor: pointer;
  height: 24px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.reset-btn {
  background: #ff7875;
  color: white;
  border: none;
  padding: 4px 8px;
  border-radius: 3px;
  font-size: 11px;
  cursor: pointer;
  height: 24px;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 操作区域 */
.action-section {
  background: white;
  padding: 12px 16px;
  border-bottom: 1px solid #e0e0e0;
}

.action-buttons {
  display: flex;
  gap: 6px;
}

.action-btn {
  padding: 4px 8px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  font-size: 11px;
  height: 24px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.action-btn.primary {
  background: #52c41a;
  color: white;
}

.action-btn.danger {
  background: #ff4d4f;
  color: white;
}

/* 表格区域 */
.table-section {
  background: white;
  margin: 16px;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.table-header {
  padding: 8px 16px;
  background: #fafafa;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  justify-content: flex-end;
}

.table-controls {
  display: flex;
  gap: 4px;
}

.control-btn {
  width: 24px;
  height: 24px;
  border: 1px solid #d9d9d9;
  background: white;
  border-radius: 3px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
}

.control-btn:hover {
  background-color: #f5f5f5;
}

.table-container {
  position: relative;
  overflow-x: auto;
}

.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255,255,255,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.loading-spinner {
  font-size: 16px;
  color: #409eff;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}

.data-table th,
.data-table td {
  padding: 8px 6px;
  text-align: left;
  border-bottom: 1px solid #e0e0e0;
}

.data-table th {
  background-color: #fafafa;
  font-weight: 500;
  color: #333;
  font-size: 11px;
}

.data-table tbody tr:hover {
  background-color: #f5f5f5;
}

.select-all {
  margin: 0;
}

.table-btn {
  padding: 2px 6px;
  margin: 0 1px;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  font-size: 10px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.table-btn.edit {
  background-color: #1890ff;
  color: white;
}

.table-btn.delete {
  background-color: #ff4d4f;
  color: white;
}

.table-btn.status {
  background-color: #fa8c16;
  color: white;
}

.table-btn.audit {
  background-color: #52c41a;
  color: white;
}

/* 分页 */
.table-footer {
  padding: 8px 16px;
  border-top: 1px solid #e0e0e0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fafafa;
}

.pagination-left {
  display: flex;
  align-items: center;
  gap: 20px;
}

.pagination-info {
  font-size: 12px;
  color: #666;
}

.page-size-selector {
  display: flex;
  align-items: center;
  gap: 8px;
}

.page-size-selector label {
  font-size: 12px;
  color: #666;
}

.page-size-select {
  padding: 4px 8px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-size: 12px;
  background: white;
  cursor: pointer;
  transition: border-color 0.3s;
}

.page-size-select:hover {
  border-color: #1890ff;
}

.page-size-select:focus {
  outline: none;
  border-color: #1890ff;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}

.pagination-container {
  display: flex;
  align-items: center;
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.pagination-btn {
  padding: 2px 6px;
  border: none;
  background: white;
  color: #6c757d;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  border-right: 1px solid #e9ecef;
  height: 20px;
}

.pagination-btn:hover:not(:disabled) {
  background: #e9ecef;
  color: #495057;
}

.pagination-btn:disabled {
  background: #f8f9fa;
  color: #adb5bd;
  cursor: not-allowed;
}

.pagination-pages {
  display: flex;
  align-items: center;
}

.page-number {
  padding: 2px 6px;
  border: none;
  background: white;
  color: #6c757d;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  border-right: 1px solid #e9ecef;
  min-width: 28px;
  text-align: center;
  height: 20px;
}

.page-number:hover {
  background: #e9ecef;
  color: #495057;
}

.page-number.active {
  background: #6c757d;
  color: white;
  font-weight: 600;
}

.page-number.active:hover {
  background: #5a6268;
}

/* 对话框 */
.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.dialog-content {
  background: white;
  border-radius: 8px;
  width: 90%;
  max-width: 800px;
  max-height: 90vh;
  overflow-y: auto;
}

.dialog-header {
  padding: 20px;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dialog-header h3 {
  margin: 0;
  font-size: 18px;
  color: #333;
}

.dialog-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #999;
}

.dialog-body {
  padding: 20px;
}

.form-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-row {
  display: flex;
  gap: 20px;
}

.form-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-item.full-width {
  flex: 100%;
}

.form-item label {
  font-size: 14px;
  color: #333;
  font-weight: 500;
}

.form-item label.required::after {
  content: ' *';
  color: #f56c6c;
}

.form-input, .form-select, .form-textarea {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none;
  border-color: #409eff;
}

.form-textarea {
  resize: vertical;
  min-height: 80px;
}

.dialog-footer {
  padding: 20px;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.dialog-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.dialog-btn.cancel {
  background-color: #909399;
  color: white;
}

.dialog-btn.confirm {
  background-color: #409eff;
  color: white;
}

/* 状态样式 */
.status-normal {
  color: #67c23a;
  font-weight: 500;
}

.status-warning {
  color: #e6a23c;
  font-weight: 500;
}

.status-danger {
  color: #f56c6c;
  font-weight: 500;
}

.status-pending {
  color: #909399;
  font-weight: 500;
}

.status-success {
  color: #67c23a;
  font-weight: 500;
}

/* 金额单元格样式 */
.amount-cell {
  text-align: right;
  font-weight: 500;
  color: #1890ff;
  font-family: 'Courier New', monospace;
}
</style>