<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-main" v-if="detailData">
        <div class="status-side">
          <div class="glass-card status-card">
            <div class="status-icon-wrap" :class="getStatusClass(detailData.lottery_status)">
              <el-icon v-if="detailData.lottery_status === 0"><Clock /></el-icon>
              <el-icon v-else-if="detailData.lottery_status === 2"><CircleCheck /></el-icon>
              <el-icon v-else><CircleClose /></el-icon>
            </div>
            <div class="status-info">
              <span class="status-name">{{ getStatusText(detailData.lottery_status) }}</span>
              <div class="profit-box" :class="getProfitClass(detailData.lottery_status)">
                <span class="currency" v-if="detailData.lottery_status !== 0">{{ $currency || '¥' }}</span>
                <span class="amount-val">{{ getProfitText(detailData) }}</span>
              </div>
              <span class="label">{{ detailData.lottery_status === 0 ? t('预计开奖') : t('盈亏合计') }}</span>
            </div>
          </div>
          
          <div class="glass-card economy-card">
            <div class="eco-item">
              <span class="label">{{ t('投注金额') }}</span>
              <span class="val font-din">{{ parseFloat(detailData.amount || 0).toFixed(2) }}</span>
            </div>
            <div class="eco-divider"></div>
            <div class="eco-item">
              <span class="label">{{ t('派彩金额') }}</span>
              <span class="val font-din" :class="{'text-success': detailData.lottery_status === 2}">
                {{ detailData.lottery_status === 2 ? parseFloat(detailData.win_amount || 0).toFixed(2) : '0.00' }}
              </span>
            </div>
          </div>
        </div>

        <div class="detail-side">
          <div class="glass-card info-card">
            <div class="card-title">
              <el-icon><Tickets /></el-icon>
              <span>{{ t('投注信息') }}</span>
              <el-tag effect="plain" class="ml-auto">{{ detailData.type === 1 ? t('澳门六合彩') : t('香港六合彩') }}</el-tag>
            </div>
            <div class="info-grid">
              <div class="grid-item">
                <span class="label">{{ t('期号') }}</span>
                <span class="val">第 <span class="font-din text-gold">{{ detailData.issue }}</span> 期</span>
              </div>
              <div class="grid-item">
                <span class="label">{{ t('玩法') }}</span>
                <span class="val">[{{ detailData.game }}] - {{ detailData.gameplay }}</span>
              </div>
              <div class="grid-item">
                <span class="label">{{ t('赔率') }}</span>
                <span class="val odds-text">@{{ detailData.odds }}</span>
              </div>
            </div>
            <div class="bet-content-display">
              <span class="label">{{ t('投注内容') }}</span>
              <div class="content-val">{{ detailData.number }}</div>
            </div>
          </div>

          <div class="glass-card result-card" v-if="detailData.lottery && detailData.lottery.open_code">
            <div class="card-title">
              <el-icon><TrendCharts /></el-icon>
              <span>{{ t('开奖结果') }}</span>
              <span class="open-time ml-auto" v-if="detailData.lottery.open_time">
                <el-icon><Calendar /></el-icon>{{ detailData.lottery.open_time }}
              </span>
            </div>
            <div class="lhc-open-code-box">
              <template v-for="(code, index) in detailData.lottery.open_code.split(',')" :key="index">
                <div v-if="index === detailData.lottery.open_code.split(',').length - 1" class="plus-sign">+</div>
                <div :class="['lhc-ball', getBallColorClass(code)]">
                  <span class="ball-inner">{{ code }}</span>
                </div>
              </template>
            </div>
          </div>

          <div class="glass-card archive-card">
            <div class="info-row">
              <span class="label">{{ t('注单单号') }}</span>
              <div class="value order-no">
                <span class="font-din">{{ detailData.ordernum }}</span>
                <el-icon class="copy-btn" @click="copyText(detailData.ordernum)"><DocumentCopy /></el-icon>
              </div>
            </div>
            <div class="info-row">
              <span class="label">{{ t('投注时间') }}</span>
              <span class="value">{{ detailData.created_at }}</span>
            </div>
          </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, Clock, CircleCheck, CircleClose, Tickets, TrendCharts, Calendar } 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(() => {
  const orderId = route.query.id;
  if (orderId) fetchData(orderId);
});

const fetchData = async (id) => {
  try {
    const res = await getDigitalOrderInfo({ id });
    if (res?.code === 1) detailData.value = res.data;
  } catch (e) {
    console.error(e);
  }
};

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

// 六合彩波色(颜色)计算
const getBallColorClass = (numStr) => {
  const num = parseInt(numStr, 10);
  if (isNaN(num)) return 'bg-gray';
  
  const reds = [1, 2, 7, 8, 12, 13, 18, 19, 23, 24, 29, 30, 34, 35, 40, 45, 46];
  const blues = [3, 4, 9, 10, 14, 15, 20, 25, 26, 31, 36, 37, 41, 42, 47, 48];
  const greens = [5, 6, 11, 16, 17, 21, 22, 27, 28, 32, 33, 38, 39, 43, 44, 49];
  
  if (reds.includes(num)) return 'bg-red';
  if (blues.includes(num)) return 'bg-blue';
  if (greens.includes(num)) return 'bg-green';
  
  return 'bg-gray'; // 异常兜底
};

const getStatusText = (s) => {
  const map = { 0: t('待开奖'), 1: t('未中奖'), 2: t('已中奖'), 3: t('合局') };
  return map[Number(s)] || t('未知');
};

const getStatusClass = (s) => {
  const map = { 0: 'status-pending', 1: 'status-lose', 2: 'status-win', 3: 'status-tie' };
  return map[Number(s)];
};

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

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

const copyText = async (txt) => {
  try {
    await navigator.clipboard.writeText(txt);
    ElMessage.success(t('复制成功'));
  } catch (e) {
    ElMessage.error(t('复制失败'));
  }
};
</script>

<style scoped lang="scss">
$card-bg: #1e1e1e;
$main-color: #f8b932;
$border-white: rgba(255, 255, 255, 0.08);

.pc-digital-detail-container {
  height: 100%;
  padding: 12px;
  background-color: #141414;
  overflow-y: auto;

  .detail-wrapper { display: flex; flex-direction: column; gap: 12px; }

  /* 卡片基类 */
  .glass-card {
    background: $card-bg;
    border: 1px solid $border-white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
  }

  .header-card {
    background: $card-bg;
    border-radius: 8px;
    padding: 14px 20px;
    .header-left {
      display: flex; align-items: center;
      .back-action { 
        display: flex; align-items: center; cursor: pointer; color: #999; font-size: 14px;
        &:hover { color: $main-color; }
      }
      .header-divider { margin: 0 15px; background-color: #444; }
      .title-text { font-size: 16px; font-weight: 600; color: #fff; }
      .decorate-bar { width: 4px; height: 16px; background: $main-color; margin-right: 8px; border-radius: 2px; }
    }
  }

  .content-main {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 12px;
  }

  /* 左侧栏 */
  .status-side {
    display: flex; flex-direction: column; gap: 12px;
    .status-card {
      text-align: center;
      padding: 40px 20px;
      .status-icon-wrap {
        width: 60px; height: 60px; border-radius: 50%; margin: 0 auto 20px;
        display: flex; align-items: center; justify-content: center; font-size: 32px;
        &.status-win { background: rgba(103,194,58,0.1); color: #67c23a; }
        &.status-lose { background: rgba(245,108,108,0.1); color: #f56c6c; }
        &.status-pending { background: rgba(230,162,60,0.1); color: #e6a23c; }
      }
      .status-name { display: block; font-size: 18px; font-weight: bold; margin-bottom: 15px; color: #fff; }
      .profit-box {
        margin-bottom: 8px;
        .currency { font-size: 18px; margin-right: 4px; }
        .amount-val { font-size: 42px; font-weight: 900; font-family: DIN; }
      }
      .label { color: #666; font-size: 13px; }
    }
    .economy-card {
      display: flex; justify-content: space-around; align-items: center; padding: 25px;
      .eco-item { 
        display: flex; flex-direction: column; gap: 8px; text-align: center;
        .label { color: #888; font-size: 12px; }
        .val { font-size: 20px; color: #fff; }
      }
      .eco-divider { width: 1px; height: 30px; background: #333; }
    }
  }

  /* 右侧栏 */
  .detail-side {
    display: flex; flex-direction: column; gap: 12px;
    
    .card-title {
      display: flex; align-items: center; gap: 8px; margin-bottom: 25px; font-size: 15px; font-weight: bold; color: #fff;
      .el-icon { color: $main-color; font-size: 18px; }
      .ml-auto { margin-left: auto; }
      .open-time { font-size: 13px; color: #777; font-weight: normal; display: flex; align-items: center; gap: 5px; }
    }

    .info-grid {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 25px;
      .grid-item {
        background: rgba(255,255,255,0.03); padding: 15px; border-radius: 8px;
        .label { display: block; color: #777; font-size: 12px; margin-bottom: 8px; }
        .val { color: #ddd; font-size: 14px; }
        .odds-text { color: #f56c6c; font-weight: bold; font-family: DIN; font-size: 18px; }
      }
    }

    .bet-content-display {
      background: rgba(248, 185, 50, 0.05); border: 1px solid rgba(248, 185, 50, 0.1);
      padding: 20px; border-radius: 8px;
      .label { color: #888; font-size: 12px; margin-bottom: 10px; display: block; }
      .content-val { font-size: 24px; font-weight: 900; color: $main-color; letter-spacing: 1px; }
    }

    .lhc-open-code-box {
      display: flex; align-items: center; gap: 12px; padding: 10px 0;
      .plus-sign { font-size: 24px; color: #555; font-weight: bold; }
      .lhc-ball {
        width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
        box-shadow: 0 4px 10px rgba(0,0,0,0.3), inset 0 -4px 4px rgba(0,0,0,0.2); position: relative;
        &::after { content: ''; position: absolute; top: 4px; left: 8px; width: 12px; height: 8px; background: rgba(255,255,255,0.2); border-radius: 50%; }
        .ball-inner { font-size: 18px; font-weight: 900; color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,0.3); }
        &.bg-red { background: linear-gradient(135deg, #ff6b6b 0%, #dc2626 100%); }
        &.bg-blue { background: linear-gradient(135deg, #60a5fa 0%, #2563eb 100%); }
        &.bg-green { background: linear-gradient(135deg, #34d399 0%, #059669 100%); }
        &.bg-gray { background: linear-gradient(135deg, #9ca3af 0%, #4b5563 100%); }
      }
    }

    .archive-card {
      .info-row {
        display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid #2a2a2a;
        &:last-child { border-bottom: none; }
        .label { color: #666; font-size: 13px; }
        .value { color: #aaa; font-size: 13px; }
        .order-no { display: flex; align-items: center; gap: 8px; .copy-btn { cursor: pointer; &:hover { color: $main-color; } } }
      }
    }
  }
}

.font-din { font-family: DIN, monospace; }
.text-gold { color: $main-color; }
.text-success { color: #67c23a; }
.text-danger { color: #f56c6c; }
.text-gray { color: #666; }
.ml-auto { margin-left: auto; }
</style>