<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" />
            <el-tag :type="getStatusTag(orderInfo.status).type" effect="dark" class="status-tag">
              {{ getStatusTag(orderInfo.status).text }}
            </el-tag>
          </div>
        </template>

        <template #extra>
          <div class="header-right">
            <span class="profit-label">{{ t('盈亏金额') }}：</span>
            <span class="profit-val" :class="getProfitClass(orderInfo.status)">
              {{ 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 v-if="orderInfo.type" size="small" class="custom-dark-tag">
              {{ orderInfo.type === 1 ? t('极速赛车') :
                orderInfo.type === 2 ? t('极速时时彩') :
                    orderInfo.type === 3 ? t('极速飞艇') :
                        orderInfo.type === 4 ? t('SG时时彩') :
                            orderInfo.type === 5 ? t('SG飞艇') :
                                orderInfo.type === 6 ? t('极速快3') :
                                    orderInfo.type === 7 ? t('SG快3') :
                                        '--' }}
            </el-tag>
            <span v-else class="empty-text">--</span>
          </el-descriptions-item>

          <el-descriptions-item :label="t('投注内容')">
            <span class="highlight-keyword">
              <span v-if="orderInfo.gameplay?.game">{{ locale === 'zh' ? orderInfo.gameplay?.game : (orderInfo.gameplay?.game_en || orderInfo.gameplay?.game) }} / </span>
              {{ locale === 'zh' ? orderInfo.gameplay?.gameplay : (orderInfo.gameplay?.gameplay_en || orderInfo.gameplay?.gameplay) }} /

              <template v-if="isDiceName(orderInfo)">
                <div class="dice-wrapper" style="display: inline-flex; vertical-align: middle;">
                  <span
                      class="dice-item"
                      :class="['dice-' + num, (num == 1 || num == 4) ? 'dice-red' : '']"
                      v-for="(num, index) in getBetNumber(orderInfo).split(',')"
                      :key="'bet-dice-'+index"
                  >
                    <i class="dot" v-for="i in Number(num)" :key="i"></i>
                  </span>
                </div>
              </template>
              <template v-else>
                {{ getBetNumber(orderInfo) }}
              </template>
            </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">{{orderInfo.issue }}</span>
          </el-descriptions-item>

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

          <el-descriptions-item :label="t('派彩金额')">
            <span class="amount-val" :class="{'text-success': Number(orderInfo.status) === 2}">
              {{ Number(orderInfo.status) === 2 ? parseFloat(orderInfo.win_amount || 0).toFixed(2) : '0.00' }}
            </span>
          </el-descriptions-item>

          <el-descriptions-item :label="t('开奖结果')" :span="3" v-if="orderInfo.open_code || orderInfo.open_code_other">
            <div class="open-result-box">
              <div class="res-balls" v-if="orderInfo.open_code">

                <template v-if="isKuai3Dice(orderInfo)">
                  <span
                      class="dice-item"
                      :class="['dice-' + num, (num == 1 || num == 4) ? 'dice-red' : '']"
                      v-for="(num, index) in orderInfo.open_code.split(',')"
                      :key="'dice-'+index"
                  >
                    <i class="dot" v-for="i in Number(num)" :key="i"></i>
                  </span>
                </template>

                <template v-else>
                  <span
                      class="ball-item"
                      :class="getBallColorClass(num, orderInfo.type || orderInfo.gameplay?.type)"
                      v-for="(num, index) in orderInfo.open_code.split(',')"
                      :key="'code-'+index"
                  >
                    {{ num }}
                  </span>
                </template>

              </div>
              <div class="res-others" v-if="orderInfo.open_code_other">
                <el-tag
                    v-for="(tag, idx) in orderInfo.open_code_other.split(',')"
                    :key="'other-'+idx"
                    size="small"
                    class="custom-dark-tag"
                >
                  {{ tag }}
                </el-tag>
              </div>
            </div>
          </el-descriptions-item>
        </el-descriptions>
      </div>

      <div class="section-container">
        <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('订单单号')">
            <div class="order-num-box">
              <span class="issue-text">{{ orderInfo.ordernum }}</span>
              <el-icon class="copy-icon" @click="copyText(orderInfo.ordernum)"><DocumentCopy /></el-icon>
            </div>
          </el-descriptions-item>

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

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

          <el-descriptions-item :label="t('备注')" v-if="orderInfo.remark" :span="2">
            <span class="text-danger">{{ orderInfo.remark }}</span>
          </el-descriptions-item>
        </el-descriptions>
      </div>

    </el-card>

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

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

const { t, locale } = useI18n()
const route = useRoute()
const router = useRouter()
const orderInfo = ref(null)

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

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

const fetchDetail = async (id) => {
  try {
    const res = await getJisuGameOrderInfo({ id })
    if (res && res.code === 1) {
      orderInfo.value = res.data
    } else {
      ElMessage.warning(res.msg || t('暂无数据'))
    }
  } catch (e) {
    ElMessage.error(t('网络异常'))
  }
}

// 状态枚举：0 待开奖，1未中奖 2已中奖 3 已退款
const getStatusTag = (status) => {
  const s = Number(status)
  if (s === 0) return { text: t('待开奖'), type: 'warning' }
  if (s === 1) return { text: t('未中奖'), type: 'danger' }
  if (s === 2) return { text: t('已中奖'), type: 'success' }
  if (s === 3) return { text: t('已退款'), type: 'info' }
  return { text: t('未知'), type: 'info' }
}

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

const formatProfit = (info) => {
  const status = Number(info.status)
  if (status === 0) return '--'
  if (status === 1) return `-${parseFloat(info.amount || 0).toFixed(2)}`
  if (status === 2) return `+${parseFloat(info.profit_and_loss || info.win_amount || 0).toFixed(2)}`
  if (status === 3) return '0.00'
  return '0.00'
}

// 动态获取开奖球颜色 Class
const getBallColorClass = (numStr, typeCode) => {
  if (!numStr) return '';
  const tNum = Number(typeCode);

  if ([1, 3, 5].includes(tNum)) {
    const num = parseInt(numStr, 10);
    return `color-${num}`;
  } else if ([2, 4].includes(tNum)) {
    return 'wave-blue';
  }

  return 'wave-blue';
}

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('复制成功'))
  }
}

// 判断是否展示快3开奖骰子
const isKuai3Dice = (info) => {
  if (!info) return false;
  const tNum = Number(info.type || info.gameplay?.type);
  if ([6, 7].includes(tNum) && info.open_code) {
    return info.open_code.split(',').length === 3;
  }
  return false;
};

// 获取投注号码内容
const getBetNumber = (info) => {
  if (!info || !info.gameplay) return '';
  return locale.value === 'zh' ? info.gameplay.number : (info.gameplay.number_en || info.gameplay.number);
};

// 检查投注项是否为纯数字组合的骰子项
const isDiceName = (info) => {
  if (!info || !info.gameplay) return false;
  const tNum = Number(info.type || info.gameplay.type);
  const name = getBetNumber(info);
  if ([6, 7].includes(tNum) && name) {
    return /^[1-6](,[1-6])*$/.test(name);
  }
  return false;
};
</script>

<style scoped lang="scss">
$main-color: #f8b932;

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

  min-height: 100%;
  padding: 16px;
  box-sizing: border-box;
  background-color: #121212; /* 外层极致暗色背景 */

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

  .detail-card {
    border-radius: 6px;
    padding: 12px;
    background-color: #212121; /* 卡片暗色背景 */
    border: 1px solid #333333; /* 暗色边框 */

    /* 局部重写 Element Plus 变量以强制开启完美暗黑模式 */
    --el-text-color-primary: #e5e5e5;
    --el-text-color-regular: #9ca3af;
    --el-text-color-secondary: #6b7280;
    --el-border-color-lighter: #374151; /* 表格内边框线色 */
    --el-fill-color-light: #2a2a2a; /* Label背景色 */
    --el-bg-color-overlay: #212121;
    --el-border-color-light: #333333;

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

  .skeleton-card {
    background-color: #212121;
    --el-skeleton-color: #333;
    --el-skeleton-to-color: #444;
  }
}

/* =======================================
   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; color: #e5e5e5; }
  :deep(.el-page-header__title) { font-size: 13px; color: #e5e5e5; }

  /* 极限小屏下允许头部内容换行折叠 */
  :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; border-color: #4b5563; }

    .status-tag {
      margin-left: 6px; height: 18px; padding: 0 6px; line-height: 16px; font-size: 11px; 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: 20px;
      font-weight: bold;
      font-family: DIN, monospace;
      @container detail-container (max-width: 550px) { font-size: 16px; }
    }
  }
}

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

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

/* =======================================
   3. 描述列表 (el-descriptions) 深度定制
   ======================================= */
:deep(.admin-descriptions) {
  .el-descriptions__body {
    background-color: transparent;
  }

  /* 基础压缩：边距、字号 */
  .el-descriptions__cell {
    padding: 10px 14px !important; font-size: 13px;
    @container detail-container (max-width: 800px) { padding: 8px 10px !important; font-size: 12px; }
    @container detail-container (max-width: 550px) { padding: 6px 8px !important; }
  }

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

  .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%;
      border-right: 1px solid var(--el-border-color-lighter) !important;
      display: flex; align-items: center;
    }

    .el-descriptions__content {
      width: 65%;
      display: flex; align-items: center; word-break: break-all;
    }
  }
}

/* =======================================
   4. 详情内部业务元素
   ======================================= */
.custom-dark-tag {
  background-color: #2b3648 !important; /* 暗色系下的弱色Tag */
  border-color: transparent !important;
}

.highlight-keyword { font-size: 13px; font-weight: bold; color: #e5e5e5; @container detail-container (max-width: 800px) { font-size: 12px; } }
.odds-val { font-weight: bold; color: $main-color;  font-size: 14px; @container detail-container (max-width: 800px) { font-size: 13px; } }
.amount-val { font-weight: bold;  font-size: 13px; color: #d1d5db; @container detail-container (max-width: 800px) { font-size: 12px; } }
.issue-text { font-family: monospace; color: var(--el-text-color-regular); font-size: 13px; }
.time-text { font-family: monospace; color: var(--el-text-color-regular); font-size: 13px; }
.empty-text { color: var(--el-text-color-placeholder); }

.order-num-box {
  display: flex; align-items: center; gap: 6px;
  .copy-icon { cursor: pointer; color: #cda452; font-size: 14px; transition: color 0.2s; &:hover { color: $main-color; } }
}

/* 辅助色彩 */
.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; }


/* =======================================
   5. 开奖结果样式
   ======================================= */
.open-result-box {
  display: flex;
  flex-direction: column;
  gap: 8px;

  .res-balls {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;

    .ball-item {
      width: 24px;
      height: 24px;
      color: #ffffff;
      font-size: 12px;
      font-weight: bold;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: #ccc;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);

      &.wave-blue { background: linear-gradient(135deg, #42a5f5, #1e88e5); box-shadow: 0 1px 3px rgba(66, 165, 245, 0.3); }
      &.color-1 { background: #E6DE00; text-shadow: 0 1px 1px rgba(0,0,0,0.3); box-shadow: 0 1px 3px rgba(230, 222, 0, 0.3); }
      &.color-2 { background: #0092FF; box-shadow: 0 1px 3px rgba(0, 146, 255, 0.3); }
      &.color-3 { background: #4D4D4D; box-shadow: 0 1px 3px rgba(77, 77, 77, 0.3); }
      &.color-4 { background: #FF7600; box-shadow: 0 1px 3px rgba(255, 118, 0, 0.3); }
      &.color-5 { background: #17E2E5; box-shadow: 0 1px 3px rgba(23, 226, 229, 0.3); }
      &.color-6 { background: #5234FF; box-shadow: 0 1px 3px rgba(82, 52, 255, 0.3); }
      &.color-7 { background: #BFBFBF; box-shadow: 0 1px 3px rgba(191, 191, 191, 0.3); }
      &.color-8 { background: #FF2600; box-shadow: 0 1px 3px rgba(255, 38, 0, 0.3); }
      &.color-9 { background: #780B00; box-shadow: 0 1px 3px rgba(120, 11, 0, 0.3); }
      &.color-10 { background: #07BF00; box-shadow: 0 1px 3px rgba(7, 191, 0, 0.3); }
    }
  }

  .res-others {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
}

/* =======================================
   6. 快3 骰子公共样式
   ======================================= */
.dice-wrapper {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}

.dice-item {
  width: 25px;
  height: 25px;
  background-color: #ffffff;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  display: grid;
  padding: 2px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.05), 0 1px 3px rgba(0,0,0,0.1);
  box-sizing: border-box;
  flex-shrink: 0;

  .dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: #303133;
    justify-self: center;
    align-self: center;
  }

  &.dice-1 { .dot:nth-child(1) { grid-column: 2; grid-row: 2; width: 5px; height: 5px; } }
  &.dice-2 { .dot:nth-child(1) { grid-column: 1; grid-row: 1; } .dot:nth-child(2) { grid-column: 3; grid-row: 3; } }
  &.dice-3 { .dot:nth-child(1) { grid-column: 1; grid-row: 1; } .dot:nth-child(2) { grid-column: 2; grid-row: 2; } .dot:nth-child(3) { grid-column: 3; grid-row: 3; } }
  &.dice-4 {
    .dot:nth-child(1) { grid-column: 1; grid-row: 1; }
    .dot:nth-child(2) { grid-column: 3; grid-row: 1; }
    .dot:nth-child(3) { grid-column: 1; grid-row: 3; }
    .dot:nth-child(4) { grid-column: 3; grid-row: 3; }
  }
  &.dice-5 {
    .dot:nth-child(1) { grid-column: 1; grid-row: 1; }
    .dot:nth-child(2) { grid-column: 3; grid-row: 1; }
    .dot:nth-child(3) { grid-column: 2; grid-row: 2; }
    .dot:nth-child(4) { grid-column: 1; grid-row: 3; }
    .dot:nth-child(5) { grid-column: 3; grid-row: 3; }
  }
  &.dice-6 {
    .dot:nth-child(1) { grid-column: 1; grid-row: 1; }
    .dot:nth-child(2) { grid-column: 1; grid-row: 2; }
    .dot:nth-child(3) { grid-column: 1; grid-row: 3; }
    .dot:nth-child(4) { grid-column: 3; grid-row: 1; }
    .dot:nth-child(5) { grid-column: 3; grid-row: 2; }
    .dot:nth-child(6) { grid-column: 3; grid-row: 3; }
  }

  &.dice-red .dot {
    background-color: #f56c6c;
  }
}
</style>