<template>
  <!-- 骰宝 -->
  <div class="dice">
    <div class="list first">
      <!-- small -->
      <div class="cols item small">
        <confirmBet
          @confirm="confirmChip"
          @cancel="cancelChip"
          @undo="undoChip"
          :data="{
            money: downChip.small,
            show: touch == 'small'
          }"
        ></confirmBet>
        <chipView
          @click="downBet($event, 'small')"
          :list="chipArray.small"
          :win="winArray.includes('small')"
        ></chipView>
        <div class="text">
          <span class="big blue">{{ Lang[Type].small }}</span>
          <span class="points blue">4-10</span>
          <span>1:1</span>
        </div>
        <div class="money">{{ bet_amount_msg.small || 0 }}</div>
      </div>
      <div class="cols">
        <div class="ratio">1:10</div>
        <!-- two_11 -->
        <div class="item">
          <confirmBet
            @confirm="confirmChip"
            @cancel="cancelChip"
          @undo="undoChip"
            :data="{
              money: downChip.two_11,
              show: touch == 'two_11'
            }"
          ></confirmBet>
          <chipView
            @click="downBet($event, 'two_11')"
            :list="chipArray.two_11"
            :win="winArray.includes('two_11')"
          ></chipView>
          <div class="dice-box">
            <span class="span dice_1"></span>
            <span class="span dice_1"></span>
          </div>
          <div class="money">{{ bet_amount_msg.two_11 || 0 }}</div>
        </div>
        <!-- two_22 -->
        <div class="item">
          <confirmBet
            @confirm="confirmChip"
            @cancel="cancelChip"
          @undo="undoChip"
            :data="{
              money: downChip.two_22,
              show: touch == 'two_22'
            }"
          ></confirmBet>
          <chipView
            @click="downBet($event, 'two_22')"
            :list="chipArray.two_22"
            :win="winArray.includes('two_22')"
          ></chipView>
          <div class="dice-box">
            <span class="span dice_2"></span>
            <span class="span dice_2"></span>
          </div>
          <div class="money">{{ bet_amount_msg.two_22 || 0 }}</div>
        </div>
        <!-- two_33 -->
        <div class="item">
          <confirmBet
            @confirm="confirmChip"
            @cancel="cancelChip"
          @undo="undoChip"
            :data="{
              money: downChip.two_33,
              show: touch == 'two_33'
            }"
          ></confirmBet>
          <chipView
            @click="downBet($event, 'two_33')"
            :list="chipArray.two_33"
            :win="winArray.includes('two_33')"
          ></chipView>
          <div class="dice-box">
            <span class="span dice_3"></span>
            <span class="span dice_3"></span>
          </div>
          <div class="money">{{ bet_amount_msg.two_33 || 0 }}</div>
        </div>
      </div>
      <div class="cols">
        <div class="ratio">{{ Lang[Type].wai_dice }}1:180</div>
        <!-- three_111 -->
        <div class="item">
          <confirmBet
            @confirm="confirmChip"
            @cancel="cancelChip"
          @undo="undoChip"
            :data="{
              money: downChip.three_111,
              show: touch == 'three_111'
            }"
          ></confirmBet>
          <chipView
            @click="downBet($event, 'three_111')"
            :list="chipArray.three_111"
            :win="winArray.includes('three_111')"
          ></chipView>
          <div class="dice-box">
            <span class="span dice_1"></span>
            <span class="span dice_1"></span>
            <span class="span dice_1"></span>
          </div>
          <div class="money">{{ bet_amount_msg.three_111 || 0 }}</div>
        </div>
        <!-- three_222 -->
        <div class="item">
          <confirmBet
            @confirm="confirmChip"
            @cancel="cancelChip"
          @undo="undoChip"
            :data="{
              money: downChip.three_222,
              show: touch == 'three_222'
            }"
          ></confirmBet>
          <chipView
            @click="downBet($event, 'three_222')"
            :list="chipArray.three_222"
            :win="winArray.includes('three_222')"
          ></chipView>
          <div class="dice-box">
            <span class="span dice_2"></span>
            <span class="span dice_2"></span>
            <span class="span dice_2"></span>
          </div>
          <div class="money">{{ bet_amount_msg.three_222 || 0 }}</div>
        </div>
        <!-- three_333 -->
        <div class="item">
          <confirmBet
            @confirm="confirmChip"
            @cancel="cancelChip"
          @undo="undoChip"
            :data="{
              money: downChip.three_333,
              show: touch == 'three_333'
            }"
          ></confirmBet>
          <chipView
            @click="downBet($event, 'three_333')"
            :list="chipArray.three_333"
            :win="winArray.includes('three_333')"
          ></chipView>
          <div class="dice-box">
            <span class="span dice_3"></span>
            <span class="span dice_3"></span>
            <span class="span dice_3"></span>
          </div>
          <div class="money">{{ bet_amount_msg.three_333 || 0 }}</div>
        </div>
      </div>
      <div class="cols triplet">
        <div class="ratio">{{ Lang[Type].all_dice }}1:30</div>
        <!-- leopard -->
        <div class="item">
          <confirmBet
            @confirm="confirmChip"
            @cancel="cancelChip"
          @undo="undoChip"
            :data="{
              money: downChip.leopard,
              show: touch == 'leopard'
            }"
          ></confirmBet>
          <chipView
            @click="downBet($event, 'leopard')"
            :list="chipArray.leopard"
            :win="winArray.includes('leopard')"
          ></chipView>
          <div class="dice-box">
            <div class="column">
              <div class="flex">
                <span class="span dice_1"></span>
                <span class="span dice_1"></span>
                <span class="span dice_1"></span>
              </div>
              <div class="flex">
                <span class="span dice_2"></span>
                <span class="span dice_2"></span>
                <span class="span dice_2"></span>
              </div>
              <div class="flex">
                <span class="span dice_3"></span>
                <span class="span dice_3"></span>
                <span class="span dice_3"></span>
              </div>
            </div>
            <div class="column">
              <div class="flex">
                <span class="span dice_4"></span>
                <span class="span dice_4"></span>
                <span class="span dice_4"></span>
              </div>
              <div class="flex">
                <span class="span dice_5"></span>
                <span class="span dice_5"></span>
                <span class="span dice_5"></span>
              </div>
              <div class="flex">
                <span class="span dice_6"></span>
                <span class="span dice_6"></span>
                <span class="span dice_6"></span>
              </div>
            </div>
          </div>
          <div class="money">{{ bet_amount_msg.leopard || 0 }}</div>
        </div>
      </div>
      <div class="cols">
        <div class="ratio">{{ Lang[Type].wai_dice }}1:180</div>
        <!-- three_444 -->
        <div class="item">
          <confirmBet
            @confirm="confirmChip"
            @cancel="cancelChip"
          @undo="undoChip"
            :data="{
              money: downChip.three_444,
              show: touch == 'three_444'
            }"
          ></confirmBet>
          <chipView
            @click="downBet($event, 'three_444')"
            :list="chipArray.three_444"
            :win="winArray.includes('three_444')"
          ></chipView>
          <div class="dice-box">
            <span class="span dice_4"></span>
            <span class="span dice_4"></span>
            <span class="span dice_4"></span>
          </div>
          <div class="money">{{ bet_amount_msg.three_444 || 0 }}</div>
        </div>
        <!-- three_555 -->
        <div class="item">
          <confirmBet
            @confirm="confirmChip"
            @cancel="cancelChip"
          @undo="undoChip"
            :data="{
              money: downChip.three_555,
              show: touch == 'three_555'
            }"
          ></confirmBet>
          <chipView
            @click="downBet($event, 'three_555')"
            :list="chipArray.three_555"
            :win="winArray.includes('three_555')"
          ></chipView>
          <div class="dice-box">
            <span class="span dice_5"></span>
            <span class="span dice_5"></span>
            <span class="span dice_5"></span>
          </div>
          <div class="money">{{ bet_amount_msg.three_555 || 0 }}</div>
        </div>
        <!-- three_666 -->
        <div class="item">
          <confirmBet
            @confirm="confirmChip"
            @cancel="cancelChip"
          @undo="undoChip"
            :data="{
              money: downChip.three_666,
              show: touch == 'three_666'
            }"
          ></confirmBet>
          <chipView
            @click="downBet($event, 'three_666')"
            :list="chipArray.three_666"
            :win="winArray.includes('three_666')"
          ></chipView>
          <div class="dice-box">
            <span class="span dice_6"></span>
            <span class="span dice_6"></span>
            <span class="span dice_6"></span>
          </div>
          <div class="money">{{ bet_amount_msg.three_666 || 0 }}</div>
        </div>
      </div>
      <div class="cols">
        <div class="ratio">1:10</div>
        <!-- two_44 -->
        <div class="item">
          <confirmBet
            @confirm="confirmChip"
            @cancel="cancelChip"
          @undo="undoChip"
            :data="{
              money: downChip.two_44,
              show: touch == 'two_44'
            }"
          ></confirmBet>
          <chipView
            @click="downBet($event, 'two_44')"
            :list="chipArray.two_44"
            :win="winArray.includes('two_44')"
          ></chipView>
          <div class="dice-box">
            <span class="span dice_4"></span>
            <span class="span dice_4"></span>
          </div>
          <div class="money">{{ bet_amount_msg.two_44 || 0 }}</div>
        </div>
        <!-- two_55 -->
        <div class="item">
          <confirmBet
            @confirm="confirmChip"
            @cancel="cancelChip"
          @undo="undoChip"
            :data="{
              money: downChip.two_55,
              show: touch == 'two_55'
            }"
          ></confirmBet>
          <chipView
            @click="downBet($event, 'two_55')"
            :list="chipArray.two_55"
            :win="winArray.includes('two_55')"
          ></chipView>
          <div class="dice-box">
            <span class="span dice_5"></span>
            <span class="span dice_5"></span>
          </div>
          <div class="money">{{ bet_amount_msg.two_55 || 0 }}</div>
        </div>
        <!-- two_66 -->
        <div class="item">
          <confirmBet
            @confirm="confirmChip"
            @cancel="cancelChip"
          @undo="undoChip"
            :data="{
              money: downChip.two_66,
              show: touch == 'two_66'
            }"
          ></confirmBet>
          <chipView
            @click="downBet($event, 'two_66')"
            :list="chipArray.two_66"
            :win="winArray.includes('two_66')"
          ></chipView>
          <div class="dice-box">
            <span class="span dice_6"></span>
            <span class="span dice_6"></span>
          </div>
          <div class="money">{{ bet_amount_msg.two_66 || 0 }}</div>
        </div>
      </div>
      <div class="cols item big">
        <confirmBet
          @confirm="confirmChip"
          @cancel="cancelChip"
          @undo="undoChip"
          :data="{
            money: downChip.big,
            show: touch == 'big'
          }"
        ></confirmBet>
        <chipView
          @click="downBet($event, 'big')"
          :list="chipArray.big"
          :win="winArray.includes('big')"
        ></chipView>
        <div class="text">
          <span class="big red">{{ Lang[Type].big }}</span>
          <span class="points red">11-17</span>
          <span>1:1</span>
        </div>
        <div class="money">{{ bet_amount_msg.big || 0 }}</div>
      </div>
    </div>
    <div class="list second">
      <!-- number_4 -->
      <div class="item">
        <confirmBet
          @confirm="confirmChip"
          @cancel="cancelChip"
          @undo="undoChip"
          :data="{
            money: downChip.number_4,
            show: touch == 'number_4'
          }"
        ></confirmBet>
        <chipView
          @click="downBet($event, 'number_4')"
          :list="chipArray.number_4"
          :win="winArray.includes('number_4')"
        ></chipView>
        <div class="text">
          <span class="big">4</span>
          <span>1:60</span>
        </div>
        <div class="money">{{ bet_amount_msg.number_4 || 0 }}</div>
      </div>
      <!-- number_5 -->
      <div class="item">
        <confirmBet
          @confirm="confirmChip"
          @cancel="cancelChip"
          @undo="undoChip"
          :data="{
            money: downChip.number_5,
            show: touch == 'number_5'
          }"
        ></confirmBet>
        <chipView
          @click="downBet($event, 'number_5')"
          :list="chipArray.number_5"
          :win="winArray.includes('number_5')"
        ></chipView>
        <div class="text">
          <span class="big">5</span>
          <span>1:30</span>
        </div>
        <div class="money">{{ bet_amount_msg.number_5 || 0 }}</div>
      </div>
      <!-- number_6 -->
      <div class="item">
        <confirmBet
          @confirm="confirmChip"
          @cancel="cancelChip"
          @undo="undoChip"
          :data="{
            money: downChip.number_6,
            show: touch == 'number_6'
          }"
        ></confirmBet>
        <chipView
          @click="downBet($event, 'number_6')"
          :list="chipArray.number_6"
          :win="winArray.includes('number_6')"
        ></chipView>
        <div class="text">
          <span class="big">6</span>
          <span>1:18</span>
        </div>
        <div class="money">{{ bet_amount_msg.number_6 || 0 }}</div>
      </div>
      <!-- number_7 -->
      <div class="item">
        <confirmBet
          @confirm="confirmChip"
          @cancel="cancelChip"
          @undo="undoChip"
          :data="{
            money: downChip.number_7,
            show: touch == 'number_7'
          }"
        ></confirmBet>
        <chipView
          @click="downBet($event, 'number_7')"
          :list="chipArray.number_7"
          :win="winArray.includes('number_7')"
        ></chipView>
        <div class="text">
          <span class="big">7</span>
          <span>1:12</span>
        </div>
        <div class="money">{{ bet_amount_msg.number_7 || 0 }}</div>
      </div>
      <!-- number_8 -->
      <div class="item">
        <confirmBet
          @confirm="confirmChip"
          @cancel="cancelChip"
          @undo="undoChip"
          :data="{
            money: downChip.number_8,
            show: touch == 'number_8'
          }"
        ></confirmBet>
        <chipView
          @click="downBet($event, 'number_8')"
          :list="chipArray.number_8"
          :win="winArray.includes('number_8')"
        ></chipView>
        <div class="text">
          <span class="big">8</span>
          <span>1:8</span>
        </div>
        <div class="money">{{ bet_amount_msg.number_8 || 0 }}</div>
      </div>
      <!-- number_9 -->
      <div class="item">
        <confirmBet
          @confirm="confirmChip"
          @cancel="cancelChip"
          @undo="undoChip"
          :data="{
            money: downChip.number_9,
            show: touch == 'number_9'
          }"
        ></confirmBet>
        <chipView
          @click="downBet($event, 'number_9')"
          :list="chipArray.number_9"
          :win="winArray.includes('number_9')"
        ></chipView>
        <div class="text">
          <span class="big">9</span>
          <span>1:6</span>
        </div>
        <div class="money">{{ bet_amount_msg.number_9 || 0 }}</div>
      </div>
      <!-- number_10 -->
      <div class="item">
        <confirmBet
          @confirm="confirmChip"
          @cancel="cancelChip"
          @undo="undoChip"
          :data="{
            money: downChip.number_10,
            show: touch == 'number_10'
          }"
        ></confirmBet>
        <chipView
          @click="downBet($event, 'number_10')"
          :list="chipArray.number_10"
          :win="winArray.includes('number_10')"
        ></chipView>
        <div class="text">
          <span class="big">10</span>
          <span>1:6</span>
        </div>
        <div class="money">{{ bet_amount_msg.number_10 || 0 }}</div>
      </div>
      <!-- number_11 -->
      <div class="item">
        <confirmBet
          @confirm="confirmChip"
          @cancel="cancelChip"
          @undo="undoChip"
          :data="{
            money: downChip.number_11,
            show: touch == 'number_11'
          }"
        ></confirmBet>
        <chipView
          @click="downBet($event, 'number_11')"
          :list="chipArray.number_11"
          :win="winArray.includes('number_11')"
        ></chipView>
        <div class="text">
          <span class="big">11</span>
          <span>1:6</span>
        </div>
        <div class="money">{{ bet_amount_msg.number_11 || 0 }}</div>
      </div>
      <!-- number_12 -->
      <div class="item">
        <confirmBet
          @confirm="confirmChip"
          @cancel="cancelChip"
          @undo="undoChip"
          :data="{
            money: downChip.number_12,
            show: touch == 'number_12'
          }"
        ></confirmBet>
        <chipView
          @click="downBet($event, 'number_12')"
          :list="chipArray.number_12"
          :win="winArray.includes('number_12')"
        ></chipView>
        <div class="text">
          <span class="big">12</span>
          <span>1:6</span>
        </div>
        <div class="money">{{ bet_amount_msg.number_12 || 0 }}</div>
      </div>
      <!-- number_13 -->
      <div class="item">
        <confirmBet
          @confirm="confirmChip"
          @cancel="cancelChip"
          @undo="undoChip"
          :data="{
            money: downChip.number_13,
            show: touch == 'number_13'
          }"
        ></confirmBet>
        <chipView
          @click="downBet($event, 'number_13')"
          :list="chipArray.number_13"
          :win="winArray.includes('number_13')"
        ></chipView>
        <div class="text">
          <span class="big">13</span>
          <span>1:8</span>
        </div>
        <div class="money">{{ bet_amount_msg.number_13 || 0 }}</div>
      </div>
      <!-- number_14 -->
      <div class="item">
        <confirmBet
          @confirm="confirmChip"
          @cancel="cancelChip"
          @undo="undoChip"
          :data="{
            money: downChip.number_14,
            show: touch == 'number_14'
          }"
        ></confirmBet>
        <chipView
          @click="downBet($event, 'number_14')"
          :list="chipArray.number_14"
          :win="winArray.includes('number_14')"
        ></chipView>
        <div class="text">
          <span class="big">14</span>
          <span>1:12</span>
        </div>
        <div class="money">{{ bet_amount_msg.number_14 || 0 }}</div>
      </div>
      <!-- number_15 -->
      <div class="item">
        <confirmBet
          @confirm="confirmChip"
          @cancel="cancelChip"
          @undo="undoChip"
          :data="{
            money: downChip.number_15,
            show: touch == 'number_15'
          }"
        ></confirmBet>
        <chipView
          @click="downBet($event, 'number_15')"
          :list="chipArray.number_15"
          :win="winArray.includes('number_15')"
        ></chipView>
        <div class="text">
          <span class="big">15</span>
          <span>1:18</span>
        </div>
        <div class="money">{{ bet_amount_msg.number_15 || 0 }}</div>
      </div>
      <!-- number_16 -->
      <div class="item">
        <confirmBet
          @confirm="confirmChip"
          @cancel="cancelChip"
          @undo="undoChip"
          :data="{
            money: downChip.number_16,
            show: touch == 'number_16'
          }"
        ></confirmBet>
        <chipView
          @click="downBet($event, 'number_16')"
          :list="chipArray.number_16"
          :win="winArray.includes('number_16')"
        ></chipView>
        <div class="text">
          <span class="big">16</span>
          <span>1:30</span>
        </div>
        <div class="money">{{ bet_amount_msg.number_16 || 0 }}</div>
      </div>
      <!-- number_17 -->
      <div class="item">
        <confirmBet
          @confirm="confirmChip"
          @cancel="cancelChip"
          @undo="undoChip"
          :data="{
            money: downChip.number_17,
            show: touch == 'number_17'
          }"
        ></confirmBet>
        <chipView
          @click="downBet($event, 'number_17')"
          :list="chipArray.number_17"
          :win="winArray.includes('number_17')"
        ></chipView>
        <div class="text">
          <span class="big">17</span>
          <span>1:60</span>
        </div>
        <div class="money">{{ bet_amount_msg.number_17 || 0 }}</div>
      </div>
    </div>
    <div class="list third">
      <!-- two_12 -->
      <div class="item">
        <confirmBet
          @confirm="confirmChip"
          @cancel="cancelChip"
          @undo="undoChip"
          :data="{
            money: downChip.two_12,
            show: touch == 'two_12'
          }"
        ></confirmBet>
        <chipView
          @click="downBet($event, 'two_12')"
          :list="chipArray.two_12"
          :win="winArray.includes('two_12')"
        ></chipView>
        <div class="dice-box">
          <span class="span dice_1"></span>
          <span class="span dice_2"></span>
        </div>
        <div class="money">{{ bet_amount_msg.two_12 || 0 }}</div>
      </div>
      <!-- two_13 -->
      <div class="item">
        <confirmBet
          @confirm="confirmChip"
          @cancel="cancelChip"
          @undo="undoChip"
          :data="{
            money: downChip.two_13,
            show: touch == 'two_13'
          }"
        ></confirmBet>
        <chipView
          @click="downBet($event, 'two_13')"
          :list="chipArray.two_13"
          :win="winArray.includes('two_13')"
        ></chipView>
        <div class="dice-box">
          <span class="span dice_1"></span>
          <span class="span dice_3"></span>
        </div>
        <div class="money">{{ bet_amount_msg.two_13 || 0 }}</div>
      </div>
      <!-- two_14 -->
      <div class="item">
        <confirmBet
          @confirm="confirmChip"
          @cancel="cancelChip"
          @undo="undoChip"
          :data="{
            money: downChip.two_14,
            show: touch == 'two_14'
          }"
        ></confirmBet>
        <chipView
          @click="downBet($event, 'two_14')"
          :list="chipArray.two_14"
          :win="winArray.includes('two_14')"
        ></chipView>
        <div class="dice-box">
          <span class="span dice_1"></span>
          <span class="span dice_4"></span>
        </div>
        <div class="money">{{ bet_amount_msg.two_14 || 0 }}</div>
      </div>
      <!-- two_15 -->
      <div class="item">
        <confirmBet
          @confirm="confirmChip"
          @cancel="cancelChip"
          @undo="undoChip"
          :data="{
            money: downChip.two_15,
            show: touch == 'two_15'
          }"
        ></confirmBet>
        <chipView
          @click="downBet($event, 'two_15')"
          :list="chipArray.two_15"
          :win="winArray.includes('two_15')"
        ></chipView>
        <div class="dice-box">
          <span class="span dice_1"></span>
          <span class="span dice_5"></span>
        </div>
        <div class="money">{{ bet_amount_msg.two_15 || 0 }}</div>
      </div>
      <!-- two_16 -->
      <div class="item">
        <confirmBet
          @confirm="confirmChip"
          @cancel="cancelChip"
          @undo="undoChip"
          :data="{
            money: downChip.two_16,
            show: touch == 'two_16'
          }"
        ></confirmBet>
        <chipView
          @click="downBet($event, 'two_16')"
          :list="chipArray.two_16"
          :win="winArray.includes('two_16')"
        ></chipView>
        <div class="dice-box">
          <span class="span dice_1"></span>
          <span class="span dice_6"></span>
        </div>
        <div class="money">{{ bet_amount_msg.two_16 || 0 }}</div>
      </div>
      <!-- two_23 -->
      <div class="item">
        <confirmBet
          @confirm="confirmChip"
          @cancel="cancelChip"
          @undo="undoChip"
          :data="{
            money: downChip.two_23,
            show: touch == 'two_23'
          }"
        ></confirmBet>
        <chipView
          @click="downBet($event, 'two_23')"
          :list="chipArray.two_23"
          :win="winArray.includes('two_23')"
        ></chipView>
        <div class="dice-box">
          <span class="span dice_2"></span>
          <span class="span dice_3"></span>
        </div>
        <div class="money">{{ bet_amount_msg.two_23 || 0 }}</div>
      </div>
      <!-- two_24 -->
      <div class="item">
        <confirmBet
          @confirm="confirmChip"
          @cancel="cancelChip"
          @undo="undoChip"
          :data="{
            money: downChip.two_24,
            show: touch == 'two_24'
          }"
        ></confirmBet>
        <chipView
          @click="downBet($event, 'two_24')"
          :list="chipArray.two_24"
          :win="winArray.includes('two_24')"
        ></chipView>
        <div class="dice-box">
          <span class="span dice_2"></span>
          <span class="span dice_4"></span>
        </div>
        <div class="money">{{ bet_amount_msg.two_24 || 0 }}</div>
      </div>
      <!-- two_25 -->
      <div class="item">
        <confirmBet
          @confirm="confirmChip"
          @cancel="cancelChip"
          @undo="undoChip"
          :data="{
            money: downChip.two_25,
            show: touch == 'two_25'
          }"
        ></confirmBet>
        <chipView
          @click="downBet($event, 'two_25')"
          :list="chipArray.two_25"
          :win="winArray.includes('two_25')"
        ></chipView>
        <div class="dice-box">
          <span class="span dice_2"></span>
          <span class="span dice_5"></span>
        </div>
        <div class="money">{{ bet_amount_msg.two_25 || 0 }}</div>
      </div>
      <!-- two_26 -->
      <div class="item">
        <confirmBet
          @confirm="confirmChip"
          @cancel="cancelChip"
          @undo="undoChip"
          :data="{
            money: downChip.two_26,
            show: touch == 'two_26'
          }"
        ></confirmBet>
        <chipView
          @click="downBet($event, 'two_26')"
          :list="chipArray.two_26"
          :win="winArray.includes('two_26')"
        ></chipView>
        <div class="dice-box">
          <span class="span dice_2"></span>
          <span class="span dice_6"></span>
        </div>
        <div class="money">{{ bet_amount_msg.two_26 || 0 }}</div>
      </div>
      <!-- two_34 -->
      <div class="item">
        <confirmBet
          @confirm="confirmChip"
          @cancel="cancelChip"
          @undo="undoChip"
          :data="{
            money: downChip.two_34,
            show: touch == 'two_34'
          }"
        ></confirmBet>
        <chipView
          @click="downBet($event, 'two_34')"
          :list="chipArray.two_34"
          :win="winArray.includes('two_34')"
        ></chipView>
        <div class="dice-box">
          <span class="span dice_3"></span>
          <span class="span dice_4"></span>
        </div>
        <div class="money">{{ bet_amount_msg.two_34 || 0 }}</div>
      </div>
      <!-- two_35 -->
      <div class="item">
        <confirmBet
          @confirm="confirmChip"
          @cancel="cancelChip"
          @undo="undoChip"
          :data="{
            money: downChip.two_35,
            show: touch == 'two_35'
          }"
        ></confirmBet>
        <chipView
          @click="downBet($event, 'two_35')"
          :list="chipArray.two_35"
          :win="winArray.includes('two_35')"
        ></chipView>
        <div class="dice-box">
          <span class="span dice_3"></span>
          <span class="span dice_5"></span>
        </div>
        <div class="money">{{ bet_amount_msg.two_35 || 0 }}</div>
      </div>
      <!-- two_36 -->
      <div class="item">
        <confirmBet
          @confirm="confirmChip"
          @cancel="cancelChip"
          @undo="undoChip"
          :data="{
            money: downChip.two_36,
            show: touch == 'two_36'
          }"
        ></confirmBet>
        <chipView
          @click="downBet($event, 'two_36')"
          :list="chipArray.two_36"
          :win="winArray.includes('two_36')"
        ></chipView>
        <div class="dice-box">
          <span class="span dice_3"></span>
          <span class="span dice_6"></span>
        </div>
        <div class="money">{{ bet_amount_msg.two_36 || 0 }}</div>
      </div>
      <!-- two_45 -->
      <div class="item">
        <confirmBet
          @confirm="confirmChip"
          @cancel="cancelChip"
          @undo="undoChip"
          :data="{
            money: downChip.two_45,
            show: touch == 'two_45'
          }"
        ></confirmBet>
        <chipView
          @click="downBet($event, 'two_45')"
          :list="chipArray.two_45"
          :win="winArray.includes('two_45')"
        ></chipView>
        <div class="dice-box">
          <span class="span dice_4"></span>
          <span class="span dice_5"></span>
        </div>
        <div class="money">{{ bet_amount_msg.two_45 || 0 }}</div>
      </div>
      <!-- two_46 -->
      <div class="item">
        <confirmBet
          @confirm="confirmChip"
          @cancel="cancelChip"
          @undo="undoChip"
          :data="{
            money: downChip.two_46,
            show: touch == 'two_46'
          }"
        ></confirmBet>
        <chipView
          @click="downBet($event, 'two_46')"
          :list="chipArray.two_46"
          :win="winArray.includes('two_46')"
        ></chipView>
        <div class="dice-box">
          <span class="span dice_4"></span>
          <span class="span dice_6"></span>
        </div>
        <div class="money">{{ bet_amount_msg.two_46 || 0 }}</div>
      </div>
      <!-- two_56 -->
      <div class="item">
        <confirmBet
          @confirm="confirmChip"
          @cancel="cancelChip"
          @undo="undoChip"
          :data="{
            money: downChip.two_56,
            show: touch == 'two_56'
          }"
        ></confirmBet>
        <chipView
          @click="downBet($event, 'two_56')"
          :list="chipArray.two_56"
          :win="winArray.includes('two_56')"
        ></chipView>
        <div class="dice-box">
          <span class="span dice_5"></span>
          <span class="span dice_6"></span>
        </div>
        <div class="money">{{ bet_amount_msg.two_56 || 0 }}</div>
      </div>
    </div>
    <div class="list fourth">1:5</div>
    <div class="list fifth">
      <!-- singular -->
      <div class="cols item singular">
        <confirmBet
          @confirm="confirmChip"
          @cancel="cancelChip"
          @undo="undoChip"
          :data="{
            money: downChip.singular,
            show: touch == 'singular'
          }"
        ></confirmBet>
        <chipView
          @click="downBet($event, 'singular')"
          :list="chipArray.singular"
          :win="winArray.includes('singular')"
        ></chipView>
        <div class="text">
          <span class="big blue">{{ Lang[Type].odd }}</span>
          <span>1:1</span>
        </div>
        <div class="money">{{ bet_amount_msg.singular || 0 }}</div>
      </div>
      <div class="cols center">
        <div class="top">
          <!-- living_1 -->
          <div class="item">
            <confirmBet
              @confirm="confirmChip"
              @cancel="cancelChip"
          @undo="undoChip"
              :data="{
                money: downChip.living_1,
                show: touch == 'living_1'
              }"
            ></confirmBet>
            <chipView
              @click="downBet($event, 'living_1')"
              :list="chipArray.living_1"
              :win="winArray.includes('living_1')"
            ></chipView>
            <div class="dice-box">
              <span class="span dice_1"></span>
            </div>
            <div class="money">{{ bet_amount_msg.living_1 || 0 }}</div>
          </div>
          <!-- living_2 -->
          <div class="item">
            <confirmBet
              @confirm="confirmChip"
              @cancel="cancelChip"
          @undo="undoChip"
              :data="{
                money: downChip.living_2,
                show: touch == 'living_2'
              }"
            ></confirmBet>
            <chipView
              @click="downBet($event, 'living_2')"
              :list="chipArray.living_2"
              :win="winArray.includes('living_2')"
            ></chipView>
            <div class="dice-box">
              <span class="span dice_2"></span>
            </div>
            <div class="money">{{ bet_amount_msg.living_2 || 0 }}</div>
          </div>
          <!-- living_3 -->
          <div class="item">
            <confirmBet
              @confirm="confirmChip"
              @cancel="cancelChip"
          @undo="undoChip"
              :data="{
                money: downChip.living_3,
                show: touch == 'living_3'
              }"
            ></confirmBet>
            <chipView
              @click="downBet($event, 'living_3')"
              :list="chipArray.living_3"
              :win="winArray.includes('living_3')"
            ></chipView>
            <div class="dice-box">
              <span class="span dice_3"></span>
            </div>
            <div class="money">{{ bet_amount_msg.living_3 || 0 }}</div>
          </div>
          <!-- living_4 -->
          <div class="item">
            <confirmBet
              @confirm="confirmChip"
              @cancel="cancelChip"
          @undo="undoChip"
              :data="{
                money: downChip.living_4,
                show: touch == 'living_4'
              }"
            ></confirmBet>
            <chipView
              @click="downBet($event, 'living_4')"
              :list="chipArray.living_4"
              :win="winArray.includes('living_4')"
            ></chipView>
            <div class="dice-box">
              <span class="span dice_4"></span>
            </div>
            <div class="money">{{ bet_amount_msg.living_4 || 0 }}</div>
          </div>
          <!-- living_5 -->
          <div class="item">
            <confirmBet
              @confirm="confirmChip"
              @cancel="cancelChip"
          @undo="undoChip"
              :data="{
                money: downChip.living_5,
                show: touch == 'living_5'
              }"
            ></confirmBet>
            <chipView
              @click="downBet($event, 'living_5')"
              :list="chipArray.living_5"
              :win="winArray.includes('living_5')"
            ></chipView>
            <div class="dice-box">
              <span class="span dice_5"></span>
            </div>
            <div class="money">{{ bet_amount_msg.living_5 || 0 }}</div>
          </div>
          <!-- living_6 -->
          <div class="item">
            <confirmBet
              @confirm="confirmChip"
              @cancel="cancelChip"
          @undo="undoChip"
              :data="{
                money: downChip.living_6,
                show: touch == 'living_6'
              }"
            ></confirmBet>
            <chipView
              @click="downBet($event, 'living_6')"
              :list="chipArray.living_6"
              :win="winArray.includes('living_6')"
            ></chipView>
            <div class="dice-box">
              <span class="span dice_6"></span>
            </div>
            <div class="money">{{ bet_amount_msg.living_6 || 0 }}</div>
          </div>
        </div>
        <div class="bottom">
          <span>{{ Lang[Type].single_dice }} 1:1</span>
          <span>{{ Lang[Type].double_dice }} 1:2</span>
          <span>{{ Lang[Type].three_dice }} 1:3</span>
        </div>
      </div>
      <!-- plural -->
      <div class="cols item plural">
        <confirmBet
          @confirm="confirmChip"
          @cancel="cancelChip"
          @undo="undoChip"
          :data="{
            money: downChip.plural,
            show: touch == 'plural'
          }"
        ></confirmBet>
        <chipView
          @click="downBet($event, 'plural')"
          :list="chipArray.plural"
          :win="winArray.includes('plural')"
        ></chipView>
        <div class="text">
          <span class="big red">{{ Lang[Type].even }}</span>
          <span>1:1</span>
        </div>
        <div class="money">{{ bet_amount_msg.plural || 0 }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { computed } from "vue"
import { useStore } from "vuex"
import confirmBet from "@/components/confirmBet.vue"
import chipView from "@/components/chipView.vue"
import { diceData } from "@/utils/common"
export default {
  name: "TableDice",
  components: { confirmBet, chipView },
  props: {
    touch: {
      type: String,
      default: ""
    },
    bet_amount_msg: {
      type: Object,
      default: () => ({
        ...diceData.amount
      })
    },
    winArray: {
      type: Array,
      default: () => []
    },
    downChip: {
      type: Object,
      default: () => ({
        ...diceData.amount
      })
    },
    chipArray: {
      type: Object,
      default: () => ({ ...diceData.array })
    }
  },
  setup(prop, context) {
    const store = useStore()
    const Type = computed(() => store.state.config.$Type)
    const Lang = computed(() => store.state.config.$lang)
    const downBet = (e, type) => {
      context.emit("downBet", e, type)
    }
    const confirmChip = () => {
      context.emit("confirmChip")
    }
    const cancelChip = () => {
      context.emit("cancelChip")
    }
    const undoChip = () => {
      context.emit("undoChip")
    }
    return { Type, Lang, downBet, confirmChip, cancelChip, undoChip }
  }
}
</script>
<style lang="scss" scoped>
.dice {
  position: absolute;
  top: 1.8rem;
  left: 2.8rem;
  right: 3.8rem;
  bottom: 0.25rem;
  border-radius: 10px;
  border: 1px solid #898a91;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  transform: rotateX(0deg);
  .list {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    .item {
      position: relative;
      border-right: 1px solid #898a91;
      font-size: 0.45rem;
      &:last-child {
        border: none;
      }
      &.unclick {
        &:after {
          content: "";
          position: absolute;
          width: 102%;
          border-bottom: 1px solid #898a91;
          top: 50%;
          transform: rotate(14deg);
          z-index: 6;
          left: -2px;
        }
        &.max:after {
          width: 104%;
          transform: rotate(21deg);
        }
        &.min:after {
          width: 104%;
          transform: rotate(21deg);
        }
        .chip-view {
          background: rgb(98 74 4 / 40%);
        }
      }

      .chip-box {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        &:active {
          background: rgba(255, 255, 255, 0.3);
        }
      }
      .text {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        line-height: 1;
        z-index: 2;
        pointer-events: none;
        .big {
          font-weight: bold;
          padding-right: 0.24rem;
          padding-left: 0.2rem;
        }
      }
      .money {
        position: absolute;
        font-size: 0.24rem;
        font-weight: normal;
        left: -3px;
        bottom: -3px;
        transform: scale(0.5);
        pointer-events: none;
        color: #ddd;
        vertical-align: bottom;
        &::before {
          display: inline-block;
          content: "总";
          background: rgba(255, 255, 255, 0.4);
          font-size: 10px;
          border-radius: 0.615rem;
          width: 0.615rem;
          height: 0.615rem;
          text-align: center;
          line-height: 0.615rem;
          font-weight: normal;
          margin-right: 0.06rem;
          transform: scale(0.7);
        }
      }
    }
  }
  .first {
    height: 35%;
    border-bottom: 1px solid #898a91;
    .cols {
      width: 12.5%;
      box-sizing: border-box;
      border-right: 1px solid #898a91;
      position: relative;
      color: #fff;
      font-size: 0.35rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      &.small .chip-view {
        border-top-left-radius: 10px;
      }
      &.big .chip-view {
        border-top-right-radius: 10px;
      }
      &:last-child {
        border-right: none;
      }
      .ratio {
        line-height: 1;
        padding: 0.13rem 0;
        font-weight: 600;
        font-size: 0.38rem;
        width: 100%;
        text-align: center;
        pointer-events: none;
      }
      .item {
        border-top: 1px solid #898a91;
        border-right: none;
        box-sizing: border-box;
        width: 100%;
        flex: 1;
      }
      .points {
        line-height: 1;
        padding: 0.2rem 0;
        font-size: 0.4rem;
        text-align: center;
      }
      .text {
        flex-direction: column;
        line-height: 1;
        text-shadow: 1px 1px #050505;
        pointer-events: none;
        .big {
          font-size: 0.8rem;
        }
      }
    }
    .triplet {
      width: 25%;
    }
  }
  .second {
    width: 100%;
    height: 19%;
    border-bottom: 1px solid #898a91;
    display: flex;
    .item {
      flex: 1;
      .text {
        flex-direction: column;
        line-height: 1;
        text-shadow: 1px 1px #050505;
        color: #fff;
        font-size: 0.35rem;
        font-weight: 600;
        .big {
          font-size: 0.55rem;
        }
      }
    }
  }
  .third {
    width: 100%;
    height: 19%;
    border-bottom: 1px solid #898a91;
    display: flex;
    .item {
      flex: 1;
      .dice-box {
        flex-direction: column;
        .span {
          margin: 0.05rem 0;
        }
      }
    }
  }
  .fourth {
    height: 7%;
    align-items: center;
    justify-content: center;
    font-size: 0.45rem;
    color: #fff;
    border-bottom: 1px solid #898a91;
    pointer-events: none;
  }
  .fifth {
    height: 20%;
    color: #fff;
    .center {
      width: 75%;
      border-right: 1px solid #898a91;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      .top {
        flex: 1;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .item {
          flex: 1;
          height: 100%;
        }
      }
      .bottom {
        border-top: 1px solid #898a91;
        box-sizing: border-box;
        display: flex;
        justify-content: space-around;
        line-height: 1;
        padding: 0.13rem 0;
        font-weight: 600;
        font-size: 0.4rem;
      }
    }
    .singular {
      width: 12.5%;
      .chip-view {
        border-bottom-left-radius: 10px;
      }
    }
    .plural {
      width: 12.5%;
      .chip-view {
        border-bottom-right-radius: 10px;
      }
    }
    .text {
      flex-direction: column;
      line-height: 1;
      text-shadow: 1px 1px #050505;
      font-size: 0.35rem;
      .big {
        font-size: 0.8rem;
        margin-bottom: 0.05rem;
      }
    }
  }
  .dice-box {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    .column {
      display: flex;
      flex-direction: column;
      margin: 0 1.5%;
      .flex {
        margin: 0.1rem 0;
      }
    }
    .span {
      width: 0.43rem;
      height: 0.43rem;
      margin: 0 1.5%;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
    .dice_1 {
      background-image: url("~@/assets/images/dice/dice_1.png");
    }
    .dice_2 {
      background-image: url("~@/assets/images/dice/dice_2.png");
    }
    .dice_3 {
      background-image: url("~@/assets/images/dice/dice_3.png");
    }
    .dice_4 {
      background-image: url("~@/assets/images/dice/dice_4.png");
    }
    .dice_5 {
      background-image: url("~@/assets/images/dice/dice_5.png");
    }
    .dice_6 {
      background-image: url("~@/assets/images/dice/dice_6.png");
    }
  }
  .blue {
    color: #12a2e6;
  }
  .red {
    color: #fe8365;
  }
}
</style>
