<template>
  <div class="purchased-detail-page">
    <h2 class="title">已购商品详情</h2>
    <div v-if="loading" class="loading">加载中...</div>
    <div v-else>
      <!-- 基本信息 -->
      <el-card class="section">
        <div class="sub-title">基本信息</div>
        <div class="row">
          <span class="label">用户：</span>
          <span class="value mono">{{ detail.userId || '—' }}</span>
        </div>
        <div class="row">
          <span class="label">订单项ID：</span>
          <span class="value mono">{{ detail.orderItemId || '—' }}</span>
        </div>
        <div class="row">
          <span class="label">机器ID：</span>
          <span class="value mono">{{ detail.productMachineId || '—' }}</span>
        </div>
        <div class="row">
          <span class="label">商品类型：</span>
          <span class="value">
            <el-tag :type="detail.type === 1 ? 'success' : 'info'">
              {{ detail.type === 1 ? "算力套餐" : "挖矿机器" }}
            </el-tag>
          </span>
        </div>
        <div class="row">
          <span class="label">状态：</span>
          <span class="value">
            <el-tag :type="detail.status === 0 ? 'success' : 'info'">
              {{ detail.status === 0 ? "运行中" : "已过期" }}
            </el-tag>
          </span>
        </div>
        <div class="row" v-show="detail.type === 1">
          <span class="label"  >购买算力：</span>
          <span class="value strong">{{ detail.purchasedComputingPower }}</span>
        </div>
        <div class="row">
          <span class="label">购买时间：</span>
          <span class="value">{{ formatDateTime(detail.createTime) }}</span>
        </div>
        <div class="row">
          <span class="label">开始时间：</span>
          <span class="value">{{ formatDateTime(detail.startTime) }}</span>
        </div>
        <div class="row">
          <span class="label">结束时间：</span>
          <span class="value">{{ formatDateTime(detail.endTime) }}</span>
        </div>
      </el-card>

      <!-- 收益信息 -->
      <el-card class="section" style="margin-top: 12px;">
        <div class="sub-title">收益信息</div>
        <div class="row">
          <span class="label">当前实际算力：</span>
          <span class="value strong">{{ detail.currentComputingPower || '0' }}</span>
        </div>
        <div class="row">
          <span class="label">币种收益：</span>
          <span class="value strong">{{ detail.currentIncome || '0' }}</span>
        </div>
        <div class="row">
          <span class="label">当前USDT收益：</span>
          <span class="value strong">{{ detail.currentUsdtIncome || '0' }} USDT</span>
        </div>
        <div class="row">
          <span class="label">预估结束总收益：</span>
          <span class="value strong">{{ detail.estimatedEndIncome || '0' }}</span>
        </div>
        <div class="row">
          <span class="label">预估结束USDT总收益：</span>
          <span class="value strong">{{ detail.estimatedEndUsdtIncome || '0' }} USDT</span>
        </div>
      </el-card>

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

<script>
import { getOwnedList,getOwnedById } from '../../api/products'

export default {
  name: 'PurchasedDetail',
  data() {
    return {
      loading: false,
      detail: {}
    }
  },
  created() {
    this.load()
  },
  methods: {
    async load() {
      const paramsId = this.$route.params.id
      if (!paramsId) {
        this.$message({
          message: '订单项ID缺失,请重新进入',
          type: 'error',
          showClose: true
        })
        return
      }
      
      try {
        this.loading = true
        const res = await getOwnedById({id:paramsId})
        
        if (res && (res.code === 0 || res.code === 200)) {
          // 从列表中查找对应的订单项
          // const items = res.rows || []
          // const targetItem = items.find(item => item.orderItemId == orderItemId)
          this.detail = res.data
          // if (targetItem) {
          //   this.detail = targetItem
          // } else {
          //   this.$message({
          //     message: '未找到对应的商品信息',
          //     type: 'error',
          //     showClose: true
          //   })
          // }
        } 
      } catch (e) {
        console.error('获取已购商品详情失败', e)
     
      } 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>
.purchased-detail-page {
  padding: 12px;
}

.title {
  margin: 0 0 12px 0;
  font-weight: 600;
  color: #2c3e50;
}

.sub-title {
  font-weight: 600;
  margin-bottom: 12px;
  color: #333;
  font-size: 16px;
}

.section {
  margin-bottom: 12px;
}

.row {
  display: flex;
  gap: 8px;
  line-height: 1.8;
  margin-bottom: 8px;
}

.label {
  color: #666;
  min-width: 170px;
  font-weight: 500;
  text-align: right;
  /* background: palegoldenrod; */
}

.value {
  color: #333;
  flex: 1;
  text-align: left;
  margin-left: 18px;
}

.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: 20px;
  text-align: center;
}

.loading {
  text-align: center;
  padding: 40px;
  color: #666;
}
</style>
