<template>
  <el-dialog
      v-model="dialogVisible"
      :title="$t('玩法规则')"
      width="620px"
      center
      class="custom-dark-dialog recharge-dialog"
      align-center
      append-to-body
  >
    <div class="bgff">
      <div class="am-padding-sm">
        <div class="title-row">
          <span class="cl7800">加拿大</span>
          <span class="orangeball">2</span>
          <span class="orangeball">8</span>
          <span>是根据什么开出的？</span>
        </div>
        <div class="am-text-sm cl50 am-margin-top-xs">
          加拿大公司BCLC每期共开出20个数字。加拿大28将这20个结果号码按照由小到大的顺序依次排列；取其第2/5/8/11/14/17位结果号码相加，和值的末位数作为加拿大28开出第一个数值；取其第3/6/9/12/15/18位开出号码相加，和值的末位数作为加拿大开出第二个数值，取其第4/7/10/13/16/19位开出号码相加，和值的末位数作为加拿大28开出第三个数值；三个数值相加即为加拿大28最终的开出结果。
        </div>
      </div>

      <div class="am-padding-sm">
        <div class="title-row">
          <span class="cl7800">加拿大</span>
          <span class="orangeball">2</span>
          <span class="orangeball">8</span>
          <span>玩法说明：</span>
        </div>
        <div class="am-text-sm cl50 am-margin-top-xs">
          <span class="am-text-bold">例如：</span> 加拿大BCLC第1749110期数据从小到大排序
          <div>7,8,14,16,17,22,26,34,39,41,42,48,54,58,63,64,69,72,73,79</div>
          <br>
          <span class="am-text-bold">第一区</span> [第2/5/8/11/14/17位数字] 8,17,34,42,58,69<br>
          计算：8+17+34+42+58+69= 228<br>
          结果为：8<br>
          <span class="am-text-bold">第二区</span> [第3/6/9/12/15/18位数字] 14,22,39,48,63,72<br>
          计算：14+22+39+48+63+72= 258<br>
          结果为：8<br>
          <span class="am-text-bold">第三区</span> [第4/7/10/13/16/19位数字] 16,26,41,54,64,73<br>
          计算：16+26+41+54+64+73= 274<br>
          结果为：4<br>
          <span class="cl7800">最终游戏结果为：</span><span class="am-text-bold">8+8+4=20</span>
        </div>
      </div>

      <div class="am-padding-sm">
        <div class="title-row">
          <span class="cl7800">加拿大</span>
          <span class="orangeball">2</span>
          <span class="orangeball">8</span>
          <span>共有以下玩法</span>
        </div>
        <div class="am-text-sm cl50 am-margin-top-xs">
          1、大，小，单，双<br>
          2、小单，小双，大单，大双<br>
          3、极小值(0-5)，极大值(22-27)<br>
          4、28个号码定位
        </div>
      </div>

      <div class="am-padding-sm">
        <div class="title-row">
          <span class="cl7800">加拿大</span>
          <span class="orangeball">2</span>
          <span class="orangeball">8</span>
          <span>走势图怎么看？</span>
        </div>
        <div class="am-text-sm cl50 am-margin-top-xs">
          由于加拿大28为随机开出，为了方便蛋友分析加拿大28结果走势，特别针对近期开出结果进行走势分析展示，以供蛋友参考。<br>
          <span class="am-text-bold">统计数据：</span>统计多少期内的开出数据<br>
          <span class="am-text-bold">标准间隔：</span>在标准概率下，间隔多少期会出现这个号码<br>
          <span class="am-text-bold">当前间隔：</span>当前实际数据中，离最近一次出现该号码间隔了多少期<br>
          <span class="am-text-bold">标准次数：</span>在统计期数内，标准概率下，出现该号码的次数<br>
          <span class="am-text-bold">当前次数：</span>在统计期数内，实际出现该号码的次数
        </div>
      </div>

      <div class="am-padding-sm">
        <div class="title-row">
          <span class="cl7800">加拿大</span>
          <span class="orangeball">2</span>
          <span class="orangeball">8</span>
          <span>标准概率</span>
        </div>
        <div class="am-text-sm cl50 am-margin-top-xs">
          <table id="table-history" class="tabs-table">
            <thead>
            <tr>
              <td>中奖号码</td>
              <td>标准赔率</td>
              <td>中奖概率</td>
            </tr>
            </thead>
            <tbody>
            <tr><td>0</td><td>1000</td><td>0.1%</td></tr>
            <tr><td>1</td><td>333</td><td>0.3%</td></tr>
            <tr><td>2</td><td>166</td><td>0.6%</td></tr>
            <tr><td>3</td><td>100</td><td>1.0%</td></tr>
            <tr><td>4</td><td>66</td><td>1.5%</td></tr>
            <tr><td>5</td><td>48</td><td>2.1%</td></tr>
            <tr><td>6</td><td>36</td><td>2.8%</td></tr>
            <tr><td>7</td><td>28</td><td>3.6%</td></tr>
            <tr><td>8</td><td>22</td><td>4.5%</td></tr>
            <tr><td>9</td><td>18</td><td>5.5%</td></tr>
            <tr><td>10</td><td>16</td><td>6.3%</td></tr>
            <tr><td>11</td><td>15</td><td>6.9%</td></tr>
            <tr><td>12</td><td>14</td><td>7.3%</td></tr>
            <tr><td>13</td><td>13</td><td>7.5%</td></tr>
            <tr><td>14</td><td>13</td><td>7.5%</td></tr>
            <tr><td>15</td><td>14</td><td>7.3%</td></tr>
            <tr><td>16</td><td>15</td><td>6.9%</td></tr>
            <tr><td>17</td><td>16</td><td>6.3%</td></tr>
            <tr><td>18</td><td>18</td><td>5.5%</td></tr>
            <tr><td>19</td><td>22</td><td>4.5%</td></tr>
            <tr><td>20</td><td>28</td><td>3.6%</td></tr>
            <tr><td>21</td><td>36</td><td>2.8%</td></tr>
            <tr><td>22</td><td>48</td><td>2.1%</td></tr>
            <tr><td>23</td><td>66</td><td>1.5%</td></tr>
            <tr><td>24</td><td>100</td><td>1.0%</td></tr>
            <tr><td>25</td><td>166</td><td>0.6%</td></tr>
            <tr><td>26</td><td>333</td><td>0.3%</td></tr>
            <tr><td>27</td><td>1000</td><td>0.1%</td></tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
const emit = defineEmits(['update:modelValue']);
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  }
});
// 弹窗显示双向绑定
const dialogVisible = computed({
  get: () => props.modelValue,
  set: (val) => emit('update:modelValue', val)
});
</script>

<style scoped lang="scss">
.bgff {
  margin: 0 auto;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  height: 60vh;
  overflow-y: auto;
}

/* 布局与间距 */
.am-padding-sm {
  padding: 15px 20px;
  border-bottom: 1px solid #f0f0f0; /* 添加各区块之间的分割线 */
}
.am-padding-sm:last-child {
  border-bottom: none;
}
.am-margin-top-xs {
  margin-top: 10px;
}

/* 字体与颜色 */
.am-text-sm {
  font-size: 14px;
  line-height: 1.6;
}
.cl50 {
  color: #ccc;
}
.am-text-bold {
  font-weight: 600;
  color: #f1f1f1;
}

/* 自定义主题色系 #f2ba45 */
.cl7800 {
  color: #f2ba45;
  font-weight: 500;
}

/* 号码圆球样式 */
.orangeball {
  display: inline-block;
  width: 22px;
  height: 22px;
  line-height: 22px;
  text-align: center;
  border-radius: 50%;
  background-color: #f2ba45; /* 替换为要求的颜色 */
  color: #ffffff;
  font-size: 13px;
  font-weight: bold;
  margin: 0 3px;
  vertical-align: middle;
}

/* 标题行垂直居中 */
.title-row {
  display: flex;
  align-items: center;
  font-size: 15px;
  color: #ccc;
}
.title-row .cl7800 {
  margin-right: 5px;
}
.title-row span:last-child {
  margin-left: 8px;
}

/* 表格样式 */
.tabs-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 15px;
  font-size: 13px;
  text-align: center;
}
.tabs-table thead td {
  color: #f1f1f1;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}
.tabs-table tbody td {
  padding: 12px 5px;
  color: #ccc;
}
/* 表格斑马线，使用极浅的 #f2ba45 色系作为背景 */
.tabs-table tbody tr:nth-child(odd) {
  background-color: rgba(242, 186, 69, 0.06);
}
</style>
<script setup lang="ts">
</script>
