<template>
  <div class="order-detail-container">
    <div class="top-bar">
      <button class="back-btn" @click="$router.back()">
        <span class="back-icon">‹</span> {{ '返回' }}
      </button>
    </div>

    <div class="custom-card">
      <div class="card-header">
        <span>基础信息</span>
      </div>
      <div class="card-body desc-grid">
        <div class="desc-item" v-for="(item, i) in baseColumns" :key="i">
          <span class="desc-label">{{ item.label }}:</span>
          <span class="desc-value">

            <template v-if="item.prop === 'is_faker'">
              <span :class="['tag', dataRef.is_faker === 1 ? 'tag-danger' : 'tag-success']">
                {{ dataRef.is_faker === 1 ? '虚拟账户' : '真实账户' }}
              </span>
            </template>

            <template v-else-if="item.prop === 'create_time'">
              {{ formatTime(dataRef[item.prop]) }}
            </template>

            <template v-else>
              {{ dataRef[item.prop] || '--' }}
            </template>

          </span>
        </div>
      </div>
    </div>

    <div class="custom-card match-info-card">
      <div class="card-body" style="padding: 0;">
        <div class="match-vs-board">
          <div class="league-header">
            <span class="league-name">{{ dataRef.league || '--' }}</span>
            <span v-if="dataRef.is_roll === 1" class="tag tag-warning ml-2">滚球</span>
            
            <div class="match-time ml-auto">
              <span>{{ (dataRef.detail && dataRef.detail.game_time) ? dataRef.detail.game_time : '--' }}</span>
              <span v-if="dataRef.detail && dataRef.detail.fixture_status" class="fixture-status">
                <span v-if="dataRef.detail.fixture_status.long" style="margin-left: 8px; color: #e6a23c;">{{ dataRef.detail.fixture_status.long }}</span>
                <span v-if="dataRef.detail.fixture_status.elapsed" style="margin-left: 4px; color: #e6a23c;">{{ dataRef.detail.fixture_status.seconds }}'</span>
              </span>
            </div>
          </div>

          <div class="vs-content">
            <div class="team-box">
              <div class="team-logo">
                <img v-if="dataRef.home_team_logo" :src="dataRef.home_team_logo" class="logo-img" />
                <span v-else class="team-initial">{{ dataRef.home_team ? dataRef.home_team.charAt(0) : '' }}</span>
              </div>
              <span class="team-name">{{ dataRef.home_team || '--' }}</span>
            </div>

            <div class="score-box">
              <div v-if="dataRef.detail && dataRef.detail.score" class="score-display">
                <span class="score-num">{{ getScore(dataRef.detail.score, 0) }}</span>
                <span class="score-divider">:</span>
                <span class="score-num">{{ getScore(dataRef.detail.score, 1) }}</span>
              </div>
              <div v-else class="time-display">
                <span style="font-size: 24px; font-weight: bold; color: #909399;">VS</span>
              </div>

              <div class="half-score" v-if="dataRef.detail && dataRef.detail.half_score && dataRef.detail.half_score !== '-'">
                半场: {{ dataRef.detail.half_score }}
              </div>
            </div>

            <div class="team-box">
              <div class="team-logo">
                <img v-if="dataRef.guest_team_logo" :src="dataRef.guest_team_logo" class="logo-img" />
                <span v-else class="team-initial">{{ dataRef.guest_team ? dataRef.guest_team.charAt(0) : '' }}</span>
              </div>
              <span class="team-name">{{ dataRef.guest_team || '--' }}</span>
            </div>
          </div>
          
          <div class="live-score-row" v-if="(dataRef.detail && dataRef.detail.score) || (dataRef.detail && dataRef.detail.half_score)">
            <span class="live-label">即时比分:</span>
            <span class="live-val" v-if="dataRef.detail && dataRef.detail.score">{{ dataRef.detail.score }}</span>
            <span class="live-half" v-if="dataRef.detail && dataRef.detail.half_score && dataRef.detail.half_score !== '-'"> (半场: {{ dataRef.detail.half_score }})</span>
          </div>
        </div>
      </div>
    </div>

    <div class="custom-card">
      <div class="card-header">
        <span>下注与状态信息</span>
      </div>
      <div class="card-body desc-grid">
        <div class="desc-item" v-for="(item, i) in financeColumns" :key="i">
          <span class="desc-label">{{ item.label }}:</span>
          <span class="desc-value">

            <template v-if="item.prop === 'is_roll'">
              <span :class="['tag', dataRef.is_roll === 1 ? 'tag-warning' : 'tag-info']">
                {{ dataRef.is_roll === 1 ? '滚球' : '非滚球' }}
              </span>
            </template>

            <template v-else-if="item.prop === 'is_win'">
              <span v-if="dataRef.is_win === 0" class="tag tag-info">未中奖</span>
              <span v-else-if="dataRef.is_win === 1" class="tag tag-success">已中奖</span>
              <span v-else-if="dataRef.is_win === 2" class="tag tag-warning">和局</span>
              <span v-else>--</span>
            </template>

            <template v-else-if="item.prop === 'status'">
              <span v-if="dataRef.status === 0" class="tag tag-info">待付款</span>
              <span v-else-if="dataRef.status === 1" class="tag tag-success">已支付</span>
              <span v-else-if="dataRef.status === 2" class="tag tag-warning">已退款</span>
              <span v-else-if="dataRef.status === -1" class="tag tag-danger">已取消</span>
              <span v-else>--</span>
            </template>

            <template v-else-if="item.prop === 'settlement_status'">
              <span v-if="dataRef.settlement_status === 0" class="tag tag-info">未结算</span>
              <span v-else-if="dataRef.settlement_status === 1" class="tag tag-success">已结算</span>
              <span v-else-if="dataRef.settlement_status === 2" class="tag tag-danger">已取消</span>
              <span v-else>--</span>
            </template>

            <template v-else-if="item.prop === 'pay_status'">
               <span :class="['tag', dataRef.pay_status === 1 ? 'tag-success' : 'tag-info']">
                {{ dataRef.pay_status === 1 ? '已支付' : '待付款' }}
              </span>
            </template>

            <template v-else-if="item.prop === 'return_status'">
              <span v-if="dataRef.return_status === 0" class="tag tag-info">未退款</span>
              <span v-else-if="dataRef.return_status === 1" class="tag tag-warning">退款申请中</span>
              <span v-else-if="dataRef.return_status === 2" class="tag tag-success">退款已同意</span>
              <span v-else-if="dataRef.return_status === 3" class="tag tag-danger">退款已驳回</span>
              <span v-else>--</span>
            </template>

            <template v-else-if="['pay_time', 'return_apply_time', 'return_operation_time'].includes(item.prop)">
              {{ formatTime(dataRef[item.prop]) }}
            </template>

            <template v-else-if="item.prop === 'failure'">
              <span class="text-danger">{{ dataRef[item.prop] || '--' }}</span>
            </template>

            <template v-else>
              {{ dataRef[item.prop] || '--' }}
            </template>

          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getOrderInfo } from '@/api/data'

export default {
  name: 'orderDetail',
  data() {
    return {
      // 表单数据容器
      dataRef: {},

      // 基础信息列
      baseColumns: [
        { label: '订单号', prop: 'order_id' },
        { label: '用户ID', prop: 'user_id' },
        { label: '创建时间', prop: 'create_time' }
      ],

      // 财务与状态信息列
      financeColumns: [
        { label: '期号', prop: 'issue' },
        { label: '滚球', prop: 'is_roll' },
        { label: '玩法', prop: 'odd_name' },
        { label: '赔率玩法', prop: 'odd_value' },
        { label: '赔率', prop: 'odd' },
        { label: '盘口', prop: 'handicap' },
        { label: '下注金额', prop: 'amount' },
        { label: 'RMB汇率', prop: 'cny_rate' },
        { label: '派奖金额', prop: 'win_amount' },
        { label: '盈亏金额', prop: 'profit_and_loss' },
        { label: '下注失败原因', prop: 'failure' },

        { label: '订单状态', prop: 'status' },
        { label: '中奖状态', prop: 'is_win' },
        { label: '结算状态', prop: 'settlement_status' },

        { label: '支付状态', prop: 'pay_status' },
        { label: '支付时间', prop: 'pay_time' },

        { label: '退款状态', prop: 'return_status' },
        { label: '退款申请时间', prop: 'return_apply_time' },
        { label: '退款处理时间', prop: 'return_operation_time' }
      ],
    }
  },
  created() {
    this.getData()
  },
  watch: {
    '$route.path': function(val) {
      if (val === '/OrderDetail' && this.$route.query.order_id) {
        this.getData()
      }
    }
  },
  methods: {
    // 获取数据
    getData() {
      if (!this.$route.query.order_id) return
      getOrderInfo({ order_id: this.$route.query.order_id }).then((res) => {
        this.dataRef = res.data || res || {}
      })
    },

    // 截取比分
    getScore(scoreStr, index) {
      if (!scoreStr) return '-'
      const parts = scoreStr.split('-')
      if (parts.length === 2) {
        return parts[index] ? parts[index].trim() : '-'
      }
      return scoreStr
    },

    // 简单时间戳转换
    formatTime(timestamp) {
      if (!timestamp) return '--'
      if (typeof timestamp === 'string' && timestamp.includes('-')) return timestamp

      // 根据业务实际时间戳调整。如果是毫秒级去掉 * 1000
      const date = new Date(Number(timestamp) * 1000)
      const Y = date.getFullYear()
      const M = String(date.getMonth() + 1).padStart(2, '0')
      const D = String(date.getDate()).padStart(2, '0')
      const h = String(date.getHours()).padStart(2, '0')
      const m = String(date.getMinutes()).padStart(2, '0')
      const s = String(date.getSeconds()).padStart(2, '0')
      return `${Y}-${M}-${D} ${h}:${m}:${s}`
    }
  }
}
</script>

<style scoped lang="scss">
/* 整体页面容器修饰 */
.order-detail-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
  box-sizing: border-box;
}

/* 顶部返回栏 */
.top-bar {
  width: 100%;
  height: 50px;
  background: #fff;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding-left: 20px;
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);

  .back-btn {
    background: transparent;
    border: 1px solid #dcdfe6;
    padding: 6px 15px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    color: #606266;
    display: flex;
    align-items: center;
    transition: all 0.2s;

    &:hover {
      color: #409eff;
      border-color: #c6e2ff;
      background-color: #ecf5ff;
    }

    .back-icon {
      font-size: 18px;
      margin-right: 4px;
      line-height: 1;
    }
  }
}

/* 卡片样式 */
.custom-card {
  background: #fff;
  border-radius: 4px;
  margin-bottom: 20px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  border: 1px solid #ebeef5;

  .card-header {
    padding: 15px 20px;
    border-bottom: 1px solid #ebeef5;
    font-weight: bold;
    font-size: 16px;
    color: #303133;
  }

  .card-body {
    padding: 20px;
  }
}

.match-info-card {
  border: none;
}

/* ================= 赛事信息画板专属样式 (白色明亮主题) ================= */
.match-vs-board {
  background-color: #fff;
  color: #303133;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid #ebeef5;
}

.league-header {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  border-bottom: 1px dashed #ebeef5;
  font-size: 14px;
  color: #606266;
}

.ml-2 {
  margin-left: 8px;
}

.ml-auto {
  margin-left: auto;
}

.vs-content {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px 20px;
  gap: 15%; /* 调整间距 */
}

.team-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 120px;

  .team-logo {
    width: 60px;
    height: 60px;
    background-color: #f5f7fa;
    border-radius: 50%;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #e4e7ed;
    overflow: hidden;
    
    .logo-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .team-initial {
      font-size: 20px;
      font-weight: bold;
      color: #909399;
    }
  }

  .team-name {
    font-size: 16px;
    font-weight: bold;
    color: #303133;
    text-align: center;
  }
}

.score-box {
  display: flex;
  flex-direction: column;
  align-items: center;

  .score-display {
    font-size: 32px;
    font-weight: bold;
    color: #e6a23c;
    margin-bottom: 8px;
    display: flex;
    align-items: center;

    .score-divider {
      margin: 0 15px;
      color: #303133;
    }
  }

  .half-score {
    font-size: 12px;
    color: #909399;
    background-color: #f4f4f5;
    padding: 4px 10px;
    border-radius: 12px;
  }
}

.live-score-row {
  background-color: #fafafa;
  border-top: 1px solid #ebeef5;
  padding: 12px 20px;
  text-align: center;
  font-size: 13px;
  color: #606266;

  .live-val {
    color: #e6a23c;
    font-weight: bold;
    margin-left: 6px;
  }

  .live-half {
    margin-left: 6px;
  }
}
/* ======================================================= */

/* 描述列表的网格布局 */
.desc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px 20px;

  /* 如果屏幕较窄，自动变为两列或单列 */
  @media screen and (max-width: 1024px) {
    grid-template-columns: repeat(2, 1fr);
  }
  @media screen and (max-width: 600px) {
    grid-template-columns: 1fr;
  }
}

.desc-item {
  display: flex;
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.5;

  .desc-label {
    color: #606266;
    font-weight: bold;
    margin-right: 8px;
    white-space: nowrap;
  }

  .desc-value {
    color: #303133;
    word-break: break-all;
  }
}

/* 状态标签样式 */
.tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.5;
  white-space: nowrap;
  border: 1px solid transparent;

  &.tag-info {
    background-color: #f4f4f5;
    border-color: #e9e9eb;
    color: #909399;
  }
  &.tag-success {
    background-color: #f0f9eb;
    border-color: #e1f3d8;
    color: #67c23a;
  }
  &.tag-warning {
    background-color: #fdf6ec;
    border-color: #faecd8;
    color: #e6a23c;
  }
  &.tag-danger {
    background-color: #fef0f0;
    border-color: #fde2e2;
    color: #f56c6c;
  }
}

/* 辅助文本类 */
.text-danger {
  color: #f56c6c;
}
</style>