<template>
  <div class="racing-pc-container">
    <el-table
        v-loading="loading"
        :data="dataList"
        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">
        <template #default="{ row }">{{ row.issue || row.issue_no }}</template>
      </el-table-column>

      <el-table-column prop="open_time" :label="t('开奖时间')" width="180">
        <template #default="{ row }">{{ formatTime(row.open_time || row.start_time) }}</template>
      </el-table-column>

      <el-table-column :label="t('开奖号码')">
        <template #default="{ row }">
          <div class="play-container">
            <div v-if="getNumbers(row.open_code).length >= 8" class="blocks-row">
              <div class="square-block" v-for="(num, idx) in getNumbers(row.open_code)" :key="idx"
                   :style="{ backgroundColor: getNumColor(num) }">{{ num }}</div>
            </div>

            <div v-else-if="[6, 7, 12, 13].includes(row.type)" class="dice-row">
              <div class="dice" v-for="(num, idx) in getNumbers(row.open_code).slice(0, 3)" :key="idx">
                <div v-for="(show, dotIdx) in getDiceDots(num)" :key="dotIdx" class="dot"
                     :class="{ 'visible': show, 'red-dot': show && (Number(num) === 1 || Number(num) === 4) }"></div>
              </div>
            </div>

            <div v-else class="balls-row">
              <div class="ball" v-for="(num, idx) in getNumbers(row.open_code)" :key="idx">{{ num }}</div>
            </div>
          </div>
        </template>
      </el-table-column>

      <el-table-column :label="t('属性')" width="200">
        <template #default="{ row }">
          <div class="tags-row" v-if="row.open_code_other">
            <div class="combo-tag tag-blue" v-for="(tag, tagIdx) in getOtherTags(row.open_code_other)" :key="tagIdx">
              {{ 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 { jisuGameHistoryLottery } from "@/request/api";
import { useI18n } from "vue-i18n";

const { t } = useI18n();
const props = defineProps({ game: String, 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;
  jisuGameHistoryLottery({ page, limit: 10, ...props.params }).then(res => {
    if (res.code === 1) {
      dataList.value = res.data?.list || res.data || [];
      total.value = res.data?.count || 0;
    }
  }).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 ? String(str).split(',') : []);
const getOtherTags = (otherStr) => (otherStr ? String(otherStr).split(',') : []);

const getNumColor = (num) => {
  const colors = { 0: '#f9a826', 1: '#e2d230', 2: '#2881e1', 3: '#4a4a4a', 4: '#ff7e00', 5: '#10e2e5', 6: '#5134ff', 7: '#bfbfbf', 8: '#ff2600', 9: '#780b00', 10: '#07bf00' };
  return colors[Number(num)] || '#e54d42';
};

const getDiceDots = (num) => {
  const n = Number(num);
  const layouts = {
    1: [0,0,0, 0,1,0, 0,0,0], 2: [1,0,0, 0,0,0, 0,0,1], 3: [1,0,0, 0,1,0, 0,0,1],
    4: [1,0,1, 0,0,0, 1,0,1], 5: [1,0,1, 0,1,0, 1,0,1], 6: [1,1,1, 0,0,0, 1,1,1]
  };
  return layouts[n] || [0,0,0, 0,0,0, 0,0,0];
};

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

<style scoped lang="scss">
.racing-pc-container { padding: 10px; }
.blocks-row { display: flex; gap: 6px;
  .square-block { width: 28px; height: 28px; border-radius: 4px; display: flex; justify-content: center; align-items: center; font-size: 14px; font-weight: bold; color: #fff; }
}
.balls-row { display: flex; gap: 8px;
  .ball { width: 30px; height: 30px; border-radius: 50%; background: #e54d42; color: #fff; display: flex; justify-content: center; align-items: center; font-size: 14px; }
}
.dice-row { display: flex; gap: 10px;
  .dice {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    width: 40px;
    height: 40px;
    background: #eee;
    border-radius: 6px;
    padding: 4px;
    gap: 2px;
    .dot { width: 8px; height: 8px; border-radius: 50%; background: transparent; place-self: center;
      &.visible { background: #333; } &.red-dot { background: #e54d42; }
    }
  }
}
.tags-row { display: flex; gap: 6px;
  .combo-tag { padding: 2px 8px; border-radius: 4px; font-size: 12px; background: #5b9cf7; color: #fff; }
}
.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>