<template>
  <div class="pc28-pc-container">
    <el-table
        v-loading="loading"
        :data="dataList"
        style="width: 100%"
        height="65vh"

        :header-cell-style="{ background: '#2d2d2d', color: '#fff', border: 'none' }"
        :row-style="{ background: '#212121', color: '#fff' }"
        :cell-style="{ border: 'none' }"
    >
      <el-table-column prop="issue_no" :label="t('期号')" width="180" />
      <el-table-column prop="day" :label="t('开奖时间')" width="180" />

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

      <el-table-column :label="t('属性')" width="300">
        <template #default="{ row }">
          <div class="tags-row">
            <div
                class="combo-tag"
                v-for="(tag, tagIdx) in getComboTags(row.combo)"
                :key="tagIdx"
                :class="getTagClass(tag)"
            >
              {{ tag }}
            </div>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-wrapper">
      <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 { gameHistoryPcIssue, gameHistoryIssue } 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: 20, ...props.params };
  const requestApi = props.game === 'canada28' ? gameHistoryIssue(queryParams) : gameHistoryPcIssue(queryParams);

  requestApi.then(res => {
    if (res.code === 1 && res.data) {
      dataList.value = res.data.list || [];
      total.value = res.data.count || 0;
    }
  }).finally(() => {
    loading.value = false;
  });
};

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

const getNumbers = (str) => (str ? str.split(',') : []);
const getSum = (numbers) => numbers.reduce((sum, num) => sum + Number(num), 0);
const getComboTags = (combo) => {
  if (!combo) return [];
  return Array.isArray(combo) ? combo : String(combo).split(' ').filter(Boolean);
};

const getTagClass = (tag) => {
  if (['大', '双', '极大'].includes(tag)) return 'tag-red';
  if (['小', '单', '极小'].includes(tag)) return 'tag-green';
  if (tag.includes('尾')) return 'tag-yellow';
  return 'tag-default';
};

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

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

.equation-row {
  display: flex;
  align-items: center;
  flex-wrap: nowrap; // 确保不换行
  gap: 8px; // 使用 gap 替代 margin，布局更稳定

  .grey-ball, .red-sum-ball {
    width: 32px;      // 固定宽度
    height: 32px;     // 固定高度
    flex-shrink: 0;   // 【关键】禁止收缩，防止挤压变椭圆
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 14px;
  }

  .grey-ball {
    background-color: #333; // 暗色系背景
    color: #ddd;
  }

  .red-sum-ball {
    background-color: #f75b5b;
    color: #fff;
  }

  .operator {
    color: #888;
    font-size: 16px;
    flex-shrink: 0; // 加号和等号也禁止收缩
  }
}

.tags-row {
  display: flex; gap: 8px;
  .combo-tag { padding: 2px 8px; border-radius: 4px; font-size: 12px; color: #fff; }
  .tag-red { background-color: #f07474; }
  .tag-green { background-color: #79c55b; }
  .tag-yellow { background-color: #eebb4d; }
  .tag-default { background-color: #444; }
}

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

// 覆盖 Element Table 默认深色样式
:deep(.el-table) {
  --el-table-tr-bg-color: #212121;
  --el-table-header-bg-color: #2d2d2d;
  --el-table-border-color: #333;
  color: #fff;
}
</style>