<template>
  <div class="pc-admin-detail-container">
    <el-card class="detail-card" shadow="never" v-if="orderInfo">

      <el-page-header @back="goBack" class="detail-page-header" :title="t('返回')">
        <template #content>
          <div class="header-content">
            <span class="title">{{ t('注单详情') }}</span>
            <el-divider direction="vertical" class="mx-3" />
<!--            <span class="order-id">NO.{{ orderInfo.id }}</span>-->
<!--            <el-icon class="copy-icon" @click="copyText(String(orderInfo.id))"><DocumentCopy /></el-icon>-->
            <el-tag :type="getGameStatusTag(orderInfo).type" effect="dark" class="status-tag">
              {{ getGameStatusTag(orderInfo).text }}
            </el-tag>
          </div>
        </template>

        <template #extra>
          <div class="header-right">
            <span class="profit-label">{{ t('盈亏金额') }}：</span>
            <span class="profit-val" :class="getProfitClass(orderInfo)">
              {{ formatProfit(orderInfo) }}
            </span>
          </div>
        </template>
      </el-page-header>

      <div class="section-container">
        <div class="section-title">
          <div class="decorate-bar bmc"></div>
          <span>{{ t('投注明细') }}</span>
        </div>

        <el-descriptions :column="3" border class="admin-descriptions">
          <el-descriptions-item :label="t('玩法类型')">
            <el-tag :type="Number(orderInfo.is_pc) === 1 ? 'primary' : 'success'" effect="plain" size="small">
              {{ Number(orderInfo.is_pc) === 1 ? t('加拿大')+28 : t('极速')+28 }}
            </el-tag>
          </el-descriptions-item>

          <el-descriptions-item :label="t('投注项')">
            <span class="highlight-keyword">{{ orderInfo.keywords || '-' }}</span>
          </el-descriptions-item>

          <el-descriptions-item :label="t('赔率')">
            <span class="odds-val">@{{ orderInfo.odds || '0.00' }}</span>
          </el-descriptions-item>

          <el-descriptions-item :label="t('投注本金')">
            <span class="amount-val">{{ parseFloat(orderInfo.amount) }}</span>
          </el-descriptions-item>

          <el-descriptions-item :label="t('下注时间')">
            <span class="time-text">{{ orderInfo.created_at }}</span>
          </el-descriptions-item>

          <el-descriptions-item :label="t('更新时间')">
            <span class="time-text">{{ orderInfo.updated_at }}</span>
          </el-descriptions-item>
        </el-descriptions>
      </div>

      <div class="section-container" v-if="orderInfo.issue">
        <div class="section-title">
          <div class="decorate-bar bmc"></div>
          <span>{{ t('开奖信息') }}</span>
        </div>

        <el-descriptions :column="2" border class="admin-descriptions">
          <el-descriptions-item :label="t('开奖期号')">
            <span class="issue-text">{{ orderInfo.issue.issue_no }} {{ t('期') }}</span>
          </el-descriptions-item>

          <el-descriptions-item :label="t('开奖结果')">
            <div class="draw-result-compact" v-if="balls.length > 0">
              <div class="ball">{{ balls[0] }}</div>
              <span class="operator">+</span>
              <div class="ball">{{ balls[1] }}</div>
              <span class="operator">+</span>
              <div class="ball">{{ balls[2] }}</div>
              <span class="operator">=</span>
              <div class="ball result-ball">{{ ballSum }}</div>
            </div>
            <span v-else class="empty-text">{{ t('等待开奖中...') }}</span>
          </el-descriptions-item>

          <el-descriptions-item :label="t('结果属性')" v-if="orderInfo.issue.combo">
            <div class="tags-group">
              <el-tag
                  v-for="(tag, i) in orderInfo.issue.combo"
                  :key="i"
                  :type="getTagType(tag)"
                  effect="dark"
                  size="small"
              >
                {{ tag }}
              </el-tag>
            </div>
          </el-descriptions-item>

          <el-descriptions-item :label="t('开奖截图')" v-if="orderInfo.issue.image">
            <el-image
                class="screenshot-img"
                :src="orderInfo.issue.image"
                :preview-src-list="[orderInfo.issue.image]"
                preview-teleported
                fit="cover"
            />
          </el-descriptions-item>
        </el-descriptions>
      </div>

    </el-card>

    <el-card shadow="never" class="detail-card" v-else>
      <el-skeleton :rows="6" animated />
    </el-card>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { betInfo } from '@/request/api.js'
import { DocumentCopy } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const { t } = useI18n()
const route = useRoute()
const router = useRouter() // 引入 router
const orderInfo = ref(null)

onMounted(() => {
  if (route.query.id) {
    fetchDetail(route.query.id)
  }
})

// 返回上一页逻辑
const goBack = () => {
  router.back()
}

const fetchDetail = async (id) => {
  const res = await betInfo({ id })
  if (res && res.code === 1) {
    orderInfo.value = res.data
  }
}

// 核心状态判断
const isWin = computed(() => {
  if (!orderInfo.value) return false
  return Number(orderInfo.value.profit) > 0 || orderInfo.value.is_winner === 1
})

const getGameStatusTag = (info) => {
  const status = Number(info.status)
  if (status === 1) return { text: t('待结算'), type: 'warning' }
  if (status === 2) return { text: isWin.value ? t('已中奖') : t('未中奖'), type: isWin.value ? 'success' : 'danger' }
  return { text: t('未知'), type: 'info' }
}

const getProfitClass = (info) => {
  const status = Number(info.status)
  if (status === 1) return 'text-gray'
  if (status === 2 && !isWin.value) return 'text-danger'
  return 'text-success'
}

const formatProfit = (info) => {
  const status = Number(info.status)
  if (status === 1) return '--'
  if (status === 2 && !isWin.value) return `-${Number(info.amount).toFixed(2)}`
  return `+${Number(info.profit).toFixed(2)}`
}

// 开奖球逻辑
const balls = computed(() => {
  if (!orderInfo.value?.issue?.winning_numbers) return []
  return orderInfo.value.issue.winning_numbers.split(',')
})

const ballSum = computed(() => {
  if (balls.value.length === 0) return 0
  return balls.value.reduce((sum, val) => sum + Number(val), 0)
})

const getTagType = (text) => {
  if (['大', '双', '极大'].includes(text)) return 'danger'
  if (['小', '单', '极小'].includes(text)) return 'success'
  return 'primary'
}

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">
$main-color: #f8b932;

.pc-admin-detail-container {
  /* 声明顶级盒子为容器查询基准点 */
  container-type: inline-size;
  container-name: detail-container;

  min-height: 100%;
  padding: 6px 8px; /* 整体外边距极限压缩 */
  box-sizing: border-box;

  @container detail-container (max-width: 800px) { padding: 4px; }
  @container detail-container (max-width: 550px) { padding: 2px; }

  .detail-card {
    border-radius: 6px;
    background-color: var(--el-bg-color-overlay);
    border: 1px solid var(--el-border-color-light);
    padding: 12px; /* 卡片内边距压缩 */

    @container detail-container (max-width: 800px) { padding: 8px; }
    @container detail-container (max-width: 550px) { padding: 6px; }
  }
}

/* =======================================
   1. 顶部 Header 样式压缩
   ======================================= */
.detail-page-header {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--el-border-color-lighter);
  margin-bottom: 16px;

  /* 悬停返回按钮时的颜色反馈 */
  :deep(.el-page-header__back:hover) { color: $main-color; }
  :deep(.el-page-header__back) { margin-right: 8px; }
  :deep(.el-page-header__title) { font-size: 13px; }

  /* 极限小屏下允许头部内容换行折叠 */
  :deep(.el-page-header__header) {
    @container detail-container (max-width: 550px) { flex-wrap: wrap; gap: 8px; }
  }

  .header-content {
    display: flex; align-items: center; flex-wrap: wrap; gap: 4px;

    .title { font-size: 14px; font-weight: bold; color: var(--el-text-color-primary); }
    .mx-3 { margin: 0 6px; height: 12px; }
    .order-id {  font-size: 12px; color: var(--el-text-color-regular); margin-right: 2px; }
    .copy-icon { cursor: pointer; color: var(--el-text-color-secondary); font-size: 13px; transition: color 0.2s; &:hover { color: $main-color; } }

    .status-tag {
      margin-left: 6px; height: 18px; padding: 0 4px; line-height: 16px; font-size: 10px; border-radius: 2px;
    }
  }

  .header-right {
    display: flex; align-items: baseline;
    .profit-label { font-size: 12px; color: var(--el-text-color-regular); }
    .profit-val {
      font-size: 18px; /* 盈亏金额字号压缩 */
      font-weight: bold;
      @container detail-container (max-width: 550px) { font-size: 16px; }
    }
  }
}

/* =======================================
   2. 区块标题与间距压缩
   ======================================= */
.section-container {
  margin-bottom: 16px;
  @container detail-container (max-width: 550px) { margin-bottom: 12px; }

  .section-title {
    display: flex; align-items: center; margin-bottom: 10px;
    .decorate-bar { width: 3px; height: 12px; border-radius: 2px; background-color: $main-color; margin-right: 6px; }
    span { font-size: 13px; font-weight: bold; color: var(--el-text-color-primary); }
  }
}

/* =======================================
   3. 描述列表 (el-descriptions) 深度瘦身
   ======================================= */
:deep(.admin-descriptions) {
  /* 基础压缩：边距、字号 */
  .el-descriptions__cell {
    padding: 8px 12px !important; font-size: 12px;
    @container detail-container (max-width: 800px) { padding: 6px 8px !important; font-size: 11px; }
    @container detail-container (max-width: 550px) { padding: 4px 6px !important; }
  }

  .el-descriptions__label {
    width: 90px; background-color: var(--el-fill-color-light) !important; color: var(--el-text-color-regular); font-weight: normal;
    @container detail-container (max-width: 800px) { width: 70px; }
  }

  .el-descriptions__content { background-color: transparent !important; color: var(--el-text-color-primary); }

  /* 降维打击：极限小屏下，强行打破原生 Table 布局，改为流式 Flex 堆叠，防止文字挤压重叠 */
  @container detail-container (max-width: 550px) {
    table, tbody, tr, th, td { display: block; width: 100%; box-sizing: border-box; }
    tbody { display: flex; flex-direction: column; }
    tr { display: flex; align-items: stretch; border-bottom: 1px solid var(--el-border-color-lighter); }
    tr:last-child { border-bottom: none; }

    .el-descriptions__cell { border: none !important; } /* 清除原生表格边框干扰 */

    .el-descriptions__label {
      width: 35%; /* 标题占 35% */
      border-right: 1px solid var(--el-border-color-lighter) !important;
      display: flex; align-items: center;
    }

    .el-descriptions__content {
      width: 65%; /* 内容占 65% */
      display: flex; align-items: center; word-break: break-all;
    }
  }
}

/* =======================================
   4. 详情内部业务元素 (文字、标签、开奖球)
   ======================================= */
.highlight-keyword { font-size: 13px; font-weight: bold; color: $main-color; @container detail-container (max-width: 800px) { font-size: 12px; } }
.odds-val { font-weight: bold; color: $main-color;  font-size: 13px; @container detail-container (max-width: 800px) { font-size: 12px; } }
.amount-val { font-weight: bold;  font-size: 13px; @container detail-container (max-width: 800px) { font-size: 12px; } }
.issue-text {  color: var(--el-text-color-regular); }
.time-text { color: var(--el-text-color-regular);  }
.empty-text { color: var(--el-text-color-placeholder); }

/* 玩法类型 Tag 压缩 */
:deep(.el-tag--small) { height: 20px; padding: 0 6px; line-height: 18px; font-size: 11px; }

/* 精致化的开奖球 */
.draw-result-compact {
  display: flex; align-items: center; gap: 6px;

  @container detail-container (max-width: 800px) { gap: 4px; }
  @container detail-container (max-width: 550px) { gap: 2px; }

  .ball {
    width: 22px; height: 22px; /* 体积极限压缩 */
    border-radius: 50%; background-color: var(--el-fill-color); border: 1px solid var(--el-border-color); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: bold; color: var(--el-text-color-primary); box-shadow: inset 0 -1px 0 rgba(0,0,0,0.05);

    @container detail-container (max-width: 800px) { width: 20px; height: 20px; font-size: 11px; }
    @container detail-container (max-width: 550px) { width: 18px; height: 18px; font-size: 10px; border-width: 1px; }

    &.result-ball {
      background-color: var(--el-color-danger); border-color: var(--el-color-danger); color: #fff; font-size: 13px; box-shadow: 0 1px 3px rgba(245,108,108,0.4);
      @container detail-container (max-width: 800px) { font-size: 12px; }
      @container detail-container (max-width: 550px) { font-size: 11px; }
    }
  }

  .operator {
    color: var(--el-text-color-secondary); font-weight: bold; font-size: 13px;
    @container detail-container (max-width: 800px) { font-size: 12px; }
  }
}

/* 结果属性标签组 */
.tags-group {
  display: flex; gap: 4px; flex-wrap: wrap;
  .el-tag { height: 18px; padding: 0 4px; line-height: 16px; font-size: 10px; border-radius: 2px; }
}

/* 截图缩略图 */
.screenshot-img {
  width: 40px; height: 40px; border-radius: 4px; border: 1px solid var(--el-border-color-lighter); cursor: zoom-in;
  @container detail-container (max-width: 550px) { width: 30px; height: 30px; }
}

/* 辅助色彩 */
.text-success { color: var(--el-color-success) !important; }
.text-danger { color: var(--el-color-danger) !important; }
.text-gray { color: var(--el-text-color-placeholder) !important; }
</style>
