<template>
  <div class="pc-digital-detail-container">
    <div class="detail-wrapper">

      <div class="header-card">
        <div class="header-left">
          <div class="back-action" @click="goBack">
            <el-icon><ArrowLeft /></el-icon>
            <span class="back-text">{{ t('返回') }}</span>
          </div>

          <el-divider direction="vertical" class="header-divider" />

          <div class="title-line">
            <div class="decorate-bar bmc"></div>
            <span class="title-text">{{ t('注单详情') }}</span>
          </div>
        </div>
      </div>

      <div class="content-card" v-if="detailData">

        <div class="overview-section">
          <div class="status-badge-large" :class="getStatusClass(detailData.lottery_status)">
            {{ getStatusText(detailData.lottery_status) }}
          </div>

          <div class="profit-amount" :class="getProfitClass(detailData.lottery_status)">
            {{ getProfitText(detailData) }}
          </div>
          <div class="profit-label" v-if="detailData.lottery_status !== 0">{{ t('盈亏金额') }}</div>
          <div class="profit-label" v-else>{{ t('等待开奖中') }}</div>
        </div>

        <div class="info-list-section">
          <div class="info-row">
            <span class="label">{{ t('注单单号') }}</span>
            <div class="value order-no-box">
              <span class="font-din">{{ detailData.ordernum }}</span>
              <el-icon class="copy-icon" @click="copyText(detailData.ordernum)"><DocumentCopy /></el-icon>
            </div>
          </div>

          <div class="info-row">
            <span class="label">{{ t('投注时间') }}</span>
            <span class="value font-mono">{{ detailData.created_at }}</span>
          </div>

          <div class="info-row">
            <span class="label">{{ t('彩种名称') }}</span>
            <span class="value fw-bold">{{ t('澳门六合彩') }}</span>
          </div>

          <div class="info-row">
            <span class="label">{{ t('期号') }}</span>
            <span class="value">{{ t('第') }} <span class="font-din">{{ detailData.issue }}</span> {{ t('期') }}</span>
          </div>

          <div class="info-row">
            <span class="label">{{ t('玩法') }}</span>
            <span class="value">[{{ detailData.game }}] - {{ detailData.gameplay }}</span>
          </div>

          <div class="info-row highlight-row">
            <span class="label">{{ t('投注内容') }}</span>
            <span class="value bet-number">{{ detailData.number }}</span>
          </div>

          <div class="info-row">
            <span class="label">{{ t('赔率') }}</span>
            <span class="value odds-val">@{{ detailData.odds }}</span>
          </div>

          <div class="info-row">
            <span class="label">{{ t('投注本金') }}</span>
            <span class="value fw-bold">{{ parseFloat(detailData.amount || 0).toFixed(2) }} <span class="currency">{{ $currency || t('元') }}</span></span>
          </div>

          <div class="info-row" v-if="detailData.lottery_status === 1">
            <span class="label">{{ t('派彩金额') }}</span>
            <span class="value text-success fw-bold">{{ parseFloat(detailData.win_amount || 0).toFixed(2) }} <span class="currency">{{ $currency || t('元') }}</span></span>
          </div>

        </div>

      </div>

      <div class="content-card empty-card" v-else>
        <el-empty :description="t('获取注单详情失败或数据不存在')" />
      </div>

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

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { ArrowLeft, DocumentCopy } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';

// 引入真实接口
import { getDigitalOrderInfo } from '@/request/api.js';

const route = useRoute();
const router = useRouter();
const { t } = useI18n();

const detailData = ref(null);

onMounted(() => {
  // 假设路由传参使用的是 id
  const orderId = route.query.id;
  if (orderId) {
    fetchDetail(orderId);
  }
});

const fetchDetail = async (id) => {
  try {
    const res = await getDigitalOrderInfo({ id });
    if (res && res.code === 1 && res.data) {
      detailData.value = res.data;
    }
  } catch (error) {
    console.error(t('获取详情失败'), error);
  }
};

const goBack = () => {
  router.back();
};

// --- 状态渲染逻辑 ---
const getStatusText = (status) => {
  const s = Number(status);
  if (s === 0) return t('未开奖');
  if (s === 1) return t('已中奖');
  if (s === 2) return t('未中奖');
  if (s === 3) return t('合局');
  return t('未知状态');
};

const getStatusClass = (status) => {
  const s = Number(status);
  if (s === 0) return 'status-pending';
  if (s === 1) return 'status-win';
  if (s === 2) return 'status-lose';
  if (s === 3) return 'status-tie';
  return '';
};

const getProfitClass = (status) => {
  const s = Number(status);
  if (s === 1) return 'text-success';
  if (s === 2) return 'text-danger';
  return 'text-gray';
};

const getProfitText = (data) => {
  const s = Number(data.lottery_status);
  if (s === 1) return `+${parseFloat(data.win_amount || 0).toFixed(2)}`;
  if (s === 2) return `-${parseFloat(data.amount || 0).toFixed(2)}`;
  if (s === 3) return '0.00';
  return '--';
};

const copyText = async (text) => {
  try {
    await navigator.clipboard.writeText(text);
    ElMessage.success(t('复制成功'));
  } catch (err) {
    const input = document.createElement('input');
    input.value = text;
    document.body.appendChild(input);
    input.select();
    document.execCommand('copy');
    document.body.removeChild(input);
    ElMessage.success(t('复制成功'));
  }
};
</script>

<style scoped lang="scss">
$bg-dark: #141414;
$card-bg: #1e1e1e;
$border-color: #333;
$main-color: #f8b932;
$text-primary: #fff;
$text-secondary: #999;
$color-increase: #67c23a;
$color-decrease: #f56c6c;
$color-pending: #e6a23c;
$color-tie: #909399;

.pc-digital-detail-container {
  height: 100%;
  padding: 6px 8px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow-y: auto;

  .detail-wrapper {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    /* 移除了 max-width 和 margin: 0 auto，让其 100% 铺满容器 */
  }

  /* 1. 顶部导航卡片 */
  .header-card {
    flex-shrink: 0;
    background-color: $card-bg;
    border-radius: 6px;
    padding: 12px 16px;
    border: 1px solid rgba(255, 255, 255, 0.05);

    .header-left {
      display: flex;
      align-items: center;

      .back-action {
        display: flex; align-items: center; cursor: pointer; color: var(--el-text-color-regular); font-size: 13px; transition: color 0.2s;
        &:hover { color: $main-color; }
        .el-icon { margin-right: 4px; }
      }

      .header-divider { margin: 0 12px; height: 16px; border-left: 1px solid #444; }

      .title-line {
        display: flex; align-items: center;
        .decorate-bar { width: 3px; height: 14px; background-color: $main-color; margin-right: 6px; border-radius: 2px; }
        .title-text { font-size: 15px; font-weight: bold; color: $text-primary; }
      }
    }
  }

  /* 2. 详情内容卡片 */
  .content-card {
    background-color: $card-bg;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 30px 40px;
    display: flex;
    flex-direction: column;
    gap: 30px;
    min-height: 400px;

    &.empty-card {
      align-items: center;
      justify-content: center;
    }

    /* 状态与盈亏概览区 */
    .overview-section {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      padding-bottom: 30px;
      border-bottom: 1px solid $border-color;

      .status-badge-large {
        font-size: 14px; font-weight: bold; padding: 4px 16px; border-radius: 20px; border: 1px solid transparent;
        &.status-pending { color: $color-pending; border-color: rgba(230, 162, 60, 0.3); background: rgba(230, 162, 60, 0.1); }
        &.status-win { color: $color-increase; border-color: rgba(103, 194, 58, 0.3); background: rgba(103, 194, 58, 0.1); }
        &.status-lose { color: $color-decrease; border-color: rgba(245, 108, 108, 0.3); background: rgba(245, 108, 108, 0.1); }
        &.status-tie { color: $color-tie; border-color: rgba(144, 147, 153, 0.3); background: rgba(144, 147, 153, 0.1); }
      }

      .profit-amount {
        font-size: 36px; font-weight: 900; font-family: DIN, monospace; line-height: 1;
        &.text-success { color: $color-increase; text-shadow: 0 0 10px rgba(103,194,58,0.2); }
        &.text-danger { color: $color-decrease; }
        &.text-gray { color: #ccc; }
      }

      .profit-label { font-size: 13px; color: $text-secondary; }
    }

    /* 详细信息列表区 */
    .info-list-section {
      display: flex;
      flex-direction: column;

      .info-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px 0;
        border-bottom: 1px dashed #333;
        font-size: 14px;

        &:last-child { border-bottom: none; }

        .label { color: $text-secondary; }
        .value { color: $text-primary; }

        .order-no-box {
          display: flex; align-items: center; gap: 8px;
          .copy-icon { cursor: pointer; color: $text-secondary; font-size: 14px; transition: color 0.2s; &:hover { color: $main-color; } }
        }

        &.highlight-row {
          background: rgba(255,255,255,0.02);
          padding: 16px 12px;
          margin: 0 -12px;
          border-radius: 6px;
          .bet-number { font-size: 16px; font-weight: bold; color: $main-color; }
        }

        .odds-val { font-weight: bold; color: $main-color; font-family: DIN; font-size: 15px; }
      }
    }
  }

  /* 辅助类 */
  .font-din { font-family: DIN, monospace; }
  .font-mono { font-family: monospace; }
  .fw-bold { font-weight: bold; }
  .currency { font-size: 12px; color: #777; margin-left: 2px; font-weight: normal; }

  /* 原有项目自带深色穿透，若不需要可删除 */
  :deep(.el-empty__description p) { color: $text-secondary; }
}
</style>
