<template>
  <div class="order-detail-page">
    <h2 class="title">订单详情</h2>
    <div v-if="loading" class="loading">加载中...</div>
    <div v-else>
      <el-card class="section">
        <div class="row"><span class="label">订单ID：</span><span class="value mono">{{ order.id || '—' }}</span></div>
        <div class="row"><span class="label">订单号：</span><span class="value mono">{{ order.orderNumber || '—' }}</span></div>
        <div class="row"><span class="label">状态：</span><span class="value">{{ order.status }}</span></div>
        <div class="row"><span class="label">金额(USDT)：</span><span class="value strong">{{ order.totalPrice }}</span></div>
        <div class="row"><span class="label">创建时间：</span><span class="value">{{ formatDateTime(order.createTime) }}</span></div>
      </el-card>

      <el-card class="section" style="margin-top:12px;">
        <div class="sub-title">机器列表</div>
        <el-table :data="items" border size="small" style="width:100%"
          :header-cell-style="{ textAlign: 'left' }" :cell-style="{ textAlign: 'left' }">
          <el-table-column prop="productMachineId" label="机器ID" min-width="120" />
          <el-table-column prop="name" label="名称" min-width="160" />
          <el-table-column prop="payCoin" label="币种" min-width="100" />
          <el-table-column prop="leaseTime" label="租赁天数" min-width="100" />
          <el-table-column prop="price" label="单价(USDT)" min-width="120" />
          <el-table-column prop="address" label="收款地址" min-width="240" />
        </el-table>
      </el-card>

      <div class="actions">
        <el-button @click="$router.back()">返回</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { getOrdersByIds } from '../../api/order'

export default {
  name: 'AccountOrderDetail',
  data() {
    return {
      loading: false,
      order: {},
      items: []
    }
  },
  created() {
    this.load()
  },
  methods: {
    async load() {
      const id = this.$route.params.id
      if (!id) {
        this.$message({
          message: '订单ID缺失',
          type: 'error',
          showClose: true
        })
        return
      }
      try {
        this.loading = true
        const res = await getOrdersByIds({ orderId: id })
        const payload = (res && res.data) != null ? res.data : res
        let one = {}
        if (Array.isArray(payload) && payload.length) one = payload[0]
        else if (payload && typeof payload === 'object') one = payload
        else if (Array.isArray(res && res.rows) && res.rows.length) one = res.rows[0]
        this.order = one || {}
        this.items = Array.isArray(one && one.orderItemDtoList) ? one.orderItemDtoList : []
      } catch (e) {
        console.log('获取订单详情失败')
      } finally {
        this.loading = false
      }
    }
  ,
    formatDateTime(value) {
      if (!value) return '—'
      try {
        const str = String(value)
        return str.includes('T') ? str.replace('T', ' ') : str
      } catch (e) {
        return String(value)
      }
    }
  }
}
</script>

<style scoped>
.order-detail-page { padding: 12px; }
.title { margin: 0 0 12px 0; font-weight: 600; color: #2c3e50; }
.sub-title { font-weight: 600; margin-bottom: 8px; }
.section { margin-bottom: 12px; }
.row { display: flex; gap: 8px; line-height: 1.8; }
.label { color: #666; }
.value { color: #333; }
.value.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; word-break: break-all; }
.value.strong { font-weight: 700; color: #e74c3c; }
.actions { margin-top: 12px; }
</style>


