<template>
  <div class="open-result-container" v-if="openCodeArray.length > 0">

    <div class="lhc-draw-result" v-if="isLhcType">
      <div class="lhc-open-code-box">
        <template v-for="(code, index) in openCodeArray" :key="index">
          <div v-if="index === openCodeArray.length - 1" class="plus-sign">+</div>
          <div :class="['lhc-ball', getLhcBallColorClass(code)]">
            <span class="ball-inner">{{ code }}</span>
          </div>
        </template>
      </div>
    </div>

    <div class="jisu-draw-result" v-else-if="isKuai3Type">
      <div class="res-balls">
        <span
            class="dice-item"
            :class="['dice-' + num, (num == 1 || num == 4) ? 'dice-red' : '']"
            v-for="(num, index) in openCodeArray"
            :key="'dice-'+index"
        >
          <i class="dot" v-for="i in Number(num)" :key="i"></i>
        </span>
      </div>
      <div class="combo-tags" v-if="otherTagsArray.length > 0">
        <el-tag v-for="(tag, index) in otherTagsArray" :key="index" type="info" effect="plain" class="res-tag">
          {{ tag }}
        </el-tag>
      </div>
    </div>

    <div class="jisu-draw-result" v-else>
      <div class="res-balls">
        <span
            class="ball-item"
            :class="getJisuBallColorClass(num, row.type)"
            v-for="(num, index) in openCodeArray"
            :key="'code-'+index"
        >
          {{ num }}
        </span>
      </div>
      <div class="combo-tags" v-if="otherTagsArray.length > 0">
        <el-tag v-for="(tag, index) in otherTagsArray" :key="index" type="info" effect="plain" class="res-tag">
          {{ tag }}
        </el-tag>
      </div>
    </div>

  </div>
  <span v-else>--</span>
</template>

<script setup>
import { computed } from 'vue';
import { isLhc, isKuai3, getLhcBallColorClass, getJisuBallColorClass } from './game.js';

const props = defineProps({
  row: {
    type: Object,
    required: true,
    default: () => ({})
  }
});

const isLhcType = computed(() => isLhc(props.row.type));
const isKuai3Type = computed(() => isKuai3(props.row.type));

const openCodeStr = computed(() => {
  return props.row.lottery?.open_code || props.row.open_code || '';
});

const openCodeArray = computed(() => {
  if (!openCodeStr.value) return [];
  return openCodeStr.value.split(',');
});

const otherTagsArray = computed(() => {
  const tagStr = props.row.lottery?.open_code_other || props.row.open_code_other || '';
  if (!tagStr) return [];
  return tagStr.split(/[\s,]+/).filter(Boolean);
});
</script>

<style scoped lang="scss">
.open-result-container {
  display: flex;
  justify-content: center;
  align-items: center;

  /* 六合彩放大调整 */
  .lhc-draw-result {
    .lhc-open-code-box {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      justify-content: center;
      gap: 8px; /* 间距由 6px 放大至 8px */

      .lhc-ball {
        width: 34px; /* 由 28px 放大至 34px */
        height: 34px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 3px 6px rgba(0,0,0,0.3), inset 0 -3px 3px rgba(0,0,0,0.2);
        position: relative;

        &::after {
          content: '';
          position: absolute;
          top: 3px;
          left: 6px;
          width: 10px; /* 高光区域微调 */
          height: 6px;
          background: rgba(255,255,255,0.25);
          border-radius: 50%;
          transform: rotate(-15deg); /* 加一点角度让质感更真实 */
        }

        .ball-inner {
          font-size: 15px; /* 由 13px 放大至 15px */
          font-family: DIN, monospace;
          font-weight: 900;
          color: #fff;
          text-shadow: 0 1px 2px rgba(0,0,0,0.4);
        }

        &.bg-red { background: linear-gradient(135deg, #ff6b6b 0%, #dc2626 100%); }
        &.bg-blue { background: linear-gradient(135deg, #60a5fa 0%, #2563eb 100%); }
        &.bg-green { background: linear-gradient(135deg, #34d399 0%, #059669 100%); }
        &.bg-gray { background: linear-gradient(135deg, #9ca3af 0%, #4b5563 100%); }
      }

      .plus-sign {
        font-size: 20px; /* 由 16px 放大至 20px */
        font-weight: bold;
        color: var(--el-text-color-regular);
        margin: 0 2px;
      }
    }
  }

  /* 极速/PC28/快3 放大调整 */
  .jisu-draw-result {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px; /* 列间距放大 */

    .res-balls {
      display: flex;
      flex-wrap: wrap;
      gap: 6px; /* 球间距由 4px 放大至 6px */
      justify-content: center;
    }

    .combo-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      justify-content: center;

      .res-tag {
        font-size: 13px; /* 标签字体微调 */
        padding: 0 8px;
        height: 24px;
        line-height: 22px;
      }
    }

    /* 骰子放大调整 */
    .dice-item {
      width: 32px; /* 由 25px 放大至 32px */
      height: 32px;
      background-color: #ffffff;
      border: 1px solid #e4e7ed;
      border-radius: 6px;
      display: grid;
      padding: 4px; /* 内部留白放大 */
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(3, 1fr);
      box-shadow: inset 0 -2px 0 rgba(0,0,0,0.05), 0 2px 4px rgba(0,0,0,0.1);
      box-sizing: border-box;

      .dot {
        width: 6px; /* 点由 5px 放大至 6px */
        height: 6px;
        border-radius: 50%;
        background-color: #303133;
        justify-self: center;
        align-self: center;
      }
      /* 点数 1 的中心红点稍微更大一点更好看 */
      &.dice-1 { .dot:nth-child(1) { grid-column: 2; grid-row: 2; width: 8px; height: 8px; } }
      &.dice-2 { .dot:nth-child(1) { grid-column: 1; grid-row: 1; } .dot:nth-child(2) { grid-column: 3; grid-row: 3; } }
      &.dice-3 { .dot:nth-child(1) { grid-column: 1; grid-row: 1; } .dot:nth-child(2) { grid-column: 2; grid-row: 2; } .dot:nth-child(3) { grid-column: 3; grid-row: 3; } }
      &.dice-4 {
        .dot:nth-child(1) { grid-column: 1; grid-row: 1; } .dot:nth-child(2) { grid-column: 3; grid-row: 1; }
        .dot:nth-child(3) { grid-column: 1; grid-row: 3; } .dot:nth-child(4) { grid-column: 3; grid-row: 3; }
      }
      &.dice-5 {
        .dot:nth-child(1) { grid-column: 1; grid-row: 1; } .dot:nth-child(2) { grid-column: 3; grid-row: 1; }
        .dot:nth-child(3) { grid-column: 2; grid-row: 2; }
        .dot:nth-child(4) { grid-column: 1; grid-row: 3; } .dot:nth-child(5) { grid-column: 3; grid-row: 3; }
      }
      &.dice-6 {
        .dot:nth-child(1) { grid-column: 1; grid-row: 1; } .dot:nth-child(2) { grid-column: 1; grid-row: 2; }
        .dot:nth-child(3) { grid-column: 1; grid-row: 3; } .dot:nth-child(4) { grid-column: 3; grid-row: 1; }
        .dot:nth-child(5) { grid-column: 3; grid-row: 2; } .dot:nth-child(6) { grid-column: 3; grid-row: 3; }
      }
      &.dice-red .dot { background-color: #f56c6c; }
    }

    /* 常规球放大调整 */
    .ball-item {
      width: 28px; /* 由 22px 放大至 28px */
      height: 28px;
      color: #ffffff;
      font-size: 14px; /* 由 12px 放大至 14px */
      font-family: DIN, monospace;
      font-weight: bold;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: #ccc;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);

      &.wave-blue { background: linear-gradient(135deg, #42a5f5, #1e88e5); box-shadow: 0 2px 4px rgba(66, 165, 245, 0.3); }
      &.color-1 { background: #E6DE00; text-shadow: 0 1px 1px rgba(0,0,0,0.3); box-shadow: 0 2px 4px rgba(230, 222, 0, 0.3); }
      &.color-2 { background: #0092FF; box-shadow: 0 2px 4px rgba(0, 146, 255, 0.3); }
      &.color-3 { background: #4D4D4D; box-shadow: 0 2px 4px rgba(77, 77, 77, 0.3); }
      &.color-4 { background: #FF7600; box-shadow: 0 2px 4px rgba(255, 118, 0, 0.3); }
      &.color-5 { background: #17E2E5; box-shadow: 0 2px 4px rgba(23, 226, 229, 0.3); }
      &.color-6 { background: #5234FF; box-shadow: 0 2px 4px rgba(82, 52, 255, 0.3); }
      &.color-7 { background: #BFBFBF; box-shadow: 0 2px 4px rgba(191, 191, 191, 0.3); }
      &.color-8 { background: #FF2600; box-shadow: 0 2px 4px rgba(255, 38, 0, 0.3); }
      &.color-9 { background: #780B00; box-shadow: 0 2px 4px rgba(120, 11, 0, 0.3); }
      &.color-10 { background: #07BF00; box-shadow: 0 2px 4px rgba(7, 191, 0, 0.3); }
    }
  }
}
</style>