<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-if="detailData.lottery_status === 1"><CircleClose /></el-icon>
              <el-icon v-else><Warning /></el-icon>
            </div>
            <div class="status-info">
              <span class="status-name">{{ getLotteryStatusTag(detailData.lottery_status, t).text }}</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">{{ t('投注金额') }}</span>
              <span class="val font-din" style="margin-left: 8px">{{ parseFloat(detailData.total_amount || 0).toFixed(2) }}</span>
            </div>
          </div>

          <div class="glass-card result-card" v-if="detailData.lottery?.open_code || detailData.open_code">
            <div class="card-title" style="margin-bottom: 20px;align-items: center;display: flex;gap: 6px">
              <el-icon color="#f8b932" size="24"><TrendCharts /></el-icon>
              <span style="font-weight: bold">{{ 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="result-component-wrapper">
              <LotteryOpenResult :row="detailData" />
            </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" :type="getLotteryTypeTag(detailData.type)">
                {{ getLotteryGameName(detailData.type, 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.game}] - ` : '' }}{{ detailData.gameplay }} - </span>

                <span class="val" v-for="(item, index) in detailData.items" :key="index">
                  <span v-if="index !== 0">,</span>{{ item.number }}
                </span>
              </div>
              <div class="grid-item">
                <span class="label">{{ t('赔率') }}</span>
                <span class="val odds-text">@{{ detailData.odds }}</span>
              </div>
            </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" v-if="detailData.ordernum" @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 class="info-row" v-if="detailData.updated_at">
              <span class="label">{{ t('更新时间') }}</span>
              <span class="value">{{ detailData.updated_at }}</span>
            </div>
            <div class="info-row" v-if="detailData.remark">
              <span class="label">{{ t('备注') }}</span>
              <span class="value text-danger">{{ detailData.remark }}</span>
            </div>
            <div class="info-row action-row" v-if="detailData.lottery_status == 0">
              <el-button type="danger" plain @click="handleRefund">{{ t('撤单') }}</el-button>
            </div>
          </div>
        </div>
      </div>

      <div class="content-card empty-card" v-else>
        <el-empty :description="t('数据查询中...')" />
      </div>

      <el-dialog v-model="showRefundDialog" :title="t('提示')" width="400px" align-center>
        <div class="refund-dialog-content">
          <div class="confirm-text">{{ t('确定要撤销该注单吗？') }}</div>
          <el-checkbox v-model="isRefundAll">{{ t('是否撤销本期的所有投注') }}</el-checkbox>
        </div>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="showRefundDialog = false">{{ t('取消') }}</el-button>
            <el-button type="primary" @click="confirmRefund">{{ t('确定') }}</el-button>
          </span>
        </template>
      </el-dialog>
    </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, Warning, Tickets, TrendCharts, Calendar } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';

import { getLotteryGameName, getLotteryTypeTag, getLotteryStatusTag } from './game.js';
import LotteryOpenResult from './OpenResult.vue';

import { getDigitalOrderInfo, lhcOrderRefund } from '@/request/api.js';

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

const showRefundDialog = ref(false);
const isRefundAll = ref(false);

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

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 === 1 || s === 2) {
    const val = Number(d.win_amount || 0);
    return val > 0 ? `+${val.toFixed(2)}` : val.toFixed(2);
  }
  return '0.00';
};

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

const handleRefund = () => {
  isRefundAll.value = false;
  showRefundDialog.value = true;
};

// 撤单请求
const confirmRefund = async () => {
  try {
    const orderId = route.query.id;
    const params = {};

    if (isRefundAll.value && detailData.value) {
      params.issue = detailData.value.issue;
      params.type = detailData.value.type;
    } else {
      params.id = orderId;
    }

    const res = await lhcOrderRefund(params);
    if (res?.code === 1) {
      fetchData(orderId);
    }
  } catch (e) {
    console.error(e);
  } finally {
    showRefundDialog.value = false;
  }
};
</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: 420px 1fr;
    gap: 12px;

    @media (max-width: 800px) {
      grid-template-columns: 1fr;
    }
  }

  .status-side {
    display: flex; flex-direction: column; gap: 12px;
    .status-card {
      text-align: center;
      padding: 30px 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-tie { background: rgba(144,147,153,0.1); color: #909399; }
      }
      .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;
    @media (max-width: 550px) {
      grid-template-columns: repeat(2, 1fr);
    }
    .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; }
  }

  .result-component-wrapper {
    background: rgba(255,255,255,0.03);
    padding: 20px;
    border-radius: 8px;
  }

  .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; } } }
      &.action-row {
        justify-content: flex-end;
        padding-top: 16px;
      }
    }
  }
}

.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; }

.refund-dialog-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 0;

  .confirm-text {
    font-size: 16px;
    margin-bottom: 20px;
    color: #fff;
  }
}
</style>