<template>
  <div class="admin-container">
    <!-- 头部 -->
    <div class="admin-header">
      <div class="admin-logo">
        <el-icon><Lock /></el-icon>
        <span>培训报名管理系统</span>
      </div>
      <div class="admin-user">
        <el-dropdown @command="handleCommand">
          <span class="user-info">
            <el-icon><Avatar /></el-icon>
            <span>{{ adminUser.username }}</span>
            <el-icon><ArrowDown /></el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="logout">
                <el-icon><SwitchButton /></el-icon>
                退出登录
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>

    <!-- 主内容 -->
    <div class="admin-main">
      <!-- 统计卡片 -->
      <div class="admin-stats">
        <div class="stat-card">
          <div class="stat-icon blue">
            <el-icon><Document /></el-icon>
          </div>
          <div class="stat-value">{{ statistics.total }}</div>
          <div class="stat-label">总报名数</div>
        </div>
        <div class="stat-card">
          <div class="stat-icon green">
            <el-icon><CircleCheck /></el-icon>
          </div>
          <div class="stat-value">{{ statistics.paid }}</div>
          <div class="stat-label">已支付</div>
        </div>
        <div class="stat-card">
          <div class="stat-icon orange">
            <el-icon><Clock /></el-icon>
          </div>
          <div class="stat-value">{{ statistics.submitted }}</div>
          <div class="stat-label">待支付</div>
        </div>
        <div class="stat-card">
          <div class="stat-icon red">
            <el-icon><Money /></el-icon>
          </div>
          <div class="stat-value">¥{{ statistics.amount }}</div>
          <div class="stat-label">收款金额</div>
        </div>
      </div>

      <!-- 搜索筛选 -->
      <div class="search-bar">
        <el-input
          v-model="searchKeyword"
          placeholder="搜索报名编号、姓名、手机号、所在单位"
          prefix-icon="Search"
          clearable
          style="max-width: 300px;"
          @clear="handleSearch"
          @keyup.enter="handleSearch"
        />
        <el-select v-model="filterStatus" placeholder="筛选状态" clearable style="width: 150px;">
          <el-option label="全部" value="" />
          <el-option label="已支付" value="paid" />
          <el-option label="待支付" value="submitted" />
        </el-select>
        <el-button type="primary" icon="Search" @click="handleSearch">搜索</el-button>
        <el-button icon="Refresh" @click="refreshData">刷新</el-button>
      </div>

      <!-- 数据表格 -->
      <div class="admin-table-card">
        <div class="table-header">
          <h3>报名信息列表</h3>
          <el-button type="success" icon="Download" @click="exportData">
            导出数据
          </el-button>
        </div>

        <el-table
          :data="filteredData"
          stripe
          border
          style="width: 100%"
          v-loading="loading"
          :header-cell-style="{ background: '#f5f7fa', color: '#303133', fontWeight: '600' }"
        >
          <el-table-column type="index" label="序号" width="60" align="center" />
          <el-table-column prop="id" label="报名编号" width="140" align="center">
            <template #default="{ row }">
              <span class="registration-id">{{ row.id }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="姓名" width="100" align="center" />
          <el-table-column prop="organization" label="所在单位" min-width="180" show-overflow-tooltip />
          <el-table-column prop="referrer" label="推荐人" width="100" align="center" />
          <el-table-column prop="referrerCompany" label="推荐人单位" min-width="180" show-overflow-tooltip />
          <el-table-column prop="department" label="部门" width="140" show-overflow-tooltip />
          <el-table-column prop="title" label="职务" width="100" align="center" />
          <el-table-column prop="phone" label="手机号" width="120" align="center" />
          <el-table-column prop="period" label="期次" width="180" align="center" />
          <el-table-column prop="amount" label="金额" width="90" align="center">
            <template #default="{ row }">
              <span class="amount-text">¥{{ row.amount }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态" width="100" align="center">
            <template #default="{ row }">
              <el-tag :type="row.status === 'paid' ? 'success' : 'warning'">
                {{ row.status === 'paid' ? '已支付' : '待支付' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="报名时间" width="160" align="center">
            <template #default="{ row }">
              {{ formatTime(row.createTime) }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="180" align="center" fixed="right">
            <template #default="{ row }">
              <el-button type="primary" link @click="viewDetail(row)">
                <el-icon><View /></el-icon>
                详情
              </el-button>
              <el-button type="warning" link @click="editStatus(row)">
                <el-icon><Edit /></el-icon>
                {{ row.status === 'paid' ? '改为待支付' : '改为已支付' }}
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="pagination-wrapper">
          <el-pagination
            :current-page="currentPage"
            :page-size="pageSize"
            :page-sizes="[10, 20, 50, 100]"
            :total="total"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>

    <!-- 详情弹窗 -->
    <el-dialog
      v-model="detailDialogVisible"
      title="报名详情"
      width="600px"
      destroy-on-close
    >
      <div class="detail-content" v-if="currentDetail">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="报名编号">{{ currentDetail.id }}</el-descriptions-item>
          <el-descriptions-item label="姓名">{{ currentDetail.name }}</el-descriptions-item>
          <el-descriptions-item label="所在单位">{{ currentDetail.organization }}</el-descriptions-item>
          <el-descriptions-item label="所在部门">{{ currentDetail.department || '-' }}</el-descriptions-item>
          <el-descriptions-item label="推荐人">{{ currentDetail.referrer }}</el-descriptions-item>
          <el-descriptions-item label="推荐人单位">{{ currentDetail.referrerCompany }}</el-descriptions-item>
          <el-descriptions-item label="职务/职称">{{ currentDetail.title }}</el-descriptions-item>
          <el-descriptions-item label="手机号码">{{ currentDetail.phone }}</el-descriptions-item>
          <el-descriptions-item label="电子邮箱">{{ currentDetail.email }}</el-descriptions-item>
          <el-descriptions-item label="身份证号">{{ currentDetail.idCard }}</el-descriptions-item>
          <el-descriptions-item label="报名期次">{{ currentDetail.period }}</el-descriptions-item>
          <el-descriptions-item label="报名金额">¥{{ currentDetail.amount }}</el-descriptions-item>
          <el-descriptions-item label="报名状态">
            <el-tag :type="currentDetail.status === 'paid' ? 'success' : 'warning'">
              {{ currentDetail.status === 'paid' ? '已支付' : '待支付' }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="报名时间">
            {{ formatTime(currentDetail.createTime) }}
          </el-descriptions-item>
          <el-descriptions-item label="备注说明" :span="2">
            {{ currentDetail.remark || '-' }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <template #footer>
        <el-button @click="detailDialogVisible = false">关闭</el-button>
        <el-button
          v-if="currentDetail && currentDetail.status === 'submitted'"
          type="success"
          @click="markAsPaid"
        >
          标记为已支付
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getRegistrationList, getRegistrationStatistics, updateRegistrationStatus, getRegistrationDetail } from '../../api/registration'

const router = useRouter()
// 数据
const loading = ref(false)
const searchKeyword = ref('')
const filterStatus = ref('')
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
const detailDialogVisible = ref(false)
const currentDetail = ref(null)

// 管理员信息
const adminUser = reactive({
  username: 'admin'
})

// 统计数据
const statistics = reactive({
  total: 0,
  paid: 0,
  submitted: 0,
  amount: 0
})

// 原始数据
const allData = ref([])

// 过滤后的数据
const filteredData = computed(() => {
  return allData.value
})

// 加载数据
const loadData = async () => {
  loading.value = true
  try {
    const res = await getRegistrationList({
      keyword: searchKeyword.value,
      pageNum: currentPage.value,
      pageSize: pageSize.value,
      status: filterStatus.value
    })

    // 映射接口字段
    allData.value = res.data.records.map(item => ({
      id: item.bmId,
      name: item.name,
      organization: item.company,
      department: item.department,
      title: item.title,
      phone: item.phone,
      period: item.period,
      amount: item.fee,
      status: item.status,
      createTime: item.submitTime,
      email: item.email,
      idCard: item.idCard,
      remark: item.remark,
      randomCode: item.randomCode,
      referrer: item.referrer,
      referrerCompany: item.referrerCompany
    }))

    total.value = res.data.total
  } catch (e) {
    console.error('加载数据失败', e)
  }
  loading.value = false
}

// 加载统计数据
const loadStatistics = async () => {
  try {
    const res = await getRegistrationStatistics()
    statistics.total = res.data.totalRegistrations
    statistics.paid = res.data.paidRegistrations
    statistics.submitted = res.data.pendingPaymentRegistrations
    statistics.amount = res.data.paidAmount
  } catch (e) {
    console.error('加载统计数据失败', e)
  }
}

// 刷新数据
const refreshData = () => {
  currentPage.value = 1
  loadData()
  ElMessage.success('数据已刷新')
}

// 搜索
const handleSearch = () => {
  currentPage.value = 1
  loadData()
}

// 分页
const handleSizeChange = (val) => {
  pageSize.value = val
  currentPage.value = 1
  loadData()
}

const handleCurrentChange = (val) => {
  currentPage.value = val
  loadData()
}

// 格式化时间
const formatTime = (time) => {
  if (!time) return '-'
  const date = new Date(time)
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  })
}

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

// 标记为已支付
const markAsPaid = async () => {
  ElMessageBox.confirm('确定将该报名标记为已支付吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    try {
      await updateRegistrationStatus(currentDetail.value.randomCode, 'paid')
      detailDialogVisible.value = false
      loadData()
      loadStatistics()
      ElMessage.success('操作成功！')
    } catch (e) {
      console.error('操作失败', e)
    }
  }).catch(() => {})
}

// 编辑支付状态
const editStatus = (row) => {
  const newStatus = row.status === 'paid' ? 'submitted' : 'paid'
  const actionText = newStatus === 'paid' ? '标记为已支付' : '标记为待支付'

  ElMessageBox.confirm(`确定要将该报名${actionText}吗？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    try {
      await updateRegistrationStatus(row.randomCode, newStatus)
      loadData()
      loadStatistics()
      ElMessage.success('状态修改成功！')
    } catch (e) {
      console.error('操作失败', e)
    }
  }).catch(() => {})
}

// 导出数据
const exportData = () => {
  if (allData.value.length === 0) {
    ElMessage.warning('暂无数据可导出')
    return
  }
  
  const exportData = allData.value.map(item => ({
    报名编号: item.id,
    姓名: item.name,
    所在单位: item.organization,
    推荐人: item.referrer,
    推荐人单位: item.referrerCompany,
    部门: item.department || '',
    职务: item.title,
    手机号: item.phone,
    邮箱: item.email,
    身份证号: item.idCard,
    期次: item.period,
    金额: item.amount,
    状态: item.status === 'paid' ? '已支付' : '待支付',
    报名时间: formatTime(item.createTime),
    备注: item.remark || ''
  }))
  
  // 简单导出为CSV
  const headers = Object.keys(exportData[0]).join(',')
  const rows = exportData.map(item => Object.values(item).join(','))
  const csv = [headers, ...rows].join('\n')
  
  const blob = new Blob(['\uFEFF' + csv], { type: 'text/csv;charset=utf-8' })
  const url = URL.createObjectURL(blob)
  const link = document.createElement('a')
  link.href = url
  link.download = `报名数据_${new Date().toLocaleDateString()}.csv`
  link.click()
  URL.revokeObjectURL(url)
  
  ElMessage.success('数据导出成功！')
}

// 退出登录
const handleCommand = (command) => {
  if (command === 'logout') {
    ElMessageBox.confirm('确定要退出登录吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      localStorage.removeItem('adminToken')
      localStorage.removeItem('adminUser')
      router.push('/admin/login')
      ElMessage.success('已退出登录')
    }).catch(() => {})
  }
}

// 初始化
onMounted(() => {
  const storedUser = localStorage.getItem('adminUser')
  if (storedUser) {
    const user = JSON.parse(storedUser)
    adminUser.username = user.username
  }
  loadStatistics()
  loadData()
})
</script>

<style scoped>
.admin-container {
  min-height: 100vh;
  background: var(--bg-color);
}

.admin-header {
  background: #fff;
  padding: 16px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  position: sticky;
  top: 0;
  z-index: 100;
}

.admin-logo {
  font-size: 20px;
  font-weight: 600;
  color: var(--primary-color);
  display: flex;
  align-items: center;
  gap: 8px;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 8px;
  transition: background 0.3s;
}

.user-info:hover {
  background: var(--bg-color);
}

.admin-main {
  padding: 24px 32px;
  max-width: 1400px;
  margin: 0 auto;
}

.admin-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

.stat-card {
  background: #fff;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.stat-icon.blue { background: linear-gradient(135deg, #409EFF 0%, #66b1ff 100%); }
.stat-icon.green { background: linear-gradient(135deg, #67C23A 0%, #85ce61 100%); }
.stat-icon.orange { background: linear-gradient(135deg, #E6A23C 0%, #ebb563 100%); }
.stat-icon.red { background: linear-gradient(135deg, #F56C6C 0%, #f78989 100%); }

.stat-icon .el-icon {
  font-size: 24px;
  color: #fff;
}

.stat-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.stat-label {
  font-size: 14px;
  color: var(--text-secondary);
}

.search-bar {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 20px;
  background: #fff;
  padding: 16px;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.admin-table-card {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

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

.table-header h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}

.registration-id {
  font-family: 'Courier New', monospace;
  font-size: 13px;
  color: var(--primary-color);
}

.amount-text {
  font-weight: 600;
  color: var(--danger-color);
}

.pagination-wrapper {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.detail-content {
  padding: 10px 0;
}

@media screen and (max-width: 768px) {
  .admin-header {
    padding: 12px 16px;
  }
  
  .admin-main {
    padding: 16px;
  }
  
  .admin-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .stat-card {
    padding: 16px;
  }
  
  .stat-value {
    font-size: 22px;
  }
  
  .search-bar {
    flex-direction: column;
    align-items: stretch;
  }
  
  .search-bar .el-input,
  .search-bar .el-select {
    width: 100% !important;
  }
  
  .table-header {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }
  
  .el-table {
    font-size: 12px;
  }
  
  .pagination-wrapper {
    justify-content: center;
  }
}

@media screen and (max-width: 480px) {
  .admin-stats {
    grid-template-columns: 1fr;
  }
}
</style>
