<template>
  <div class="mark-six-pc-container">
    <el-table
        v-loading="loading"
        :data="dataList"
        height="65vh"
        style="width: 100%"
        :header-cell-style="{ background: '#2d2d2d', color: '#fff', border: 'none' }"
        :row-style="{ background: '#212121', color: '#fff' }"
        :cell-style="{ border: 'none' }"
    >
      <el-table-column prop="issue" :label="t('期号')" width="180" />
      <el-table-column prop="open_time" :label="t('开奖时间')" width="200">
        <template #default="{ row }">
          {{ formatTime(row.open_time) }}
        </template>
      </el-table-column>

      <el-table-column :label="t('开奖号码')">
        <template #default="{ row }">
          <div class="lhc-row">
            <template v-for="(num, idx) in getNumbers(row.open_code)" :key="idx">
              <span class="operator" v-if="idx === getNumbers(row.open_code).length - 1">+</span>

              <div class="lhc-col">
                <div class="lhc-ball" :class="getMarkSixColor(num)">
                  {{ num }}
                </div>
                <span class="lhc-zodiac">{{ getMarkSixZodiac(num) }}</span>
              </div>
            </template>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-wrapper" v-if="total > 0">
      <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          v-model:current-page="currentPage"
          @current-change="onPageChange"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { lhcGameHistoryLottery } from "@/request/api";
import { useI18n } from "vue-i18n";

const { t } = useI18n();
const props = defineProps({
  game: { type: String, required: true },
  params: { type: Object, default: () => ({}) }
});

const dataList = ref([]);
const loading = ref(false);
const currentPage = ref(1);
const total = ref(0);

const onQuery = (page = 1) => {
  loading.value = true;
  const queryParams = { page, limit: 10, ...props.params };

  lhcGameHistoryLottery(queryParams).then(res => {
    // 修复：确保兼容 res.data.list 和 res.data 两种格式
    const list = res.data?.list || res.data || [];
    if (res.code === 1) {
      dataList.value = list;
      total.value = res.data?.count || 0; // 假设返回 count
    }
  }).finally(() => {
    loading.value = false;
  });
};

const onPageChange = (val) => onQuery(val);

const formatTime = (timeStr) => (timeStr && timeStr.length >= 16 ? timeStr.substring(5, 16) : timeStr || '');
const getNumbers = (str) => (str ? str.split(',') : []);

const getMarkSixZodiac = (num) => {
  const zodiacs = ['马', '蛇', '龙', '兔', '虎', '牛', '鼠', '猪', '狗', '鸡', '猴', '羊'];
  return zodiacs[(Number(num) - 1) % 12];
};

const getMarkSixColor = (num) => {
  const n = Number(num);
  const red = [1, 2, 7, 8, 12, 13, 18, 19, 23, 24, 29, 30, 34, 35, 40, 45, 46];
  const blue = [3, 4, 9, 10, 14, 15, 20, 21, 25, 26, 31, 32, 36, 37, 41, 42, 47, 48];
  const green = [5, 6, 11, 16, 17, 22, 27, 28, 33, 38, 39, 43, 44, 49];
  if (red.includes(n)) return 'color-red';
  if (blue.includes(n)) return 'color-blue';
  if (green.includes(n)) return 'color-green';
  return '';
};

onMounted(() => onQuery());
</script>

<style scoped lang="scss">
.mark-six-pc-container {
  padding: 10px;
}

.lhc-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;

  .operator { font-size: 18px; color: #888; margin-right: 5px; }

  .lhc-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;

    .lhc-ball {
      width: 34px; height: 34px;
      border-radius: 50%;
      background-color: #fff;
      color: #333;
      display: flex;
      justify-content: center;
      align-items: center;
      font-weight: bold;
      border: 2px solid transparent;
    }

    .color-red { border-color: #f75b5b; }
    .color-blue { border-color: #49b3ff; }
    .color-green { border-color: #40b17b; }

    .lhc-zodiac { font-size: 12px; color: #aaa; }
  }
}

.pagination-wrapper {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

:deep(.el-table) {
  --el-table-tr-bg-color: #212121;
  --el-table-header-bg-color: #2d2d2d;
  color: #fff;
  border-radius: 8px;
}
</style>