<template>
  <div class="recent-orders">
    <div class="card-header">
      <h3>最近订单</h3>
      <el-button type="primary" size="small" plain @click="goAll">查看全部</el-button>
    </div>
    <div class="table-container">
      <el-table :data="orderData" style="width: 100%" size="small" height="270">
        <el-table-column align="center" prop="order_no" label="订单编号" show-overflow-tooltip />
        <el-table-column align="center" prop="user_name" label="用户" show-overflow-tooltip />
        <el-table-column align="center" prop="amount" label="金额" width="100">
          <template #default="scope">
            <span class="amount">{{ scope.row.amount }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="order_type" label="类型" width="100">
        </el-table-column>
        <el-table-column align="center" prop="status" label="状态" width="100">
          <template #default="{ row }">
            <el-tag v-if="row.status === 'created'" type="warning" size="small">待付款</el-tag>
            <el-tag v-if="row.status === 'pending'" type="warning" size="small">待支付</el-tag>
            <el-tag v-if="row.status === 'paid'" type="success" size="small">已支付</el-tag>
            <el-tag v-if="row.status === 'failed'" type="danger" size="small">支付失败</el-tag>
            <el-tag v-if="row.status === 'canceled'" type="info" size="small">已取消</el-tag>
            <el-tag v-if="row.status === 'refunded'" type="info" size="small">已退款</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import RPC from '@/utils/rpc'
import dayjs from 'dayjs'
const router = useRouter()
const goAll = () => router.push('/OrderManage')

const orderData = ref([])

const loading = ref(false)
const getList = () => {
  loading.value = true
  RPC.post('/membership/order/list', { page: 1, size: 10 })
    .then((res) => {
      orderData.value = res.list
    })
    .finally(() => {
      loading.value = false
    })
}
getList()

const getTypeTagType = (type) => {
  const typeMap = {
    包年: '',
    包季: 'success',
    充值: 'info',
    包月: 'warning',
  }
  return typeMap[type] || ''
}

const getStatusTagType = (status) => {
  const statusMap = {
    已支付: 'success',
    待支付: 'warning',
    已取消: 'danger',
  }
  return statusMap[status] || ''
}
</script>

<style lang="scss" scoped>
.recent-orders {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  height: 100%;

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

    h3 {
      margin: 0;
      font-size: 16px;
      font-weight: 600;
      color: #303133;
    }
  }

  .table-container {
    .amount {
      font-weight: 600;
      color: #303133;
    }
  }
}

:deep(.el-table) {
  .el-table__header {
    th {
      background-color: #fafafa;
      color: #606266;
      font-weight: 500;
    }
  }

  .el-table__row {
    &:hover {
      background-color: #f5f7fa;
    }
  }
}
</style>
