<template>
  <div class="transfers-page">
    <!-- 导航栏 -->
    <nav class="navbar">
      <div class="nav-center">
        <h1 class="nav-title">转账管理</h1>
      </div>
      <div class="nav-right">
        <!-- 移除发起转账按钮 -->
      </div>
    </nav>

    <!-- 账户信息 -->
    <div class="account-info">
      <el-card>
        <div class="account-balance">
          <div class="balance-item">
            <span class="label">账户余额：</span>
            <span class="amount">¥{{ accountInfo.balance || '0.00' }}</span>
          </div>
          <div class="balance-item">
            <span class="label">账户类型：</span>
            <span class="type">{{ accountInfo.account_type === 'public' ? '公户' : '用户账户' }}</span>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 待转账 -->
    <div class="pending-transfers" v-if="pendingAllocations.length > 0 || pendingTransfers.length > 0">
      <el-card>
        <template #header>
          <div class="card-header">
            <span>待转账</span>
            <el-badge :value="pendingAllocations.length + pendingTransfers.length" class="badge" />
          </div>
        </template>
        <div class="transfer-list">
          <!-- 我要转给别人的分配 -->
          <div 
            v-for="allocation in pendingAllocations" 
            :key="'allocation-' + allocation.id"
            class="transfer-item pending"
            :class="{ 'timeout-item': !allocation.can_transfer }"
          >
            <div class="transfer-info">
              <div class="transfer-header">
                <span class="from-user">我</span>
                <el-icon class="arrow"><Right /></el-icon>
                <span class="to-user">{{ allocation.to_user_name }}</span>
                <span class="amount">¥{{ allocation.amount }}</span>
                <el-tag 
                  :type="getOrderStatusType(allocation.order_status)" 
                  size="small"
                >
                  {{ getOrderStatusText(allocation.order_status) }}
                </el-tag>
              </div>
              <div class="transfer-details">
                <p class="description">匹配订单 {{ allocation.matching_order_id }} - 第{{ allocation.cycle_number }}轮</p>
                <p class="time">创建时间：{{ formatTime(allocation.created_at) }}</p>
                <div class="deadline-info">
                  <span class="deadline-label">转账截止：</span>
                  <span class="deadline-time" :class="allocation.time_status">
                    {{ formatTime(allocation.deadline) }}
                  </span>
                  <span class="time-left" :class="allocation.time_status">
                    ({{ allocation.time_left }})
                  </span>
                </div>
                <!-- 超时警告 -->
                <div v-if="!allocation.can_transfer" class="timeout-warning">
                  <el-icon><Warning /></el-icon>
                  <span class="warning-text">{{ allocation.timeout_reason }}</span>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 别人转给我的进行中转账 -->
          <div 
            v-for="transfer in pendingTransfers" 
            :key="'transfer-' + transfer.id"
            class="transfer-item pending"
          >
            <div class="transfer-info">
              <div class="transfer-header">
                <span class="from-user">{{ transfer.from_real_name || transfer.from_username }}</span>
                <el-icon class="arrow"><Right /></el-icon>
                <span class="to-user">我</span>
                <span class="amount">¥{{ transfer.amount }}</span>
                <el-tag type="warning" size="small">
                  进行中
                </el-tag>
              </div>
              <div class="transfer-details">
                <p class="description">{{ transfer.description || '转账' }}</p>
                <p class="time">创建时间：{{ formatTime(transfer.created_at) }}</p>
                <p class="type">类型：{{ getTransferTypeText(transfer.transfer_type) }}</p>
              </div>
            </div>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 转账记录 -->
    <div class="transfer-history">
      <el-card>
        <template #header>
          <div class="card-header">
            <span>转账记录</span>
            <el-select v-model="statusFilter" placeholder="状态筛选" size="small" style="width: 120px">
              <el-option label="全部" value="" />
              <el-option label="待确认" value="pending" />
              <el-option label="已确认" value="confirmed" />
              <el-option label="已拒绝" value="rejected" />
            </el-select>
          </div>
        </template>
        
        <div class="transfer-list" v-loading="loading">
          <div 
            v-for="transfer in transferHistory" 
            :key="transfer.id"
            class="transfer-item"
            :class="transfer.status"
          >
            <div class="transfer-info">
              <div class="transfer-header">
                <span class="from-user">
                  {{ transfer.from_user_id === userStore.user.id ? '我' : (transfer.from_real_name || transfer.from_username) }}
                </span>
                <el-icon class="arrow"><Right /></el-icon>
                <span class="to-user">
                  {{ transfer.to_user_id === userStore.user.id ? '我' : (transfer.to_real_name || transfer.to_username) }}
                </span>
                <span class="amount">¥{{ transfer.amount }}</span>
                <el-tag 
                  :type="getStatusType(transfer.status)" 
                  size="small"
                >
                  {{ getStatusText(transfer.status) }}
                </el-tag>
              </div>
              <div class="transfer-details">
                <p class="description">{{ transfer.description }}</p>
                <p class="time">{{ formatTime(transfer.created_at) }}</p>
                <p class="type">类型：{{ getTransferTypeText(transfer.transfer_type) }}</p>
                <div v-if="transfer.voucher_url" class="voucher">
                  <el-image 
                    :src="formatImageUrl(transfer.voucher_url)" 
                    :preview-src-list="[formatImageUrl(transfer.voucher_url)]"
                    class="voucher-image"
                    fit="cover"
                  >
                    <template #error>
                      <div class="image-slot">
                        <el-icon><Picture /></el-icon>
                      </div>
                    </template>
                  </el-image>
                </div>
                <!-- 确认收款操作按钮 -->
                <div v-if="transfer.status === 'confirmed' && transfer.to_user_id === userStore.user.id" class="transfer-actions">
                  <el-button 
                    type="success" 
                    size="small"
                    @click="confirmReceived(transfer.id)"
                    :loading="confirmLoading"
                  >
                    确认收款
                  </el-button>
                  <el-button 
                    type="warning" 
                    size="small"
                    @click="confirmNotReceived(transfer.id)"
                    :loading="confirmLoading"
                  >
                    未收到款
                  </el-button>
                </div>
              </div>
            </div>
          </div>
          
          <div v-if="transferHistory.length === 0" class="empty-state">
            <el-empty description="暂无转账记录" />
          </div>
        </div>
        
        <!-- 分页 -->
        <div class="pagination" v-if="pagination.total > 0">
          <el-pagination
            v-model:current-page="pagination.page"
            v-model:page-size="pagination.limit"
            :page-sizes="[10, 20, 50]"
            :total="pagination.total"
            :layout="paginationLayout"
            :small="isMobile"
            @size-change="loadTransferHistory"
            @current-change="loadTransferHistory"
          />
        </div>
      </el-card>
    </div>

    <!-- 发起转账对话框 -->
    <el-dialog 
      v-model="showCreateTransfer" 
      title="发起转账" 
      width="90%"
      :style="{ maxWidth: '500px' }"
      @close="resetTransferForm"
    >
      <el-form 
        ref="transferFormRef" 
        :model="transferForm" 
        :rules="transferRules" 
        label-width="100px"
      >
        <el-form-item label="收款用户" prop="to_user_id">
          <el-select 
            v-model="transferForm.to_user_id" 
            placeholder="请选择收款用户"
            filterable
            style="width: 100%"
          >
            <el-option 
              v-for="user in userList" 
              :key="user.id" 
              :label="`${user.real_name || user.username} (${user.username})`" 
              :value="user.id"
            />
          </el-select>
        </el-form-item>
        
        <el-form-item label="转账金额" prop="amount">
          <el-input 
            v-model="transferForm.amount" 
            placeholder="请输入转账金额"
            type="number"
            step="0.01"
          >
            <template #prepend>¥</template>
          </el-input>
        </el-form-item>
        
        <el-form-item label="转账类型" prop="transfer_type">
          <el-select v-model="transferForm.transfer_type" placeholder="请选择转账类型">
            <el-option label="普通转账" value="user_to_user" />
            <el-option label="初始转账" value="initial" />
            <el-option label="返还转账" value="return" />
          </el-select>
        </el-form-item>
        
        <el-form-item label="转账说明" prop="description">
          <el-input 
            v-model="transferForm.description" 
            type="textarea" 
            placeholder="请输入转账说明"
            :rows="3"
          />
        </el-form-item>
        
        <el-form-item label="转账凭证">
          <el-upload
            ref="uploadRef"
            :action="uploadUrl"
            :headers="uploadHeaders"
            :before-upload="beforeUpload"
            :on-success="handleUploadSuccess"
            :on-error="handleUploadError"
            :show-file-list="false"
            accept="image/*"
          >
            <el-button size="small" type="primary">上传凭证</el-button>
          </el-upload>
          <div v-if="transferForm.voucher" class="upload-preview">
            <img :src="formatImageUrl(transferForm.voucher)" alt="转账凭证" />
          </div>
        </el-form-item>
      </el-form>
      
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showCreateTransfer = false">取消</el-button>
          <el-button 
            type="primary" 
            @click="submitTransfer"
            :loading="submitLoading"
          >
            提交转账
          </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 转账凭证查看对话框 -->
    <el-dialog 
      v-model="showVoucherDialog" 
      title="转账凭证" 
      width="90%"
      :style="{ maxWidth: '600px' }"
    >
      <div class="voucher-dialog-content">
        <div class="transfer-info">
          <h4>转账信息</h4>
          <div class="info-row">
            <span class="label">转账金额：</span>
            <span class="value amount">¥{{ currentTransfer.amount }}</span>
          </div>
          <div class="info-row">
            <span class="label">转账说明：</span>
            <span class="value">{{ currentTransfer.description }}</span>
          </div>
          <div class="info-row">
            <span class="label">转账时间：</span>
            <span class="value">{{ formatTime(currentTransfer.created_at) }}</span>
          </div>
          <div class="info-row">
            <span class="label">转账类型：</span>
            <span class="value">{{ getTransferTypeText(currentTransfer.transfer_type) }}</span>
          </div>
        </div>
        
        <div class="voucher-section" v-if="currentTransfer.voucher_url">
          <h4>转账凭证</h4>
          <div class="voucher-image-container">
            <el-image 
              :src="formatImageUrl(currentTransfer.voucher_url)" 
              :preview-src-list="[formatImageUrl(currentTransfer.voucher_url)]"
              class="voucher-preview"
              fit="contain"
            >
              <template #error>
                <div class="image-slot">
                  <el-icon><Picture /></el-icon>
                  <p>凭证加载失败</p>
                </div>
              </template>
            </el-image>
          </div>
        </div>
        
        <div v-else class="no-voucher">
          <el-icon><Picture /></el-icon>
          <p>暂无转账凭证</p>
        </div>
      </div>
      
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showVoucherDialog = false">取消</el-button>
          <el-button 
            type="success" 
            @click="doConfirmReceived"
            :loading="confirmLoading"
          >
            确认收款
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, onUnmounted, watch, computed } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ArrowLeft, Plus, Right, Picture, Warning } from '@element-plus/icons-vue'
import api, { transferAPI } from '@/utils/api'
import { uploadURL, getImageUrl, getUploadConfig } from '@/config'

const router = useRouter()
const userStore = useUserStore()

// 响应式数据
const loading = ref(false)
const submitLoading = ref(false)
const confirmLoading = ref(false)
const showCreateTransfer = ref(false)
const showVoucherDialog = ref(false)
const statusFilter = ref('')
const currentTransfer = ref({})

const accountInfo = ref({})
const pendingTransfers = ref([])
const pendingAllocations = ref([])
const transferHistory = ref([])
const userList = ref([])

const pagination = reactive({
  page: 1,
  limit: 10,
  total: 0
})

const transferForm = reactive({
  to_user_id: '',
  amount: '',
  transfer_type: 'user_to_user',
  description: '',
  voucher: ''
})

const transferFormRef = ref()
const uploadRef = ref()

// 移动端检测和分页布局
const windowWidth = ref(window.innerWidth)

const isMobile = computed(() => {
  return windowWidth.value <= 768
})

const paginationLayout = computed(() => {
  if (windowWidth.value <= 480) {
      return 'prev, pager, next'
    } else if (windowWidth.value <= 768) {
      return 'total, prev, pager, next'
  } else {
    return 'total, sizes, prev, pager, next, jumper'
  }
})

// 窗口大小变化监听
const handleResize = () => {
  windowWidth.value = window.innerWidth
}

// 上传配置
const uploadUrl = ref(uploadURL)
const uploadHeaders = computed(() => getUploadConfig().headers)

// 表单验证规则
const transferRules = {
  to_user_id: [
    { required: true, message: '请选择收款用户', trigger: 'change' }
  ],
  amount: [
    { required: true, message: '请输入转账金额', trigger: 'blur' },
    { pattern: /^\d+(\.\d{1,2})?$/, message: '请输入有效的金额', trigger: 'blur' }
  ],
  transfer_type: [
    { required: true, message: '请选择转账类型', trigger: 'change' }
  ]
}

// 生命周期
onMounted(() => {
  loadAccountInfo()
  loadPendingTransfers()
  loadPendingAllocations()
  loadTransferHistory()
  loadUserList()
  
  // 添加窗口大小变化监听
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  // 移除窗口大小变化监听
  window.removeEventListener('resize', handleResize)
})

// 监听状态筛选
watch(statusFilter, () => {
  pagination.page = 1
  loadTransferHistory()
})

// 方法
const loadAccountInfo = async () => {
  try {
    const response = await api.get(`/transfers/account/${userStore.user.id}`)
    if (response.data.success) {
      accountInfo.value = response.data.data
    }
  } catch (error) {
    console.error('加载账户信息失败:', error)
  }
}

const loadPendingTransfers = async () => {
  try {
    const response = await api.get('/transfers/pending')
    if (response.data.success) {
      pendingTransfers.value = response.data.data
    }
  } catch (error) {
    console.error('加载待确认转账失败:', error)
  }
}

/**
 * 加载用户待处理的分配
 */
const loadPendingAllocations = async () => {
  try {
    const response = await api.get('/matching/pending-allocations')
    if (response.data.success) {
      pendingAllocations.value = response.data.data || []
    }
  } catch (error) {
    console.error('加载待处理分配失败:', error)
    ElMessage.error('加载待处理分配失败')
  }
}

const loadTransferHistory = async () => {
  try {
    loading.value = true
    const params = {
      page: pagination.page,
      limit: pagination.limit
    }
    if (statusFilter.value) {
      params.status = statusFilter.value
    }
    
    const response = await api.get(`/transfers/user/${userStore.user.id}`, { params })
    if (response.data.success) {
      transferHistory.value = response.data.data.transfers
      Object.assign(pagination, response.data.data.pagination)
    }
  } catch (error) {
    console.error('加载转账记录失败:', error)
    ElMessage.error('加载转账记录失败')
  } finally {
    loading.value = false
  }
}

const loadUserList = async () => {
  try {
    const response = await api.get('/users/for-transfer')
    if (response.data.success) {
      userList.value = response.data.data
    }
  } catch (error) {
    console.error('加载用户列表失败:', error)
    ElMessage.error('加载用户列表失败')
  }
}

/**
 * 获取订单状态对应的标签类型
 */
const getOrderStatusType = (status) => {
  const statusMap = {
    'matching': 'warning',
    'completed': 'success',
    'failed': 'danger',
    'cancelled': 'info'
  }
  return statusMap[status] || 'info'
}

/**
 * 获取订单状态文本
 */
const getOrderStatusText = (status) => {
  const statusMap = {
    'matching': '进行中',
    'completed': '已完成',
    'failed': '已失败',
    'cancelled': '已取消'
  }
  return statusMap[status] || '未知状态'
}

/**
 * 获取转账类型文本
 */
const getTransferTypeText = (type) => {
  const typeMap = {
    'user_to_user': '用户转账',
    'initial': '初始转账',
    'return': '返还转账',
    'system_to_user': '系统转账',
    'user_to_system': '系统回收'
  }
  return typeMap[type] || '未知类型'
}



const confirmTransfer = async (transferId, action) => {
  try {
    const actionText = action === 'confirm' ? '确认' : '拒绝'
    await ElMessageBox.confirm(
      `确定要${actionText}这笔转账吗？`,
      '确认操作',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    confirmLoading.value = true
    const response = await api.post(`/transfers/confirm/${transferId}`, { action })
    
    if (response.data.success) {
      ElMessage.success(response.data.message)
      loadPendingTransfers()
      loadTransferHistory()
      loadAccountInfo()
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('确认转账失败:', error)
      ElMessage.error(error.response?.data?.message || '操作失败')
    }
  } finally {
    confirmLoading.value = false
  }
}

const submitTransfer = async () => {
  try {
    const valid = await transferFormRef.value.validate()
    if (!valid) return
    
    submitLoading.value = true
    
    const formData = new FormData()
    formData.append('to_user_id', transferForm.to_user_id)
    formData.append('amount', transferForm.amount)
    formData.append('transfer_type', transferForm.transfer_type)
    formData.append('description', transferForm.description)
    
    if (transferForm.voucher) {
      // 如果有上传的凭证，需要处理文件
      const fileInput = uploadRef.value?.$el.querySelector('input[type="file"]')
      if (fileInput?.files[0]) {
        formData.append('voucher', fileInput.files[0])
      }
    }
    
    const response = await api.post('/transfers/create', formData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    })
    
    if (response.data.success) {
      ElMessage.success(response.data.message)
      showCreateTransfer.value = false
      resetTransferForm()
      loadTransferHistory()
    }
  } catch (error) {
    console.error('提交转账失败:', error)
    ElMessage.error(error.response?.data?.message || '提交失败')
  } finally {
    submitLoading.value = false
  }
}

const resetTransferForm = () => {
  Object.assign(transferForm, {
    to_user_id: '',
    amount: '',
    transfer_type: 'user_to_user',
    description: '',
    voucher: ''
  })
  transferFormRef.value?.resetFields()
}

// 文件上传处理
const beforeUpload = (file) => {
  const isImage = file.type.startsWith('image/')
  const isLt5M = file.size / 1024 / 1024 < 5
  
  if (!isImage) {
    ElMessage.error('只能上传图片文件!')
    return false
  }
  if (!isLt5M) {
    ElMessage.error('图片大小不能超过 5MB!')
    return false
  }
  return true
}

/**
 * 处理文件上传成功回调
 * @param {Object} response - 上传接口返回的响应数据
 */
const handleUploadSuccess = (response) => {
  if (response.success) {
    // 使用工具函数将相对路径转换为完整的服务器地址
    transferForm.voucher = formatImageUrl(response.url)
    ElMessage.success('上传成功')
  } else {
    ElMessage.error(response.message || '上传失败')
  }
}

const handleUploadError = (error) => {
  console.error('上传错误:', error)
  ElMessage.error('上传失败，请重试')
}

// 工具方法
/**
 * 格式化时间显示
 * @param {string} time - 时间字符串
 * @returns {string} 格式化后的时间
 */
const formatTime = (time) => {
  return new Date(time).toLocaleString('zh-CN')
}

/**
 * 格式化图片URL
 * @param {string} url - 相对路径或完整URL
 * @returns {string} 处理后的图片URL
 */
const formatImageUrl = (url) => {
  return getImageUrl(url)
}

const getStatusType = (status) => {
  const types = {
    pending: 'warning',
    confirmed: 'success',
    rejected: 'danger',
    received: 'success',
    not_received: 'danger'
  }
  return types[status] || 'info'
}

const getStatusText = (status) => {
  const texts = {
    pending: '待确认',
    confirmed: '已确认',
    rejected: '已拒绝',
    received: '已收款',
    not_received: '未收到款'
  }
  return texts[status] || '未知'
}


/**
 * 显示转账凭证并确认收款
 * @param {number} transferId - 转账ID
 */
const confirmReceived = async (transferId) => {
  try {
    // 找到对应的转账记录
    const transfer = transferHistory.value.find(t => t.id === transferId)
    if (!transfer) {
      ElMessage.error('转账记录不存在')
      return
    }
    
    // 设置当前转账信息并显示凭证对话框
    currentTransfer.value = transfer
    showVoucherDialog.value = true
  } catch (error) {
    console.error('显示转账凭证失败:', error)
    ElMessage.error('操作失败')
  }
}

/**
 * 执行确认收款操作
 */
const doConfirmReceived = async () => {
  try {
    await ElMessageBox.confirm(
      '确定已收到款项吗？',
      '确认收款',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    confirmLoading.value = true
    const response = await transferAPI.confirmReceived(currentTransfer.value.id)
    
    if (response.data.success) {
      ElMessage.success(response.data.message)
      showVoucherDialog.value = false
      loadTransferHistory()
      loadAccountInfo()
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('确认收款失败:', error)
      ElMessage.error(error.response?.data?.message || '操作失败')
    }
  } finally {
    confirmLoading.value = false
  }
}

const confirmNotReceived = async (transferId) => {
  try {
    await ElMessageBox.confirm(
      '确定未收到款项吗？',
      '确认未收款',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    confirmLoading.value = true
    const response = await transferAPI.confirmNotReceived(transferId)
    
    if (response.data.success) {
      ElMessage.success(response.data.message)
      loadTransferHistory()
      loadAccountInfo()
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('确认未收款失败:', error)
      ElMessage.error(error.response?.data?.message || '操作失败')
    }
  } finally {
    confirmLoading.value = false
  }
}
</script>

<style lang="scss" scoped>
.transfers-page {
  min-height: 100vh;
  background: #f5f7fa;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  height: 60px;
  background: white;
  border-bottom: 1px solid #ebeef5;
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-title {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
}

.back-btn {
  color: #409eff;
}

.account-info {
  margin: 20px;
}

.account-balance {
  display: flex;
  gap: 30px;
}

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

.balance-item .label {
  color: #666;
}

.balance-item .amount {
  font-size: 24px;
  font-weight: bold;
  color: #409eff;
}

.balance-item .type {
  color: #909399;
}

.pending-transfers,
.transfer-history {
  margin: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.badge {
  margin-left: 10px;
}

.transfer-list {
  max-height: 400px;
  overflow-y: auto;
}

.transfer-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  border: 1px solid #ebeef5;
  border-radius: 8px;
  margin-bottom: 10px;
  background: white;
  overflow: hidden;
  word-wrap: break-word;
}

.transfer-item.pending {
  border-color: #e6a23c;
  background: #fdf6ec;
}

.transfer-item.confirmed {
  border-color: #67c23a;
  background: #f0f9ff;
}

.transfer-item.rejected {
  border-color: #f56c6c;
  background: #fef0f0;
}

.transfer-info {
  flex: 1;
}

.transfer-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.from-user,
.to-user {
  font-weight: 500;
}

.arrow {
  color: #909399;
}

.amount {
  font-size: 18px;
  font-weight: bold;
  color: #409eff;
  margin-left: auto;
}

.transfer-details {
  color: #666;
  font-size: 14px;
}

.transfer-details p {
  margin: 4px 0;
}

.voucher {
  margin-top: 10px;
}

.voucher-image {
  width: 100px;
  height: 100px;
  border-radius: 4px;
}

.image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: #f5f7fa;
  color: #909399;
}

.transfer-actions {
  display: flex;
  gap: 10px;
}

/* 待转账相关样式 */
.timeout-item {
  border-left: 3px solid #f56c6c;
  background-color: #fef0f0;
}

.deadline-info {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
  font-size: 13px;
}

.deadline-label {
  color: #606266;
  font-weight: 500;
}

.deadline-time {
  color: #303133;
  font-weight: 500;
}

.deadline-time.urgent {
  color: #e6a23c;
}

.deadline-time.expired {
  color: #f56c6c;
}

.time-left {
  font-size: 12px;
}

.time-left.normal {
  color: #67c23a;
}

.time-left.urgent {
  color: #e6a23c;
  font-weight: 500;
}

.time-left.expired {
  color: #f56c6c;
  font-weight: 500;
}

.timeout-warning {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 12px;
  background-color: #fef0f0;
  border: 1px solid #fbc4c4;
  border-radius: 4px;
  color: #f56c6c;
}

.timeout-warning .el-icon {
  font-size: 16px;
  color: #f56c6c;
}

.warning-text {
  font-size: 12px;
  font-weight: 500;
}



/* 订单状态标签样式优化 */
.transfer-header .el-tag {
  margin-left: 8px;
  font-size: 11px;
  height: 20px;
  line-height: 18px;
  padding: 0 6px;
}

.empty-state {
  text-align: center;
  padding: 40px;
}

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

.upload-preview {
  margin-top: 10px;
}

.upload-preview img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
}

.dialog-footer {
  text-align: right;
}

/* 转账凭证对话框样式 */
.voucher-dialog-content {
  .transfer-info {
    margin-bottom: 20px;
    padding: 16px;
    background-color: #f8f9fa;
    border-radius: 8px;
    
    h4 {
      margin: 0 0 12px 0;
      color: #303133;
      font-size: 16px;
      font-weight: 600;
    }
    
    .info-row {
      display: flex;
      margin-bottom: 8px;
      
      .label {
        min-width: 80px;
        color: #606266;
        font-weight: 500;
      }
      
      .value {
        color: #303133;
        flex: 1;
        
        &.amount {
          color: #e6a23c;
          font-weight: 600;
          font-size: 16px;
        }
      }
    }
  }
  
  .voucher-section {
    h4 {
      margin: 0 0 12px 0;
      color: #303133;
      font-size: 16px;
      font-weight: 600;
    }
    
    .voucher-image-container {
      display: flex;
      justify-content: center;
      padding: 20px;
      background-color: #f8f9fa;
      border-radius: 8px;
      border: 2px dashed #dcdfe6;
      
      .voucher-preview {
        max-width: 100%;
        max-height: 400px;
        border-radius: 8px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
      }
    }
  }
  
  .no-voucher {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    background-color: #f8f9fa;
    border-radius: 8px;
    border: 2px dashed #dcdfe6;
    color: #909399;
    
    .el-icon {
      font-size: 48px;
      margin-bottom: 12px;
    }
    
    p {
      margin: 0;
      font-size: 14px;
    }
  }
  
  .image-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 200px;
    color: #909399;
    
    .el-icon {
      font-size: 48px;
      margin-bottom: 8px;
    }
    
    p {
      margin: 0;
      font-size: 14px;
    }
  }
}

/* 移动端适配增强 */
@media (max-width: 768px) {
  .deadline-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  
  .timeout-warning {
    padding: 6px 10px;
  }
  
  .warning-text {
    font-size: 11px;
  }
  
  .transfer-header .el-tag {
    margin-left: 0;
    margin-top: 4px;
  }
  
  .navbar {
    padding: 0 15px;
  }
  
  .account-info,
  .pending-transfers,
  .transfer-history {
    margin: 15px;
  }
  
  .account-balance {
    flex-direction: column;
    gap: 15px;
  }
  
  .balance-item .amount {
    font-size: 20px;
  }
  
  .transfer-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
  }
  
  .transfer-info {
    width: 100%;
  }
  
  .transfer-header {
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .amount {
    font-size: 16px;
    margin-left: 0;
    margin-top: 8px;
  }
  
  .transfer-actions {
    width: 100%;
    justify-content: flex-end;
    flex-wrap: wrap;
  }
  
  .transfer-details p {
    font-size: 13px;
  }
  
  .voucher-image {
    width: 80px;
    height: 80px;
  }
  
  /* 分页组件移动端适配 */
  .pagination {
    margin: 15px 0;
    overflow-x: auto;
    padding: 0 5px;
  }
  
  .pagination :deep(.el-pagination) {
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .pagination :deep(.el-pagination__total),
  .pagination :deep(.el-pagination__sizes),
  .pagination :deep(.el-pagination__jump) {
    margin: 4px 0;
  }
  
  .pagination :deep(.el-pager) {
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .pagination :deep(.el-pager .number),
  .pagination :deep(.btn-prev),
  .pagination :deep(.btn-next) {
    min-width: 32px;
    height: 32px;
    font-size: 14px;
    margin: 2px;
  }
}

@media (max-width: 480px) {
  .deadline-info {
    font-size: 12px;
  }
  
  .timeout-warning {
    padding: 4px 8px;
  }
  
  .warning-text {
    font-size: 10px;
  }
  
  .navbar {
    padding: 0 10px;
  }
  
  .account-info,
  .pending-transfers,
  .transfer-history {
    margin: 10px;
  }
  
  .transfer-item {
    padding: 10px;
  }
  
  .balance-item .amount {
    font-size: 18px;
  }
  
  .transfer-actions {
    gap: 8px;
  }
  
  .transfer-actions .el-button {
    font-size: 12px;
    padding: 6px 12px;
  }
  
  .voucher-image {
    width: 60px;
    height: 60px;
  }
  
  /* 小屏幕分页优化 */
  .pagination {
    margin: 10px 0;
    padding: 0;
  }
  
  .pagination :deep(.el-pagination) {
    gap: 4px;
  }
  
  .pagination :deep(.el-pagination__total) {
    font-size: 12px;
    order: 1;
    width: 100%;
    text-align: center;
    margin-bottom: 8px;
  }
  
  .pagination :deep(.el-pagination__sizes) {
    order: 2;
    margin: 4px;
  }
  
  .pagination :deep(.el-pagination__sizes .el-select) {
    width: 80px;
  }
  
  .pagination :deep(.el-pagination__jump) {
    order: 4;
    margin: 4px;
    font-size: 12px;
  }
  
  .pagination :deep(.el-pagination__jump .el-input) {
    width: 50px;
  }
  
  .pagination :deep(.el-pager) {
    order: 3;
    margin: 4px 0;
  }
  
  .pagination :deep(.el-pager .number),
  .pagination :deep(.btn-prev),
  .pagination :deep(.btn-next) {
    min-width: 28px;
    height: 28px;
    font-size: 12px;
    margin: 1px;
  }
  
  /* 隐藏跳转功能以节省空间 */
  .pagination :deep(.el-pagination__jump) {
    display: none;
  }
}
</style>