<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>
            </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>
                <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>
                <button @click="handleRebateDetail(dealer)" class="table-btn rebate">💰 返利明细</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="请输入经销商编码"
                  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 full-width">
                <label>合作协议URL:</label>
                <input 
                  v-model="formData.cooperationAgreementUrl" 
                  class="form-input" 
                  placeholder="请输入合作协议URL"
                />
              </div>
            </div>
            <div class="form-row">
              <div class="form-item full-width">
                <label>审核意见:</label>
                <textarea 
                  v-model="formData.auditOpinion" 
                  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 v-if="showRebateDialog" class="dialog-overlay" @click="handleRebateDialogClose">
      <div class="dialog-content rebate-dialog" @click.stop>
        <div class="dialog-header">
          <h3>返利明细 - {{ currentDealer.dealerName }} ({{ currentDealer.dealerCode }})</h3>
          <button @click="handleRebateDialogClose" class="dialog-close">×</button>
        </div>
        <div class="dialog-body">
          <div v-if="rebateLoading" class="loading-overlay">
            <div class="loading-spinner">加载中...</div>
          </div>
          <div v-else>
            <table class="rebate-table">
              <thead>
                <tr>
                  <th>返利编号</th>
                  <th>订单编号</th>
                  <th>经销商代码</th>
                  <th>产品编码</th>
                  <th>返利金额</th>
                  <th>返利日期</th>
                  <th>操作类型</th>
                  <th>计算状态</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="rebate in rebateList" :key="rebate.rebateId">
                  <td>{{ rebate.rebateNo }}</td>
                  <td>{{ rebate.orderNo }}</td>
                  <td>{{ rebate.dealerCode }}</td>
                  <td>{{ rebate.productCode }}</td>
                  <td class="amount-cell">{{ formatAmount(rebate.rebateAmount) }}</td>
                  <td>{{ rebate.rebateDate }}</td>
                  <td>
                    <span :class="getOperateTypeClass(rebate.operateType || 0)">
                      {{ getOperateTypeText(rebate.operateType || 0) }}
                    </span>
                  </td>
                  <td>
                    <span :class="getCalcFlagClass(rebate.calcFlag || 0)">
                      {{ getCalcFlagText(rebate.calcFlag || 0) }}
                    </span>
                  </td>
                </tr>
                <tr v-if="rebateList.length === 0">
                  <td colspan="8" class="no-data">暂无返利明细数据</td>
                </tr>
              </tbody>
            </table>
            
            <!-- 返利明细分页 -->
            <div class="rebate-pagination">
              <div class="pagination-info">
                共 {{ rebatePagination.total || 0 }} 条记录，第 {{ rebatePagination.pageNum || 1 }} / {{ rebateTotalPages || 1 }} 页
              </div>
              <div class="pagination-container">
                <button 
                  @click="handleRebatePageChange(rebatePagination.pageNum - 1)" 
                  :disabled="rebatePagination.pageNum <= 1"
                  class="pagination-btn prev-btn"
                >
                  上一页
                </button>
                <div class="pagination-pages">
                  <button 
                    v-for="page in getRebatePageNumbers()" 
                    :key="page"
                    @click="handleRebatePageChange(page)"
                    :class="['page-number', { active: page === rebatePagination.pageNum }]"
                  >
                    {{ page }}
                  </button>
                </div>
                <button 
                  @click="handleRebatePageChange(rebatePagination.pageNum + 1)" 
                  :disabled="rebatePagination.pageNum >= rebateTotalPages"
                  class="pagination-btn next-btn"
                >
                  下一页
                </button>
              </div>
            </div>
          </div>
        </div>
        <div class="dialog-footer">
          <button @click="handleRebateDialogClose" 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'
import { getRebatePage, type Rebate, type RebateSearchParams } from '../../api/rebate'

// 响应式数据
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 showRebateDialog = ref(false)
const rebateLoading = ref(false)
const rebateList = ref<Rebate[]>([])
const rebatePagination = reactive({
  total: 0,
  pageNum: 1,
  pageSize: 10
})

// 搜索参数
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 rebateTotalPages = computed(() => {
  if (rebatePagination.pageSize <= 0) return 1
  return Math.ceil(rebatePagination.total / rebatePagination.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 getOperateTypeText = (type: number) => {
  const typeMap: { [key: number]: string } = {
    1: '新增',
    2: '扣减'
  }
  return typeMap[type] || '未知'
}

// 获取操作类型样式
const getOperateTypeClass = (type: number) => {
  const classMap: { [key: number]: string } = {
    1: 'operate-add',
    2: 'operate-subtract'
  }
  return classMap[type] || ''
}

// 获取计算状态文本
const getCalcFlagText = (flag: number) => {
  const flagMap: { [key: number]: string } = {
    0: '未计算',
    1: '已计算'
  }
  return flagMap[flag] || '未知'
}

// 获取计算状态样式
const getCalcFlagClass = (flag: number) => {
  const classMap: { [key: number]: string } = {
    0: 'calc-pending',
    1: 'calc-completed'
  }
  return classMap[flag] || ''
}


// 获取分页页码数组
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 getRebatePageNumbers = () => {
  const pages = []
  const totalPagesValue = rebateTotalPages.value
  if (totalPagesValue <= 0) return []
  
  const start = Math.max(1, rebatePagination.pageNum - 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) as any
    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 = async (dealer: DealerInfo) => {
  try {
    isEdit.value = true
    showDialog.value = true
    
    // 获取最新的经销商详情
    const response = await dealerApi.getDealerDetail(dealer.dealerId) as any
    if (response.code === 200) {
      const dealerDetail = response.data
      Object.assign(formData, {
        dealerId: dealerDetail.dealerId,
        dealerCode: dealerDetail.dealerCode,
        dealerName: dealerDetail.dealerName,
        creditCode: dealerDetail.creditCode,
        dealerLevel: dealerDetail.dealerLevel,
        region: dealerDetail.region,
        contactPerson: dealerDetail.contactPerson,
        contactPhone: dealerDetail.contactPhone,
        cooperateStartDate: dealerDetail.cooperateStartDate,
        cooperateStatus: dealerDetail.cooperateStatus,
        businessLicenseUrl: dealerDetail.businessLicenseUrl,
        cooperationAgreementUrl: dealerDetail.cooperationAgreementUrl,
        qualificationAuditStatus: dealerDetail.qualificationAuditStatus,
        auditOpinion: dealerDetail.auditOpinion
      })
    } else {
      alert('获取经销商详情失败')
      showDialog.value = false
    }
  } catch (error: any) {
    console.error('获取经销商详情失败:', error)
    alert('获取经销商详情失败')
    showDialog.value = false
  }
}

// 删除
const handleDelete = async (dealer: DealerInfo) => {
  if (confirm(`确定要删除经销商"${dealer.dealerName}"吗？`)) {
    try {
      const response = await dealerApi.deleteDealer(dealer.dealerId) as any
      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) as any
      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 {
    let response: any
    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) as any
    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 handleRebateDetail = (dealer: DealerInfo) => {
  currentDealer.value = dealer
  rebatePagination.pageNum = 1
  showRebateDialog.value = true
  fetchRebateList()
}

const fetchRebateList = async () => {
  try {
    rebateLoading.value = true
    const params: RebateSearchParams = {
      dealerCode: currentDealer.value.dealerCode,
      pageNum: rebatePagination.pageNum,
      pageSize: rebatePagination.pageSize
    }
    
    const response = await getRebatePage(params) as any
    // @/utils/request 的响应拦截器已经返回了 data 部分
    rebateList.value = response.records
    rebatePagination.total = response.total
    rebatePagination.pageNum = response.current
    rebatePagination.pageSize = response.size
  } catch (error: any) {
    console.error('获取返利明细失败:', error)
    alert('获取返利明细失败')
  } finally {
    rebateLoading.value = false
  }
}

const handleRebatePageChange = (page: number) => {
  const totalPagesValue = rebateTotalPages.value
  if (page >= 1 && page <= totalPagesValue && totalPagesValue > 0) {
    rebatePagination.pageNum = page
    fetchRebateList()
  }
}

const handleRebateDialogClose = () => {
  showRebateDialog.value = false
  rebateList.value = []
  rebatePagination.total = 0
  rebatePagination.pageNum = 1
}


// 全选
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 = () => {
  searchParams.pageSize = pagination.pageSize
  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;
}

/* 返利明细相关样式 */
.table-btn.rebate {
  background: linear-gradient(135deg, #ffd700, #ffed4e);
  color: #333;
  border: 1px solid #ffd700;
}

.table-btn.rebate:hover {
  background: linear-gradient(135deg, #ffed4e, #ffd700);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(255, 215, 0, 0.3);
}

/* 返利明细对话框样式 */
.rebate-dialog {
  max-width: 1200px;
  width: 90%;
  max-height: 80vh;
}

.rebate-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
  font-size: 14px;
}

.rebate-table th,
.rebate-table td {
  padding: 12px 8px;
  text-align: left;
  border-bottom: 1px solid #eee;
}

.rebate-table th {
  background: #f8f9fa;
  font-weight: 600;
  color: #333;
  position: sticky;
  top: 0;
  z-index: 10;
}

.rebate-table tbody tr:hover {
  background: #f5f7fa;
}

.rebate-table .no-data {
  text-align: center;
  color: #999;
  font-style: italic;
  padding: 40px;
}

/* 返利明细分页样式 */
.rebate-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  padding: 15px 0;
  border-top: 1px solid #eee;
}

/* 操作类型样式 */
.operate-add {
  color: #67c23a;
  font-weight: 500;
  background: #f0f9ff;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.operate-subtract {
  color: #f56c6c;
  font-weight: 500;
  background: #fef0f0;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
}

/* 计算状态样式 */
.calc-pending {
  color: #e6a23c;
  font-weight: 500;
  background: #fdf6ec;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.calc-completed {
  color: #67c23a;
  font-weight: 500;
  background: #f0f9ff;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
}
</style>