<template>
  <div class="rebate-page">
    <!-- 搜索区域 -->
    <div class="search-section">
      <div class="search-form">
        <div class="search-row">
          <div class="search-item">
            <span class="search-label">经销商名称</span>
          <el-input
            v-model="searchForm.dealerName"
            placeholder="请输入经销商名称"
            clearable
              size="small"
              style="width: 160px"
            />
          </div>
          <div class="search-item">
            <span class="search-label">返利编号</span>
          <el-input
              v-model="searchForm.rebateNo"
              placeholder="请输入返利编号"
            clearable
              size="small"
              style="width: 160px"
            />
          </div>
          <div class="search-item">
            <span class="search-label">日期</span>
          <el-date-picker
              v-model="dateRange"
              type="daterange"
            range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              size="small"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              @change="handleDateRangeChange"
              style="width: 240px"
            />
          </div>
          <div class="search-actions">
            <el-button type="primary" size="small" @click="handleSearch" :loading="loading">
              查询
          </el-button>
            <el-button size="small" @click="handleReset">
            重置
          </el-button>
          </div>
        </div>
      </div>
    </div>

    <!-- 图表区域 -->
    <div class="charts-section">
      <div class="charts-container">
        <!-- 左侧趋势图 -->
        <div class="chart-card trend-chart">
          <div class="chart-header">
            <h3 class="chart-title">返利统计</h3>
            <div class="chart-legend">
              <div class="legend-item">
                <span class="legend-dot" style="background-color: #4CAF50;"></span>
                <span>返利合计</span>
        </div>
              <div class="legend-item">
                <span class="legend-dot" style="background-color: #2196F3;"></span>
                <span>已使用返利</span>
        </div>
      </div>
          </div>
          <div class="chart-content">
            <div ref="trendChart" class="chart"></div>
          </div>
        </div>

        <!-- 右侧饼图 -->
        <div class="chart-card pie-chart">
          <div class="chart-header">
            <h3 class="chart-title">返利统计</h3>
            <div class="chart-legend">
              <div class="legend-item">
                <span class="legend-dot" style="background-color: #2196F3;"></span>
                <span>剩余返利</span>
              </div>
              <div class="legend-item">
                <span class="legend-dot" style="background-color: #9CCC65;"></span>
                <span>已使用返利</span>
              </div>
            </div>
          </div>
          <div class="chart-content">
            <div ref="pieChart" class="chart"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- 数据表格 -->
    <div class="table-section">
      <div class="table-header">
        <div class="table-title">
          返利记录
        </div>
        <div class="table-actions">
          <el-button type="primary" size="small" @click="handleExport" :loading="exportLoading">
            <el-icon><Download /></el-icon>
            导出
          </el-button>
          <div class="table-info">
            数据状态: {{ loading ? '加载中...' : `共${rebateList.length}条记录` }}
          </div>
        </div>
      </div>
      
      <el-table
        v-loading="loading"
        :data="rebateList"
        style="width: 100%"
        :header-cell-style="{ background: '#fafafa', color: '#333', fontWeight: 'normal' }"
        :empty-text="rebateList.length === 0 ? '暂无数据' : ''"
        size="small"
      >
        <el-table-column prop="rebateNo" label="返利编号" width="140" align="center" />
        <el-table-column prop="orderNo" label="订单编号" width="140" align="center" />
        <el-table-column prop="dealerCode" label="经销商代码" width="120" align="center" />
        <el-table-column prop="dealerName" label="经销商名称" min-width="150" />
        <el-table-column prop="productCode" label="产品编码" width="120" align="center" />
        <el-table-column prop="rebateAmount" label="返利金额" width="120" align="right">
          <template #default="{ row }">
            <span class="amount-text">{{ formatAmount(row.rebateAmount) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="rebateDate" label="返利日期" width="120" align="center" />
        <el-table-column prop="operateTypeText" label="操作类型" width="100" align="center">
          <template #default="{ row }">
            <el-tag :type="getOperateTypeTagType(row.operateType)" size="small">
              {{ row.operateTypeText || getOperateTypeText(row.operateType) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="calcFlagText" label="计算状态" width="100" align="center">
          <template #default="{ row }">
            <el-tag :type="getCalcFlagTagType(row.calcFlag)" size="small">
              {{ row.calcFlagText || getCalcFlagText(row.calcFlag) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="updateTime" label="更新时间" width="150" align="center">
          <template #default="{ row }">
            {{ formatDate(row.updateTime) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="80" align="center">
          <template #default="{ row }">
            <el-button type="primary" size="small" link @click="handleViewDetail(row)">
              详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-wrapper">
        <div class="pagination-info">
          共 {{ pagination.total }} 条，{{ pagination.pageSize }}/页
        </div>
        <el-pagination
          v-model:current-page="pagination.pageNum"
          v-model:page-size="pagination.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="pagination.total"
          layout="sizes, prev, pager, next"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          small
        />
        <div class="pagination-jump">
          前往
          <el-input
            v-model="jumpPage"
            size="small"
            style="width: 50px; margin: 0 8px;"
            @keyup.enter="handleJumpPage"
          />
          页
      </div>
      </div>
    </div>

    <!-- 返利详情对话框 -->
    <el-dialog
      v-model="detailDialogVisible"
      title="返利详情"
      width="800px"
      :close-on-click-modal="false"
    >
      <div v-if="rebateDetail" class="rebate-detail">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="返利编号">
            {{ rebateDetail.rebateNo }}
          </el-descriptions-item>
          <el-descriptions-item label="订单编号">
            {{ rebateDetail.orderNo }}
          </el-descriptions-item>
          <el-descriptions-item label="经销商代码">
            {{ rebateDetail.dealerCode }}
          </el-descriptions-item>
          <el-descriptions-item label="经销商名称">
            {{ rebateDetail.dealerName }}
          </el-descriptions-item>
          <el-descriptions-item label="产品编码">
            {{ rebateDetail.productCode }}
          </el-descriptions-item>
          <el-descriptions-item label="返利金额">
            <span class="amount-text">¥{{ formatAmount(rebateDetail.rebateAmount) }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="返利日期">
            {{ rebateDetail.rebateDate }}
          </el-descriptions-item>
          <el-descriptions-item label="操作类型">
            <el-tag :type="getOperateTypeTagType(rebateDetail.operateType)">
              {{ rebateDetail.operateTypeText || getOperateTypeText(rebateDetail.operateType) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="计算状态">
            <el-tag :type="getCalcFlagTagType(rebateDetail.calcFlag)">
              {{ rebateDetail.calcFlagText || getCalcFlagText(rebateDetail.calcFlag) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="创建时间">
            {{ rebateDetail.createTime ? formatDate(rebateDetail.createTime) : '-' }}
          </el-descriptions-item>
          <el-descriptions-item label="更新时间">
            {{ rebateDetail.updateTime ? formatDate(rebateDetail.updateTime) : '-' }}
          </el-descriptions-item>
          <el-descriptions-item label="上传时间">
            {{ rebateDetail.uploadTime ? formatDate(rebateDetail.uploadTime) : '-' }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
      
      <template #footer>
        <el-button @click="detailDialogVisible = false">关闭</el-button>
      </template>
    </el-dialog>

    <!-- 新增/编辑返利对话框 -->
    <el-dialog
      v-model="formDialogVisible"
      :title="isEdit ? '编辑返利' : '新增返利'"
      width="600px"
      :close-on-click-modal="false"
    >
      <el-form
        ref="rebateFormRef"
        :model="rebateForm"
        :rules="rebateFormRules"
        label-width="100px"
      >
        <el-form-item label="经销商" prop="dealerName">
          <el-input v-model="rebateForm.dealerName" placeholder="请输入经销商名称" />
        </el-form-item>
        
        <el-form-item label="产品名称" prop="productName">
          <el-input v-model="rebateForm.productName" placeholder="请输入产品名称" />
        </el-form-item>
        
        <el-form-item label="产品型号">
          <el-input v-model="rebateForm.productModel" placeholder="请输入产品型号" />
        </el-form-item>
        
        <el-form-item label="返利类型" prop="rebateType">
          <el-select v-model="rebateForm.rebateType" placeholder="请选择返利类型" style="width: 100%">
            <el-option label="销量返利" :value="1" />
            <el-option label="业绩返利" :value="2" />
            <el-option label="年度返利" :value="3" />
            <el-option label="特殊返利" :value="4" />
          </el-select>
        </el-form-item>
        
        <el-form-item label="返利政策" prop="policyName">
          <el-input v-model="rebateForm.policyName" placeholder="请输入返利政策名称" />
        </el-form-item>
        
        <el-form-item label="计算基数" prop="calculationBase">
          <el-input-number
            v-model="rebateForm.calculationBase"
            :precision="2"
            :min="0"
            style="width: 100%"
            placeholder="请输入计算基数"
          />
        </el-form-item>
        
        <el-form-item label="返利比例(%)" prop="rebateRate">
          <el-input-number
            v-model="rebateForm.rebateRate"
            :precision="2"
            :min="0"
            :max="100"
            style="width: 100%"
            placeholder="请输入返利比例"
          />
        </el-form-item>
        
        <el-form-item label="返利金额" prop="rebateAmount">
          <el-input-number
            v-model="rebateForm.rebateAmount"
            :precision="2"
            :min="0"
            style="width: 100%"
            placeholder="请输入返利金额"
          />
        </el-form-item>
        
        <el-form-item label="返利周期" prop="periodRange">
          <el-date-picker
            v-model="periodRange"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
            style="width: 100%"
          />
        </el-form-item>
        
        <el-form-item label="申请备注">
          <el-input
            v-model="rebateForm.applyRemark"
            type="textarea"
            :rows="3"
            placeholder="请输入申请备注"
          />
        </el-form-item>
      </el-form>
      
      <template #footer>
        <el-button @click="formDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit" :loading="submitLoading">
          确定
        </el-button>
      </template>
    </el-dialog>

    <!-- 审核对话框 -->
    <el-dialog
      v-model="auditDialogVisible"
      title="审核返利"
      width="500px"
      :close-on-click-modal="false"
    >
      <el-form
        ref="auditFormRef"
        :model="auditForm"
        :rules="auditFormRules"
        label-width="100px"
      >
        <el-form-item label="审核结果" prop="status">
          <el-radio-group v-model="auditForm.status">
            <el-radio :label="1">审核通过</el-radio>
            <el-radio :label="3">审核拒绝</el-radio>
          </el-radio-group>
        </el-form-item>
        
        <el-form-item label="审核备注">
          <el-input
            v-model="auditForm.auditRemark"
            type="textarea"
            :rows="4"
            placeholder="请输入审核备注"
          />
        </el-form-item>
      </el-form>
      
      <template #footer>
        <el-button @click="auditDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmitAudit" :loading="auditLoading">
          确定
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Search, Refresh, Plus, Check, Close, Money, Delete, Download } from '@element-plus/icons-vue'
import * as echarts from 'echarts'
import rebateApi, { type Rebate, type RebateSearchParams, exportRebates } from '@/api/rebate'
import { formatDate } from '@/utils/index'

// 响应式数据
const loading = ref(false)
const submitLoading = ref(false)
const exportLoading = ref(false)
const auditLoading = ref(false)
const rebateList = ref<Rebate[]>([])
const selectedRebates = ref<Rebate[]>([])
const rebateDetail = ref<Rebate | null>(null)

// 图表引用
const trendChart = ref<HTMLElement>()
const pieChart = ref<HTMLElement>()

// 日期范围
const dateRange = ref<[string, string] | null>(null)

// 对话框显示状态
const detailDialogVisible = ref(false)
const formDialogVisible = ref(false)
const auditDialogVisible = ref(false)
const isEdit = ref(false)

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

// 页面跳转
const jumpPage = ref<number | string>('')

// 搜索表单
const searchForm = reactive<RebateSearchParams>({
  pageNum: 1,
  pageSize: 10,
  rebateNo: '',
  dealerCode: '',
  dealerName: '',
  productCode: '',
  operateType: undefined,
  calcFlag: undefined,
  rebateStartDate: '',
  rebateEndDate: ''
})

// 日期范围
const applyDateRange = ref<[string, string] | null>(null)
const periodRange = ref<[string, string] | null>(null)

// 返利表单
const rebateFormRef = ref()
const rebateForm = reactive({
  rebateId: undefined,
  dealerId: 1, // 这里应该从经销商选择器获取
  dealerName: '',
  productId: 1, // 这里应该从产品选择器获取
  productName: '',
  productModel: '',
  rebateType: undefined,
  policyName: '',
  calculationBase: undefined,
  rebateRate: undefined,
  rebateAmount: undefined,
  periodStart: '',
  periodEnd: '',
  applyRemark: ''
})

// 审核表单
const auditFormRef = ref()
const auditForm = reactive({
  rebateId: undefined as number | undefined,
  status: undefined as number | undefined,
  auditRemark: ''
})

// 表单验证规则
const rebateFormRules = {
  dealerName: [
    { required: true, message: '请输入经销商名称', trigger: 'blur' }
  ],
  productName: [
    { required: true, message: '请输入产品名称', trigger: 'blur' }
  ],
  rebateType: [
    { required: true, message: '请选择返利类型', trigger: 'change' }
  ],
  policyName: [
    { required: true, message: '请输入返利政策名称', trigger: 'blur' }
  ],
  calculationBase: [
    { required: true, message: '请输入计算基数', trigger: 'blur' }
  ],
  rebateRate: [
    { required: true, message: '请输入返利比例', trigger: 'blur' }
  ],
  rebateAmount: [
    { required: true, message: '请输入返利金额', trigger: 'blur' }
  ]
}

const auditFormRules = {
  status: [
    { required: true, message: '请选择审核结果', trigger: 'change' }
  ]
}

// 获取返利类型标签类型
const getRebateTypeTagType = (rebateType: number) => {
  switch (rebateType) {
    case 1:
      return 'primary'
    case 2:
      return 'success'
    case 3:
      return 'warning'
    case 4:
      return 'danger'
    default:
      return 'info'
  }
}

// 获取状态标签类型
const getStatusTagType = (status: number) => {
  switch (status) {
    case 0:
      return 'warning'
    case 1:
      return 'success'
    case 2:
      return 'primary'
    case 3:
      return 'danger'
    default:
      return 'info'
  }
}

// 格式化金额
const formatAmount = (amount: number) => {
  return amount ? amount.toLocaleString('zh-CN', { minimumFractionDigits: 2 }) : '0.00'
}

// 获取操作类型文本
const getOperateTypeText = (operateType: number) => {
  switch (operateType) {
    case 1: return '新增'
    case 2: return '修改'
    case 3: return '删除'
    default: return '未知'
  }
}

// 获取操作类型标签类型
const getOperateTypeTagType = (operateType: number) => {
  switch (operateType) {
    case 1: return 'success'
    case 2: return 'warning'
    case 3: return 'danger'
    default: return 'info'
  }
}

// 获取计算状态文本
const getCalcFlagText = (calcFlag: number | undefined) => {
  switch (calcFlag) {
    case 0: return '未计算'
    case 1: return '已计算'
    default: return '未知'
  }
}

// 获取计算状态标签类型
const getCalcFlagTagType = (calcFlag: number | undefined) => {
  switch (calcFlag) {
    case 0: return 'warning'
    case 1: return 'success'
    default: return 'info'
  }
}

// 获取返利列表
const getRebateList = async () => {
  try {
    loading.value = true
    const params = {
      ...searchForm,
      pageNum: pagination.pageNum,
      pageSize: pagination.pageSize
    }
    
    console.log('请求参数:', params)
    const response = await rebateApi.getRebatePage(params)
    console.log('完整API响应:', response)
    console.log('响应数据结构:', response.data)
    console.log('响应对象类型:', typeof response)
    console.log('响应对象键:', Object.keys(response || {}))
    
    // 检查不同层级的数据
    if (response) {
      console.log('response存在')
      if (response.data !== undefined) {
        console.log('response.data存在:', response.data)
      } else {
        console.log('response.data不存在，检查其他字段')
        console.log('response直接内容:', response)
      }
    }
    
    // 根据后端实际返回的数据结构进行解析
    let dataList = []
    let total = 0
    
    if (response) {
      let responseData = null
      
      // 首先尝试获取数据，response.data可能不存在
      if (response.data !== undefined) {
        responseData = response.data
        console.log('使用response.data:', responseData)
      } else {
        // 如果response.data不存在，直接使用response
        responseData = response
        console.log('直接使用response:', responseData)
      }
      
      if (responseData) {
        // 情况1: 直接返回数组
        if (Array.isArray(responseData)) {
          dataList = responseData
          total = responseData.length
          console.log('情况1: 直接数组，长度:', dataList.length)
        }
        // 情况2: 包含records字段（MyBatis Plus分页格式）
        else if (responseData.records && Array.isArray(responseData.records)) {
          dataList = responseData.records
          total = responseData.total || responseData.records.length
          console.log('情况2: records格式，长度:', dataList.length, '总数:', total)
        }
        // 情况3: 包含data字段的嵌套结构
        else if (responseData.data) {
          if (Array.isArray(responseData.data)) {
            dataList = responseData.data
            total = responseData.total || responseData.data.length
            console.log('情况3a: data数组格式，长度:', dataList.length)
          } else if (responseData.data.records) {
            dataList = responseData.data.records
            total = responseData.data.total || 0
            console.log('情况3b: data.records格式，长度:', dataList.length)
          }
        }
        // 情况4: 其他对象格式，寻找数组字段
        else if (typeof responseData === 'object' && responseData !== null) {
          const keys = Object.keys(responseData)
          console.log('对象的所有键:', keys)
          
          // 寻找可能的数组字段
          const arrayFields = keys.filter(key => Array.isArray(responseData[key]))
          console.log('数组字段:', arrayFields)
          
          if (arrayFields.length > 0) {
            const arrayField = arrayFields[0]
            dataList = responseData[arrayField]
            total = responseData.total || responseData.count || dataList.length
            console.log('情况4: 找到数组字段', arrayField, '长度:', dataList.length)
          }
        }
      }
    }
    
    rebateList.value = dataList
    pagination.total = total
    
    console.log('最终解析的列表数据:', rebateList.value)
    console.log('数据条数:', rebateList.value.length)
    console.log('分页总数:', pagination.total)
    
    if (rebateList.value.length === 0) {
      console.warn('解析后的数据为空，请检查数据结构')
      console.warn('如果需要测试，可以取消注释下面的模拟数据')
      
      // 临时模拟数据用于测试（可以取消注释来测试表格显示）
      /*
      rebateList.value = [
        {
          rebateId: 1,
          rebateNo: 'RB2025-001',
          orderNo: 'ORD-2025-001',
          dealerCode: 'DEALER001',
          dealerName: '测试经销商1',
          productCode: 'PROD001',
          rebateAmount: 1000.00,
          rebateDate: '2025-01-15',
          operateType: 1,
          calcFlag: 0,
          createTime: '2025-01-15 10:00:00',
          updateTime: '2025-01-15 10:00:00'
        }
      ]
      pagination.total = 1
      */
    }
    
  } catch (error) {
    console.error('获取返利列表失败:', error)
    ElMessage.error('获取返利列表失败')
    rebateList.value = []
    pagination.total = 0
  } finally {
    loading.value = false
  }
}

// 处理日期范围变化
const handleDateRangeChange = (dates: [string, string] | null) => {
  if (dates) {
    searchForm.rebateStartDate = dates[0]
    searchForm.rebateEndDate = dates[1]
  } else {
    searchForm.rebateStartDate = ''
    searchForm.rebateEndDate = ''
  }
}

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

// 重置
const handleReset = () => {
  Object.assign(searchForm, {
    pageNum: 1,
    pageSize: 10,
    rebateNo: undefined,
    dealerName: undefined,
    productName: undefined,
    rebateType: undefined,
    status: undefined,
    applyStartTime: undefined,
    applyEndTime: undefined
  })
  applyDateRange.value = null
  pagination.pageNum = 1
  getRebateList()
}

// 刷新
const handleRefresh = () => {
  getRebateList()
}

// 分页变化
const handleSizeChange = (size: number) => {
  pagination.pageSize = size
  pagination.pageNum = 1
  getRebateList()
}

const handleCurrentChange = (page: number) => {
  pagination.pageNum = page
  getRebateList()
}

// 页面跳转
const handleJumpPage = () => {
  const page = Number(jumpPage.value)
  if (page && page > 0 && page <= Math.ceil(pagination.total / pagination.pageSize)) {
    pagination.pageNum = page
    getRebateList()
    jumpPage.value = ''
  }
}

// 选择变化
const handleSelectionChange = (selection: Rebate[]) => {
  selectedRebates.value = selection
}

// 查看详情
const handleViewDetail = async (row: Rebate) => {
  try {
    if (!row.rebateId) return
    console.log('查看详情，返利ID:', row.rebateId)
    
    const response = await rebateApi.getRebateById(row.rebateId)
    console.log('详情接口响应:', response)
    
    // 根据request.ts拦截器的处理，response.data已经是实际数据
    if (response && response.data) {
      rebateDetail.value = response.data
    detailDialogVisible.value = true
      console.log('详情数据:', response.data)
    } else {
      ElMessage.error('获取返利详情失败')
    }
  } catch (error) {
    console.error('获取返利详情失败:', error)
    ElMessage.error('获取返利详情失败')
  }
}

// 新增
const handleAdd = () => {
  isEdit.value = false
  resetRebateForm()
  formDialogVisible.value = true
}

// 编辑
const handleEdit = (row: Rebate) => {
  ElMessage.info(`编辑返利记录：${row.rebateNo}`)
  // 这里可以打开编辑对话框或跳转到编辑页面
}

// 标记已计算
const handleMarkCalculated = async (row: Rebate) => {
  try {
    await ElMessageBox.confirm('确认标记该返利为已计算吗？', '确认操作', {
      type: 'warning'
    })
    
    await rebateApi.markRebateCalculated(row.rebateId!)
    ElMessage.success('标记成功')
    getRebateList()
  } catch (error) {
    if (error !== 'cancel') {
      console.error('标记失败:', error)
      ElMessage.error('标记失败')
    }
  }
}

// 重置表单
const resetRebateForm = () => {
  Object.assign(rebateForm, {
    rebateId: undefined,
    dealerId: 1,
    dealerName: '',
    productId: 1,
    productName: '',
    productModel: '',
    rebateType: undefined,
    policyName: '',
    calculationBase: undefined,
    rebateRate: undefined,
    rebateAmount: undefined,
    periodStart: '',
    periodEnd: '',
    applyRemark: ''
  })
  periodRange.value = null
  rebateFormRef.value?.clearValidate()
}

// 提交表单
const handleSubmit = async () => {
  try {
    await rebateFormRef.value?.validate()
    
    if (periodRange.value) {
      rebateForm.periodStart = periodRange.value[0]
      rebateForm.periodEnd = periodRange.value[1]
    }
    
    submitLoading.value = true
    
    if (isEdit.value) {
      await rebateApi.updateRebate(rebateForm as any)
      ElMessage.success('更新返利成功')
    } else {
      await rebateApi.addRebate(rebateForm as any)
      ElMessage.success('新增返利成功')
    }
    
    formDialogVisible.value = false
    getRebateList()
  } catch (error) {
    console.error('提交表单失败:', error)
    ElMessage.error('操作失败')
  } finally {
    submitLoading.value = false
  }
}

// 删除
const handleDelete = async (row: Rebate) => {
  try {
    await ElMessageBox.confirm('确认删除该返利记录吗？', '确认删除', {
      type: 'warning'
    })
    
    const { data } = await rebateApi.deleteRebate(row.rebateId!)
    if (data.code === 200) {
      ElMessage.success('删除成功')
    getRebateList()
    } else {
      ElMessage.error(data.message || '删除失败')
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('删除返利失败:', error)
      ElMessage.error('删除返利失败')
    }
  }
}

// 批量标记已计算
const handleBatchMarkCalculated = async () => {
  try {
    if (selectedRebates.value.length === 0) {
      ElMessage.warning('请选择要标记的记录')
      return
    }
    
    await ElMessageBox.confirm(`确认标记选中的 ${selectedRebates.value.length} 条返利记录为已计算吗？`, '确认操作', {
      type: 'warning'
    })
    
    const rebateIds = selectedRebates.value.map(item => item.rebateId!)
    const { data } = await rebateApi.batchMarkRebateCalculated(rebateIds)
    
    if (data.code === 200) {
      ElMessage.success('批量标记成功')
      getRebateList()
    } else {
      ElMessage.error(data.message || '批量标记失败')
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('批量标记失败:', error)
      ElMessage.error('批量标记失败')
    }
  }
}

// 批量删除
const handleBatchDelete = async () => {
  try {
    if (selectedRebates.value.length === 0) {
      ElMessage.warning('请选择要删除的记录')
      return
    }
    
    await ElMessageBox.confirm(`确认删除选中的 ${selectedRebates.value.length} 条返利记录吗？`, '确认删除', {
      type: 'warning'
    })
    
    const rebateIds = selectedRebates.value.map(item => item.rebateId!)
    const { data } = await rebateApi.batchDeleteRebate(rebateIds)
    
    if (data.code === 200) {
      ElMessage.success('批量删除成功')
    getRebateList()
    } else {
      ElMessage.error(data.message || '批量删除失败')
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('批量删除返利失败:', error)
      ElMessage.error('批量删除返利失败')
    }
  }
}

// 审核
const handleAudit = (row: Rebate) => {
  auditForm.rebateId = row.rebateId
  auditForm.status = undefined
  auditForm.auditRemark = ''
  auditDialogVisible.value = true
}

// 提交审核
const handleSubmitAudit = async () => {
  try {
    await auditFormRef.value?.validate()
    
    auditLoading.value = true
    // 模拟审核操作
    ElMessage.success('审核返利成功')
    
    auditDialogVisible.value = false
    getRebateList()
  } catch (error) {
    console.error('审核返利失败:', error)
    ElMessage.error('审核返利失败')
  } finally {
    auditLoading.value = false
  }
}

// 批量审核
const handleBatchAudit = async (status: number) => {
  try {
    const statusText = status === 1 ? '通过' : '拒绝'
    await ElMessageBox.confirm(`确认批量审核${statusText}选中的 ${selectedRebates.value.length} 条返利记录吗？`, '确认审核', {
      type: 'warning'
    })
    
    // 模拟批量审核操作
    ElMessage.success(`批量审核${statusText}成功`)
    getRebateList()
  } catch (error) {
    if (error !== 'cancel') {
      console.error('批量审核失败:', error)
      ElMessage.error('批量审核失败')
    }
  }
}

// 发放
const handleRelease = async (row: any) => {
  try {
    await ElMessageBox.confirm('确认发放该返利吗？', '确认发放', {
      type: 'warning'
    })
    
    // 模拟发放操作
    ElMessage.success('发放返利成功')
    getRebateList()
  } catch (error) {
    if (error !== 'cancel') {
      console.error('发放返利失败:', error)
      ElMessage.error('发放返利失败')
    }
  }
}

// 批量发放
const handleBatchRelease = async () => {
  try {
    await ElMessageBox.confirm(`确认批量发放选中的 ${selectedRebates.value.length} 条返利记录吗？`, '确认发放', {
      type: 'warning'
    })
    
    // 模拟批量发放操作
    ElMessage.success('批量发放返利成功')
    getRebateList()
  } catch (error) {
    if (error !== 'cancel') {
      console.error('批量发放返利失败:', error)
      ElMessage.error('批量发放返利失败')
    }
  }
}

// 导出
const handleExport = async () => {
  try {
    // 显示确认弹窗
    await ElMessageBox.confirm(
      '确定要导出返利数据吗？导出将包含当前筛选条件下的所有数据。',
      '确认导出',
      {
        confirmButtonText: '确定导出',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }
    )
    
    // 用户确认后显示加载提示
    const loadingMessage = ElMessage({
      message: '正在导出数据，请稍候...',
      type: 'warning',
      duration: 0, // 不自动关闭
      showClose: false
    })
    
    try {
      exportLoading.value = true
      const params = { ...searchForm }
      
      const response = await exportRebates(params)
      
      // 创建下载链接
      const blob = new Blob([response as unknown as BlobPart], { 
        type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' 
      })
      const url = window.URL.createObjectURL(blob)
      const link = document.createElement('a')
      link.href = url
      link.download = `返利数据_${new Date().toISOString().split('T')[0]}.xlsx`
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
      window.URL.revokeObjectURL(url)
      
      // 关闭加载提示，显示成功消息
      loadingMessage.close()
      ElMessage.success('导出成功！文件已开始下载')
      
    } catch (exportError) {
      // 关闭加载提示
      loadingMessage.close()
      throw exportError
    }
    
  } catch (error) {
    if (error !== 'cancel') {
      console.error('导出失败:', error)
      ElMessage.error('导出失败，请重试')
    }
  } finally {
    exportLoading.value = false
  }
}

// 初始化趋势图
const initTrendChart = async () => {
  if (!trendChart.value) return
  
  const chart = echarts.init(trendChart.value)
  
  try {
    // 调用后端API获取月度统计数据 - 查询2025年的数据
    const response = await rebateApi.getRebateMonthlyStats(2025)
    console.log('月度统计API响应:', response)
    let monthlyData: any[] = []
    
    // request.ts拦截器已经返回了data字段，所以response就是数据数组
    if (response && Array.isArray(response)) {
      monthlyData = response
    }
    console.log('处理后的月度数据:', monthlyData)
    
    const months = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    
    // 处理后端返回的月度数据
    const totalRebateData = months.map((month, index) => {
      const monthIndex = index + 1
      const monthData = monthlyData.find((item: any) => item.month === monthIndex)
      return monthData ? monthData.totalAmount : 0
    })
    
    const usedRebateData = months.map((month, index) => {
      const monthIndex = index + 1
      const monthData = monthlyData.find((item: any) => item.month === monthIndex)
      return monthData ? (monthData.calculatedAmount || 0) : 0
    })
    
    const option = {
      tooltip: {
        trigger: 'axis',
        formatter: (params: any) => {
          let result = `${params[0].axisValue}<br/>`
          params.forEach((param: any) => {
            result += `${param.seriesName}: ¥${param.value.toLocaleString()}<br/>`
          })
          return result
        }
      },
      grid: {
        left: '8%',
        right: '8%',
        top: '15%',
        bottom: '15%'
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: months,
        axisLine: { show: false },
        axisTick: { show: false },
        axisLabel: {
          color: '#999',
          fontSize: 12
        }
      },
      yAxis: {
        type: 'value',
        axisLine: { show: false },
        axisTick: { show: false },
        splitLine: {
          show: true,
          lineStyle: { 
            color: '#f0f0f0',
            type: 'dashed'
          }
        },
        axisLabel: {
          color: '#999',
          fontSize: 12,
          formatter: (value: number) => `${(value / 1000).toFixed(0)}k`
        }
      },
      series: [
        {
          name: '返利合计',
          type: 'line',
          smooth: true,
          data: totalRebateData,
          itemStyle: { color: '#4CAF50' },
          lineStyle: { 
            color: '#4CAF50', 
            width: 3 
          },
          symbol: 'circle',
          symbolSize: 6,
          showSymbol: true
        },
        {
          name: '已使用返利',
          type: 'line',
          smooth: true,
          data: usedRebateData,
          itemStyle: { color: '#2196F3' },
          lineStyle: { 
            color: '#2196F3', 
            width: 3 
          },
          symbol: 'circle',
          symbolSize: 6,
          showSymbol: true
        }
      ]
    }
    chart.setOption(option)
    
  } catch (error) {
    console.error('获取趋势图数据失败:', error)
    
    // 如果API调用失败，使用当前列表数据作为备用方案
    const totalAmount = rebateList.value.reduce((sum, item) => sum + (item.rebateAmount || 0), 0)
    const calculatedAmount = rebateList.value
      .filter(item => item.calcFlag === 1)
      .reduce((sum, item) => sum + (item.rebateAmount || 0), 0)
    
    const months = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    
    const totalRebateDataFallback = months.map(() => Math.floor(totalAmount / 12))
    const usedRebateDataFallback = months.map(() => Math.floor(calculatedAmount / 12))
    
    const fallbackOption = {
      tooltip: {
        trigger: 'axis',
        formatter: (params: any) => {
          let result = `${params[0].axisValue}<br/>`
          params.forEach((param: any) => {
            result += `${param.seriesName}: ¥${param.value.toLocaleString()}<br/>`
          })
          return result
        }
      },
      grid: {
        left: '8%',
        right: '8%',
        top: '15%',
        bottom: '15%'
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: months,
        axisLine: { show: false },
        axisTick: { show: false },
        axisLabel: {
          color: '#999',
          fontSize: 12
        }
      },
      yAxis: {
        type: 'value',
        axisLine: { show: false },
        axisTick: { show: false },
        splitLine: {
          show: true,
          lineStyle: { 
            color: '#f0f0f0',
            type: 'dashed'
          }
        },
        axisLabel: {
          color: '#999',
          fontSize: 12,
          formatter: (value: number) => `${(value / 1000).toFixed(0)}k`
        }
      },
      series: [
        {
          name: '返利合计',
          type: 'line',
          smooth: true,
          data: totalRebateDataFallback,
          itemStyle: { color: '#4CAF50' },
          lineStyle: { 
            color: '#4CAF50', 
            width: 3 
          },
          symbol: 'circle',
          symbolSize: 6,
          showSymbol: true
        },
        {
          name: '已使用返利',
          type: 'line',
          smooth: true,
          data: usedRebateDataFallback,
          itemStyle: { color: '#2196F3' },
          lineStyle: { 
            color: '#2196F3', 
            width: 3 
          },
          symbol: 'circle',
          symbolSize: 6,
          showSymbol: true
        }
      ]
    }
    chart.setOption(fallbackOption)
  }
  
  // 响应式调整
  window.addEventListener('resize', () => chart.resize())
}

// 初始化饼图
const initPieChart = async () => {
  if (!pieChart.value) return
  
  const chart = echarts.init(pieChart.value)
  
  try {
    // 调用后端API获取状态统计数据
    const response = await rebateApi.getRebateStatusStats()
    console.log('状态统计API响应:', response)
    let statusData: any = { calculatedAmount: 0, unCalculatedAmount: 0 }
    
    // request.ts拦截器已经返回了data字段，所以response就是数据对象
    if (response && typeof response === 'object') {
      statusData = response
    }
    console.log('处理后的状态数据:', statusData)
    
    // 计算剩余返利和已使用返利
    const usedRebate = statusData.calculatedAmount || 0
    const remainingRebate = statusData.unCalculatedAmount || 0
    
    const option = {
      tooltip: {
        trigger: 'item',
        formatter: (params: any) => {
          return `${params.name}: ¥${params.value.toLocaleString()} (${params.percent}%)`
        }
      },
      series: [
        {
          name: '返利统计',
          type: 'pie',
          radius: ['35%', '65%'],
          center: ['50%', '50%'],
          data: [
            { 
              value: remainingRebate, 
              name: '剩余返利', 
              itemStyle: { color: '#2196F3' }
            },
            { 
              value: usedRebate, 
              name: '已使用返利', 
              itemStyle: { color: '#9CCC65' }
            }
          ],
          label: {
            show: true,
            position: 'inside',
            formatter: '{b}\n{d}%',
            fontSize: 12,
            color: '#fff',
            fontWeight: 'bold'
          },
          labelLine: {
            show: false
          },
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            },
            label: {
              fontSize: 14
            }
          }
        }
      ]
    }
    chart.setOption(option)
    
  } catch (error) {
    console.error('获取饼图数据失败:', error)
    
    // 如果API调用失败，使用当前列表数据作为备用方案
    const usedAmount = rebateList.value
      .filter(item => item.calcFlag === 1)
      .reduce((sum, item) => sum + (item.rebateAmount || 0), 0)
    const remainingAmount = rebateList.value
      .filter(item => item.calcFlag === 0)
      .reduce((sum, item) => sum + (item.rebateAmount || 0), 0)
    
    const fallbackOption = {
      tooltip: {
        trigger: 'item',
        formatter: (params: any) => {
          return `${params.name}: ¥${params.value.toLocaleString()} (${params.percent}%)`
        }
      },
      series: [
        {
          name: '返利统计',
          type: 'pie',
          radius: ['35%', '65%'],
          center: ['50%', '50%'],
          data: [
            { 
              value: remainingAmount, 
              name: '剩余返利', 
              itemStyle: { color: '#2196F3' }
            },
            { 
              value: usedAmount, 
              name: '已使用返利', 
              itemStyle: { color: '#9CCC65' }
            }
          ],
          label: {
            show: true,
            position: 'inside',
            formatter: '{b}\n{d}%',
            fontSize: 12,
            color: '#fff',
            fontWeight: 'bold'
          },
          labelLine: {
            show: false
          },
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            },
            label: {
              fontSize: 14
            }
          }
        }
      ]
    }
    chart.setOption(fallbackOption)
  }
  
  // 响应式调整
  window.addEventListener('resize', () => chart.resize())
}

// 页面加载时获取数据
onMounted(async () => {
  await getRebateList()
  setTimeout(async () => {
    await initTrendChart()
    await initPieChart()
  }, 100)
})
</script>

<style scoped lang="scss">
.rebate-page {
  padding: 20px;
  background: #f5f7fa;
  min-height: 100vh;

}

.search-section {
  background: white;
  padding: 16px 20px;
  margin-bottom: 16px;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);

  .search-form {
    .search-row {
      display: flex;
      align-items: center;
      gap: 24px;
      flex-wrap: wrap;

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

        .search-label {
          font-size: 14px;
          color: #333;
          white-space: nowrap;
          min-width: 70px;
        }
      }

      .search-actions {
        margin-left: auto;
        display: flex;
        gap: 8px;
      }
    }
  }
}

.charts-section {
  margin-bottom: 16px;

  .charts-container {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 16px;

    .chart-card {
      background: white;
      border-radius: 4px;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
      overflow: hidden;

      .chart-header {
        padding: 16px 20px 8px 20px;
        border-bottom: 1px solid #f0f0f0;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .chart-title {
          font-size: 16px;
          font-weight: 500;
          color: #333;
  margin: 0;
        }

        .chart-legend {
          display: flex;
          gap: 16px;

          .legend-item {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 12px;
            color: #666;

            .legend-dot {
              width: 8px;
              height: 8px;
              border-radius: 50%;
            }
          }
        }
      }

      &.trend-chart {
        .chart {
          height: 260px;
        }
      }

      &.pie-chart {
        .chart {
          height: 240px;
        }
      }

      .chart-content {
        padding: 12px 20px 20px 20px;
      }
    }
  }
}

.chart {
  width: 100%;
}

.table-section {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;

  .table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 20px 0 20px;
    margin-bottom: 16px;

    .table-title {
      font-size: 16px;
      font-weight: 500;
      color: #333;
    }

    .table-actions {
      display: flex;
      align-items: center;
      gap: 12px;

      .table-info {
        font-size: 12px;
        color: #999;
      }
    }
  }

  .el-table {
    border: none;

    :deep(.el-table__header) {
      th {
        background-color: #fafafa;
        border: none;
        font-weight: 500;
        color: #333;
      }
    }

    :deep(.el-table__body) {
      tr:hover > td {
        background-color: #f5f7fa;
      }

      td {
        border: none;
        border-bottom: 1px solid #f0f0f0;
      }
    }
  }

  .pagination-wrapper {
  display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    border-top: 1px solid #f0f0f0;
    background: #fafafa;

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

    .pagination-jump {
      display: flex;
      align-items: center;
      font-size: 14px;
      color: #666;
    }
  }
}

.amount-text {
  color: #f56c6c;
  font-weight: 500;
}

.rebate-detail {
  max-height: 600px;
  overflow-y: auto;
}

// 响应式设计
@media (max-width: 1200px) {
  .charts-container {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .rebate-page {
    padding: 16px;
  }

  .search-form .form-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;

    .form-actions {
      margin-left: 0;
      margin-top: 12px;
    }
  }

}
</style>