<template>
  <div class="pc-lottery-page">
    <div class="pc-main-container">
      <div class="page-header">
        <h2 class="title">{{ t('开奖历史') }}</h2>
        <el-button type="primary" circle @click="onQuery" :loading="loading">
          <el-icon><Refresh /></el-icon>
        </el-button>
      </div>

      <div class="lottery-grid">
        <div
            class="lottery-item"
            v-for="(item, index) in dataList"
            :key="index"
            @click="goToDetail(item)"
        >
          <div class="item-header">
            <div class="header-left">
              <span class="lottery-name">{{ item.name }}</span>
              <span class="lottery-issue">{{ getIssue(item.lottery) }} {{ t('期') }}</span>
            </div>
            <div class="header-right">
              <span class="lottery-time">{{ getTime(item.lottery) }}</span>
            </div>
          </div>

          <div v-if="[1, 2].includes(item.type)" class="play-container">
            <div class="equation-row">
              <template v-for="(num, idx) in getNumbers(item.lottery)" :key="idx">
                <div class="grey-ball">{{ num }}</div>
                <span class="operator" v-if="idx < getNumbers(item.lottery).length - 1">+</span>
              </template>
              <span class="operator">=</span>
              <div class="red-sum-ball">{{ getSum(getNumbers(item.lottery)) }}</div>
            </div>
            <div class="tags-row">
              <div
                  class="combo-tag"
                  v-for="(tag, tagIdx) in getComboTags(item.lottery.combo)"
                  :key="tagIdx"
                  :class="getTagClass(tag)"
              >
                {{ tag }}
              </div>
            </div>
          </div>

          <div v-else-if="[3, 4, 5, 6].includes(item.type)" class="play-container">
            <div class="lhc-row">
              <template v-for="(num, idx) in getNumbers(item.lottery)" :key="idx">
                <span class="operator" v-if="idx === getNumbers(item.lottery).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>
          </div>

          <div v-else-if="[7, 9, 11].includes(item.type)" class="play-container">
            <div class="blocks-row">
              <div
                  class="square-block"
                  v-for="(num, idx) in getNumbers(item.lottery)"
                  :key="idx"
                  :style="{ backgroundColor: getNumColor(num) }"
              >
                {{ num }}
              </div>
            </div>
            <div class="tags-row mt-tags" v-if="item.lottery.open_code_other">
              <div class="combo-tag tag-blue" v-for="(tag, tagIdx) in getOtherTags(item.lottery.open_code_other)" :key="tagIdx">
                {{ tag }}
              </div>
            </div>
          </div>

          <div v-else-if="[8, 10].includes(item.type)" class="play-container">
            <div class="balls-row">
              <div
                  class="ball"
                  v-for="(num, idx) in getNumbers(item.lottery)"
                  :key="idx"
              >
                {{ num }}
              </div>
            </div>
            <div class="tags-row mt-tags" v-if="item.lottery.open_code_other">
              <div class="combo-tag tag-blue" v-for="(tag, tagIdx) in getOtherTags(item.lottery.open_code_other)" :key="tagIdx">
                {{ tag }}
              </div>
            </div>
          </div>

          <div v-else-if="[12, 13].includes(item.type)" class="play-container">
            <div class="dice-row">
              <div
                  class="dice"
                  v-for="(num, idx) in getNumbers(item.lottery)"
                  :key="idx"
              >
                <div
                    v-for="(show, dotIdx) in getDiceDots(num)"
                    :key="dotIdx"
                    class="dot"
                    :class="{ 'visible': show, 'red-dot': Number(num) === 1 || Number(num) === 4 }"
                ></div>
              </div>
            </div>
            <div class="tags-row mt-tags" v-if="item.lottery.open_code_other">
              <div class="combo-tag tag-blue" v-for="(tag, tagIdx) in getOtherTags(item.lottery.open_code_other)" :key="tagIdx">
                {{ tag }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useI18n } from "vue-i18n";
import { useRouter } from "vue-router";
import { Refresh } from '@element-plus/icons-vue';
import { GetLastLottery } from "@/request/api";

const { t } = useI18n();
const router = useRouter();

const dataList = ref([]);
const loading = ref(false);

const onQuery = () => {
  loading.value = true;
  GetLastLottery().then(res => {
    if (res.code === 1) {
      dataList.value = res.data;
    }
  }).finally(() => {
    loading.value = false;
  });
};

onMounted(() => {
  onQuery();
});

const getIssue = (lottery) => lottery.issue || lottery.issue_no || '';
const getTime = (lottery) => {
  const timeStr = lottery.open_time || lottery.start_time || '';
  return timeStr.length >= 16 ? timeStr.substring(5, 16) : timeStr;
};
const getNumbers = (lottery) => {
  const str = lottery.winning_numbers || lottery.open_code || '';
  return str ? str.split(',') : [];
};

// 转换其它开奖标签
const getOtherTags = (otherStr) => {
  if (!otherStr) return [];
  if (Array.isArray(otherStr)) return otherStr.filter(Boolean);
  return String(otherStr).split(',').filter(Boolean);
};

const getSum = (numbers) => numbers.reduce((sum, num) => sum + Number(num), 0);

// 转换 Combo 标签
const getComboTags = (combo) => {
  if (!combo) return [];
  if (Array.isArray(combo)) return combo.filter(Boolean);
  return 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';
};

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

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 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, 0, 1,  1, 0, 1,  1, 0, 1]
  };
  return layouts[Number(num)] || layouts[1];
};

const goToDetail = (item) => {
  router.push({
    name: 'LotteryDrawHistory',
    query: { game: item.game, name: item.name, params: JSON.stringify(item.params) }
  });
};
</script>

<style scoped lang="scss">
.pc-lottery-page {
  width: 100%;
  min-height: 100vh;
  background-color: #141414;
  display: flex;
  justify-content: center;
  padding: 30px 0;
}

.pc-main-container {
  width: 100%;
  max-width: 1200px;
  padding: 0 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
  .title {
    color: #ffffff;
    font-size: 26px;
    margin: 0;
  }
}

.lottery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 20px;
}

.lottery-item {
  background-color: #212121;
  border-radius: 12px;
  padding: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid #333;

  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.5);
    border-color: #f8b932;
  }

  .item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;

    .header-left {
      display: flex;
      align-items: center;
      gap: 12px;
      .lottery-name {
        font-size: 18px;
        font-weight: bold;
        color: #ffffff;
      }
      .lottery-issue {
        font-size: 14px;
        color: #f8b932;
        font-weight: 500;
      }
    }
    .header-right {
      .lottery-time {
        font-size: 13px;
        color: #888;
      }
    }
  }

  .play-container {
    // ======== PC28 ========
    .equation-row {
      display: flex;
      align-items: center;
      margin-bottom: 15px;
      .grey-ball {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background-color: #333;
        color: #ddd;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 16px;
        font-weight: bold;
      }
      .red-sum-ball {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background-color: #f75b5b;
        color: #ffffff;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 16px;
        font-weight: bold;
      }
    }

    // ======== 六合彩 ========
    .lhc-row {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 6px;
      .lhc-col {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        .lhc-ball {
          width: 34px;
          height: 34px;
          border-radius: 50%;
          background-color: #1a1a1a;
          color: #eee;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 15px;
          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; }
      }
    }

    .operator { color: #888; font-size: 20px; margin: 0 5px; }

    // ======== 时时彩等球类 ========
    .balls-row {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      .ball {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background-color: #e54d42;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 15px;
      }
    }

    // ======== 赛车方块 ========
    .blocks-row {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      .square-block {
        width: 30px;
        height: 30px;
        border-radius: 4px;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        font-weight: bold;
      }
    }

    // ======== 快3 骰子 ========
    .dice-row {
      display: flex;
      gap: 15px;
      .dice {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 1fr);
        width: 44px;
        height: 44px;
        background-color: #eee;
        border-radius: 8px;
        padding: 4px;
        .dot {
          width: 8px; height: 8px; border-radius: 50%; background-color: transparent; place-self: center;
          &.visible { background-color: #222; }
          &.visible.red-dot { background-color: #e54d42; }
        }
      }
    }

    .tags-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 15px;
      .combo-tag {
        padding: 3px 10px;
        border-radius: 4px;
        font-size: 12px;
        font-weight: bold;
        color: #fff;
      }
      .tag-red { background-color: #f07474; }
      .tag-green { background-color: #79c55b; }
      .tag-yellow { background-color: #eebb4d; }
      .tag-blue { background-color: #5b9cf7; }
      .tag-default { background-color: #444; }
    }
  }
}
</style>