<template>
  <div class="orders-page">
    <div class="page-header">
      <h2>订单管理</h2>
      <p>查看和管理用户订单信息</p>
    </div>

    <el-card>
      <template #header>
        <div class="card-header">
          <span>订单列表</span>
          <el-button type="primary" @click="loadOrders">
            <el-icon><Refresh /></el-icon>
            刷新
          </el-button>
        </div>
      </template>

      <div v-loading="loading">
        <el-table :data="orders" style="width: 100%">
          <el-table-column prop="id" label="订单ID" width="100" />
          <el-table-column prop="product_name" label="产品名称" />
          <el-table-column prop="quantity" label="数量" width="100" />
          <el-table-column prop="total_price" label="总价" width="120">
            <template #default="{ row }">
              ¥{{ row.total_price.toFixed(2) }}
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态" width="100">
            <template #default="{ row }">
              <el-tag :type="getStatusType(row.status)">
                {{ row.status }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="created_at" label="创建时间" width="180" />
          <el-table-column label="操作" width="200">
            <template #default="{ row }">
              <el-button size="small" @click="viewOrder(row)">
                查看详情
              </el-button>
              <el-button 
                size="small" 
                type="warning" 
                v-if="row.status === '处理中'"
                @click="cancelOrder(row)"
              >
                取消
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <div v-if="!loading && orders.length === 0" class="empty-state">
          <el-empty description="暂无订单数据" />
        </div>
      </div>
    </el-card>

    <!-- 统计信息 -->
    <div class="stats-grid">
      <el-card class="stats-card">
        <div class="stats-content">
          <div class="stats-number">{{ orders.length }}</div>
          <div class="stats-label">总订单数</div>
        </div>
      </el-card>

      <el-card class="stats-card">
        <div class="stats-content">
          <div class="stats-number">{{ completedOrders }}</div>
          <div class="stats-label">已完成</div>
        </div>
      </el-card>

      <el-card class="stats-card">
        <div class="stats-content">
          <div class="stats-number">{{ processingOrders }}</div>
          <div class="stats-label">处理中</div>
        </div>
      </el-card>

      <el-card class="stats-card">
        <div class="stats-content">
          <div class="stats-number">¥{{ totalAmount.toFixed(2) }}</div>
          <div class="stats-label">总金额</div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import axios from 'axios'

const loading = ref(false)
const orders = ref<any[]>([])

// 计算属性
const completedOrders = computed(() => 
  orders.value.filter(order => order.status === '已完成').length
)

const processingOrders = computed(() => 
  orders.value.filter(order => order.status === '处理中').length
)

const totalAmount = computed(() => 
  orders.value.reduce((sum, order) => sum + order.total_price, 0)
)

const loadOrders = async () => {
  loading.value = true
  try {
    const response = await axios.get('/api/orders')
    if (response.data.code === 0) {
      orders.value = response.data.data.orders
      ElMessage.success('订单列表加载成功')
    } else {
      ElMessage.error(response.data.message || '加载失败')
    }
  } catch (error: any) {
    console.error('加载订单列表失败:', error)
    ElMessage.error('加载订单列表失败')
  } finally {
    loading.value = false
  }
}

const getStatusType = (status: string) => {
  switch (status) {
    case '已完成':
      return 'success'
    case '处理中':
      return 'warning'
    case '已取消':
      return 'danger'
    default:
      return 'info'
  }
}

const viewOrder = (order: any) => {
  ElMessage.info(`查看订单详情: ${order.id}`)
}

const cancelOrder = (order: any) => {
  ElMessage.info(`取消订单: ${order.id}`)
}

onMounted(() => {
  loadOrders()
})
</script>

<style scoped>
.orders-page {
  padding: 20px;
}

.page-header {
  margin-bottom: 20px;
}

.page-header h2 {
  margin: 0 0 8px 0;
  color: #333;
  font-size: 24px;
  font-weight: 600;
}

.page-header p {
  margin: 0;
  color: #666;
  font-size: 14px;
}

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

.empty-state {
  padding: 40px 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-top: 20px;
}

.stats-card {
  cursor: pointer;
  transition: transform 0.2s;
}

.stats-card:hover {
  transform: translateY(-2px);
}

.stats-content {
  text-align: center;
  padding: 20px;
}

.stats-number {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  line-height: 1;
}

.stats-label {
  font-size: 14px;
  color: #666;
  margin-top: 8px;
}
</style>