<template>
  <div class="tickets-page">
    <BackNav />
    <div class="page-header">
      <el-button type="primary" @click="$router.push('/tickets/create')">{{ $t('ticket.createTicket') }}</el-button>
    </div>
    <div class="table-card">
      <el-table :data="tickets">
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column prop="subject" :label="$t('ticket.subject')" />
        <el-table-column prop="status" :label="$t('ticket.status')" width="120">
          <template #default="{ row }">
            <el-tag :type="statusType(row.status)">{{ statusText(row.status) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" width="180">
          <template #default="{ row }">{{ formatDate(row.created_at) }}</template>
        </el-table-column>
        <el-table-column label="操作" width="80">
          <template #default="{ row }">
            <el-button link type="primary" size="small" @click="$router.push(`/tickets/${row.id}`)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ticketApi } from '../../api'
import BackNav from '../../components/BackNav.vue'

const tickets = ref<any[]>([])

const statusMap: Record<string, string> = {
  pending: '待处理',
  processing: '处理中',
  resolved: '已解决',
  closed: '已关闭',
}
const statusTypeMap: Record<string, string> = {
  pending: 'warning',
  processing: 'primary',
  resolved: 'success',
  closed: 'info',
}
function statusText(s: string) { return statusMap[s] || s }
function statusType(s: string) { return statusTypeMap[s] || 'info' }

function formatDate(date: string) {
  if (!date) return '-'
  const d = new Date(date)
  const year = d.getFullYear()
  const month = String(d.getMonth() + 1).padStart(2, '0')
  const day = String(d.getDate()).padStart(2, '0')
  const hours = String(d.getHours()).padStart(2, '0')
  const minutes = String(d.getMinutes()).padStart(2, '0')
  return `${year}-${month}-${day} ${hours}:${minutes}`
}

onMounted(async () => {
  const res: any = await ticketApi.list()
  tickets.value = res.data || []
})
</script>

<style scoped lang="scss">
.tickets-page { padding: 0; }
.page-header { display: flex; justify-content: flex-end; align-items: center; margin-bottom: 24px; }
.table-card { background: #2d2d44; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 12px; padding: 20px; }
</style>
