<template>
  <div>
    <!-- 搜索区域 -->
    <div class="gva-search-box">
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item label="用户名">
          <el-input v-model="searchForm.userName" placeholder="请输入用户名" clearable />
        </el-form-item>
        <el-form-item label="提现类型">
          <el-select v-model="searchForm.withType" placeholder="请选择提现类型" clearable>
            <el-option label="微信" :value="1" />
            <el-option label="支付宝" :value="2" />
            <el-option label="银行卡" :value="3" />
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="searchForm.status" placeholder="请选择状态" clearable>
            <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="提现时间">
          <el-date-picker
            v-model="searchForm.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            clearable
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchData">查询</el-button>
          <el-button @click="resetData">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 统计信息 -->
    <div class="stats-box">
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="stat-item">
            <div class="stat-value">{{ stats.total }}</div>
            <div class="stat-label">总申请数</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="stat-item pending">
            <div class="stat-value">{{ stats.pending }}</div>
            <div class="stat-label">待处理</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="stat-item completed">
            <div class="stat-value">{{ stats.completed }}</div>
            <div class="stat-label">已完成</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="stat-item rejected">
            <div class="stat-value">{{ stats.rejected }}</div>
            <div class="stat-label">已拒绝</div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 表格区域 -->
    <div class="gva-table-box">
      <el-table
        :data="tableData"
        v-loading="tableLoading"
        style="width: 100%"
        class="gva-table"
        stripe
      >
        <el-table-column prop="ID" label="ID" width="80" />
        <el-table-column prop="userName" label="用户名" width="120" />
        <el-table-column prop="withType" label="提现类型" width="100">
          <template #default="{ row }">
            <el-tag :type="getWithTypeTagType(row.withType)">
              {{ getWithTypeText(row.withType) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="amount" label="申请金额" width="120">
          <template #default="{ row }">
            <span style="color: #f56c6c; font-weight: bold;">¥{{ row.amount }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="realAmount" label="实际到账" width="120">
          <template #default="{ row }">
            <span style="color: #67c23a; font-weight: bold;">
              {{ row.realAmount > 0 ? `¥${row.realAmount}` : '-' }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template #default="{ row }">
            <el-tag :type="getStatusTagType(row.status)">
              {{ getStatusText(row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="accountInfo" label="收款信息" width="120">
          <template #default="{ row }">
            <el-button type="text" @click="viewAccountInfo(row)">查看</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="CreatedAt" label="申请时间" width="180">
          <template #default="{ row }">
            {{ formatDate(row.CreatedAt) }}
          </template>
        </el-table-column>
        <el-table-column prop="arriveTime" label="到账时间" width="180">
          <template #default="{ row }">
            {{ row.arriveTime ? formatDate(row.arriveTime) : '-' }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" fixed="right">
          <template #default="{ row }">
            <el-button 
              v-if="row.status === 1" 
              type="text" 
              @click="handleApprove(row)"
            >
              通过
            </el-button>
            <el-button 
              v-if="row.status === 1" 
              type="text" 
              @click="handleReject(row)" 
              style="color: #f56c6c"
            >
              拒绝
            </el-button>
            <el-button type="text" @click="viewDetail(row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <el-pagination
        v-model:current-page="queryParams.page"
        v-model:page-size="queryParams.pageSize"
        :page-sizes="[10, 20, 50, 100]"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        class="gva-pagination"
      />
    </div>

    <!-- 审核弹窗 -->
    <el-dialog
      v-model="approveDialogVisible"
      :title="approveType === 'approve' ? '通过提现申请' : '拒绝提现申请'"
      width="500px"
      :before-close="handleApproveClose"
    >
      <el-form
        ref="approveFormRef"
        :model="approveForm"
        :rules="approveRules"
        label-width="120px"
      >
        <el-form-item label="用户名">
          <span>{{ currentWithdraw.userName }}</span>
        </el-form-item>
        <el-form-item label="申请金额">
          <span style="color: #f56c6c; font-weight: bold;">¥{{ currentWithdraw.amount }}</span>
        </el-form-item>
        <el-form-item v-if="approveType === 'approve'" label="实际到账金额" prop="realAmount">
          <el-input-number 
            v-model="approveForm.realAmount" 
            :precision="2"
            :step="0.01"
            :min="0"
            :max="currentWithdraw.amount"
            placeholder="请输入实际到账金额"
            style="width: 100%"
          />
          <div style="font-size: 12px; color: #999; margin-top: 5px;">
            可扣除手续费等费用，不能超过申请金额
          </div>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input 
            v-model="approveForm.remark" 
            type="textarea" 
            :rows="3"
            :placeholder="approveType === 'approve' ? '请输入通过备注（可选）' : '请输入拒绝原因'"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleApproveClose">取消</el-button>
          <el-button 
            type="primary" 
            @click="submitApprove"
            :class="approveType === 'reject' ? 'reject-btn' : ''"
          >
            {{ approveType === 'approve' ? '确认通过' : '确认拒绝' }}
          </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 收款信息弹窗 -->
    <el-dialog
      v-model="accountInfoDialogVisible"
      title="收款信息"
      width="600px"
      :before-close="handleAccountInfoClose"
    >
      <div class="account-info-content">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="提现类型">
            <el-tag :type="getWithTypeTagType(currentWithdraw.withType)">
              {{ getWithTypeText(currentWithdraw.withType) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="申请金额">
            <span style="color: #f56c6c; font-weight: bold;">¥{{ currentWithdraw.amount }}</span>
          </el-descriptions-item>
        </el-descriptions>
        
        <div style="margin-top: 20px;">
          <h4>收款信息：</h4>
          <div v-if="isImageUrl(currentWithdraw.accountInfo)" class="image-info">
            <el-image
              :src="currentWithdraw.accountInfo"
              :preview-src-list="[currentWithdraw.accountInfo]"
              fit="contain"
              style="max-width: 300px; max-height: 300px;"
            />
            <p style="margin-top: 10px; color: #666;">{{ getWithTypeText(currentWithdraw.withType) }}收款码</p>
          </div>
          <div v-else class="text-info">
            <el-input
              :value="currentWithdraw.accountInfo"
              readonly
              type="textarea"
              :rows="3"
            />
            <p style="margin-top: 10px; color: #666;">银行卡号或账户信息</p>
          </div>
        </div>
      </div>
    </el-dialog>

    <!-- 详情弹窗 -->
    <el-dialog
      v-model="detailDialogVisible"
      title="提现详情"
      width="600px"
      :before-close="handleDetailClose"
    >
      <el-descriptions :column="2" border>
        <el-descriptions-item label="提现ID">{{ currentWithdraw.ID }}</el-descriptions-item>
        <el-descriptions-item label="用户名">{{ currentWithdraw.userName }}</el-descriptions-item>
        <el-descriptions-item label="提现类型">
          <el-tag :type="getWithTypeTagType(currentWithdraw.withType)">
            {{ getWithTypeText(currentWithdraw.withType) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="申请金额">
          <span style="color: #f56c6c; font-weight: bold;">¥{{ currentWithdraw.amount }}</span>
        </el-descriptions-item>
        <el-descriptions-item label="实际到账">
          <span style="color: #67c23a; font-weight: bold;">
            {{ currentWithdraw.realAmount > 0 ? `¥${currentWithdraw.realAmount}` : '-' }}
          </span>
        </el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag :type="getStatusTagType(currentWithdraw.status)">
            {{ getStatusText(currentWithdraw.status) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="申请时间">{{ formatDate(currentWithdraw.CreatedAt) }}</el-descriptions-item>
        <el-descriptions-item label="到账时间">
          {{ currentWithdraw.arriveTime ? formatDate(currentWithdraw.arriveTime) : '-' }}
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>

<script setup>
import { list, update } from '@/api/user/with.js'
import { ref, onMounted, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

defineOptions({
  name: 'WithdrawManagement'
})

// 表格相关数据
const tableLoading = ref(false)
const tableData = ref([])
const queryParams = ref({
  page: 1,
  pageSize: 10
})
const total = ref(0)

// 搜索表单
const searchForm = ref({
  userName: '',
  withType: '',
  status: '',
  dateRange: []
})

// 统计数据
const stats = computed(() => {
  const pending = tableData.value.filter(item => item.status === 1).length
  const completed = tableData.value.filter(item => item.status === 2).length
  const rejected = tableData.value.filter(item => item.status === 3).length
  
  return {
    total: total.value,
    pending,
    completed,
    rejected
  }
})

// 审核弹窗
const approveDialogVisible = ref(false)
const approveFormRef = ref(null)
const approveType = ref('approve') // 'approve' 或 'reject'
const currentWithdraw = ref({})
const approveForm = ref({
  id: '',
  status: 2,
  realAmount: 0,
  remark: ''
})

// 收款信息弹窗
const accountInfoDialogVisible = ref(false)

// 详情弹窗
const detailDialogVisible = ref(false)

// 表单验证规则
const approveRules = {
  realAmount: [
    { required: true, message: '请输入实际到账金额', trigger: 'blur' },
    { type: 'number', min: 0, message: '金额不能小于0', trigger: 'blur' }
  ],
  remark: [
    { 
      validator: (rule, value, callback) => {
        if (approveType.value === 'reject' && !value) {
          callback(new Error('拒绝时必须填写拒绝原因'))
        } else {
          callback()
        }
      }, 
      trigger: 'blur' 
    }
  ]
}

// 格式化日期
const formatDate = (dateStr) => {
  if (!dateStr) return '-'
  return new Date(dateStr).toLocaleString('zh-CN')
}

// 获取提现类型文本
const getWithTypeText = (type) => {
  const typeMap = {
    1: '微信',
    2: '支付宝',
    3: '银行卡'
  }
  return typeMap[type] || '未知'
}

// 获取提现类型标签类型
const getWithTypeTagType = (type) => {
  const typeMap = {
    1: 'success',
    2: 'primary',
    3: 'warning'
  }
  return typeMap[type] || 'info'
}

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    1: '待处理',
    2: '已完成',
    3: '已拒绝',
    4: '已取消'
  }
  return statusMap[status] || '未知'
}

// 获取状态标签类型
const getStatusTagType = (status) => {
  const typeMap = {
    1: 'warning',
    2: 'success',
    3: 'danger',
    4: 'info'
  }
  return typeMap[status] || 'info'
}

// 判断是否为图片URL
const isImageUrl = (url) => {
  if (!url) return false
  const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.webp']
  return imageExtensions.some(ext => url.toLowerCase().includes(ext))
}

// 搜索数据
const searchData = () => {
  queryParams.value.page = 1
  getList()
}

// 重置搜索
const resetData = () => {
  searchForm.value = {
    userName: '',
    withType: '',
    status: '',
    dateRange: []
  }
  queryParams.value.page = 1
  getList()
}

// 分页处理
const handleSizeChange = (size) => {
  queryParams.value.pageSize = size
  getList()
}

const handleCurrentChange = (page) => {
  queryParams.value.page = page
  getList()
}

// 获取提现列表
async function getList() {
  tableLoading.value = true
  try {
    const params = {
      ...queryParams.value,
      ...searchForm.value
    }
    
    // 处理日期范围
    if (searchForm.value.dateRange && searchForm.value.dateRange.length === 2) {
      params.startTime = searchForm.value.dateRange[0]
      params.endTime = searchForm.value.dateRange[1]
    }
    delete params.dateRange
    
    const res = await list(params)
    if (res.code === 0) {
      tableData.value = res.data.list || []
      total.value = res.data.total || 0
    } else {
      ElMessage.error(res.msg || '获取数据失败')
    }
  } catch (error) {
    console.error('获取提现列表失败:', error)
    ElMessage.error('获取数据失败')
  } finally {
    tableLoading.value = false
  }
}

// 通过申请
const handleApprove = (row) => {
  currentWithdraw.value = row
  approveType.value = 'approve'
  approveForm.value = {
    id: row.ID,
    status: 2,
    realAmount: row.amount,
    remark: ''
  }
  approveDialogVisible.value = true
}

// 拒绝申请
const handleReject = (row) => {
  currentWithdraw.value = row
  approveType.value = 'reject'
  approveForm.value = {
    id: row.ID,
    status: 3,
    realAmount: 0,
    remark: ''
  }
  approveDialogVisible.value = true
}

// 查看收款信息
const viewAccountInfo = (row) => {
  currentWithdraw.value = row
  accountInfoDialogVisible.value = true
}

// 查看详情
const viewDetail = (row) => {
  currentWithdraw.value = row
  detailDialogVisible.value = true
}

// 关闭审核弹窗
const handleApproveClose = () => {
  approveDialogVisible.value = false
  approveFormRef.value?.resetFields()
}

// 关闭收款信息弹窗
const handleAccountInfoClose = () => {
  accountInfoDialogVisible.value = false
}

// 关闭详情弹窗
const handleDetailClose = () => {
  detailDialogVisible.value = false
}

// 提交审核
const submitApprove = async () => {
  if (!approveFormRef.value) return
  
  await approveFormRef.value.validate(async (valid) => {
    if (valid) {
      try {
        const res = await update(approveForm.value)
        if (res.code === 0) {
          ElMessage.success(approveType.value === 'approve' ? '审核通过成功' : '拒绝成功')
          handleApproveClose()
          getList()
        } else {
          ElMessage.error(res.msg || '操作失败')
        }
      } catch (error) {
        ElMessage.error('操作失败')
      }
    }
  })
}

// 页面初始化
onMounted(() => {
  getList()
})
</script>

<style lang="scss" scoped>
.gva-search-box {
  padding: 20px;
  background: #fff;
  border-radius: 4px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.stats-box {
  padding: 20px;
  background: #fff;
  border-radius: 4px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

  .stat-item {
    text-align: center;
    padding: 20px;
    border-radius: 8px;
    background: #f8f9fa;
    
    &.pending {
      background: #fef9e7;
      color: #e6a23c;
    }
    
    &.completed {
      background: #f0f9ff;
      color: #67c23a;
    }
    
    &.rejected {
      background: #fef2f2;
      color: #f56c6c;
    }

    .stat-value {
      font-size: 28px;
      font-weight: bold;
      margin-bottom: 5px;
    }

    .stat-label {
      font-size: 14px;
      opacity: 0.8;
    }
  }
}

.gva-table-box {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.gva-table {
  :deep(.el-table__header) {
    background-color: #f5f7fa;
  }
  
  :deep(.el-table__row:hover > td) {
    background-color: #f5f7fa !important;
  }
}

.gva-pagination {
  margin-top: 20px;
  text-align: right;
}

.demo-form-inline {
  .el-form-item {
    margin-right: 20px;
  }
}

.account-info-content {
  .image-info {
    text-align: center;
    
    .el-image {
      border: 1px solid #dcdfe6;
      border-radius: 4px;
    }
  }
  
  .text-info {
    .el-textarea {
      :deep(.el-textarea__inner) {
        background-color: #f5f7fa;
      }
    }
  }
}

.reject-btn {
  background-color: #f56c6c !important;
  border-color: #f56c6c !important;
  
  &:hover {
    background-color: #f78989 !important;
    border-color: #f78989 !important;
  }
}
</style>