<template>
  <div
    class="playtable"
    :class="{
      unclick: [
        'endBet',
        'startRob',
        'startRobCountDown',
        'toRob',
        'sendScanResult'
      ].includes(sendMode)
    }"
  >
    <!-- 百家乐 -->
    <div class="view baccarat" v-if="game_id == 1">
      <div class="list top">
        <!-- 小 -->
        <div class="item min" :class="{ unclick: can_bet_big_small != 1 }">
          <confirmBet
            @confirm="confirmChip"
            @cancel="cancelChip"
            :data="{
              money: downChip.small_amount,
              show: touch == 'small_amount'
            }"
          ></confirmBet>
          <chipView
            @click="downBet($event, 'small_amount')"
            :list="chipArray.small_amount"
            :win="winArray.includes('small')"
          ></chipView>
          <div class="text">
            <span class="big">{{ Lang[Type].small }}</span>
            <span>1:1.5</span>
          </div>
          <div class="money">{{ bet_amount_msg.small_amount || 0 }}</div>
        </div>
        <!-- 闲对 -->
        <div class="item ppair">
          <confirmBet
            @confirm="confirmChip"
            @cancel="cancelChip"
            :data="{
              money: downChip.player_pair_amount,
              show: touch == 'player_pair_amount'
            }"
          ></confirmBet>

          <chipView
            @click="downBet($event, 'player_pair_amount')"
            :list="chipArray.player_pair_amount"
            :win="winArray.includes('player_pair')"
          ></chipView>
          <div class="text">
            <span class="big">{{ Lang[Type].p_player }}</span>
            <span>1:11</span>
          </div>
          <div class="money">{{ bet_amount_msg.player_pair_amount }}</div>
        </div>
        <!-- 幸运6 -->
        <div class="item luck" :class="{ unclick: can_bet_luck_six != 1 }">
          <confirmBet
            @confirm="confirmChip"
            @cancel="cancelChip"
            :data="{
              money: downChip.luck_six_amount,
              show: touch == 'luck_six_amount'
            }"
          ></confirmBet>
          <chipView
            @click="downBet($event, 'luck_six_amount')"
            :list="chipArray.luck_six_amount"
            :win="winArray.includes('luck_six')"
          ></chipView>
          <div class="text">
            <span class="big">
              {{ Lang[Type].luckSix }} {{ Lang[Type].max }}
            </span>
            <span>1:20</span>
          </div>

          <div class="money">{{ bet_amount_msg.luck_six_amount || 0 }}</div>
        </div>
        <!-- 庄对 -->
        <div class="item bpair">
          <confirmBet
            @confirm="confirmChip"
            @cancel="cancelChip"
            :data="{
              money: downChip.banker_pair_amount,
              show: touch == 'banker_pair_amount'
            }"
          ></confirmBet>
          <chipView
            @click="downBet($event, 'banker_pair_amount')"
            :list="chipArray.banker_pair_amount"
            :win="winArray.includes('banker_pair')"
          ></chipView>
          <div class="text">
            <span class="big">{{ Lang[Type].p_banker }}</span>
            <span>1:11</span>
          </div>
          <div class="money">{{ bet_amount_msg.banker_pair_amount }}</div>
        </div>
        <!-- 大 -->
        <div class="item max" :class="{ unclick: can_bet_big_small != 1 }">
          <confirmBet
            @confirm="confirmChip"
            @cancel="cancelChip"
            :data="{ money: downChip.big_amount, show: touch == 'big_amount' }"
          ></confirmBet>
          <chipView
            @click="downBet($event, 'big_amount')"
            :list="chipArray.big_amount"
            :win="winArray.includes('big')"
          ></chipView>
          <div class="text">
            <span class="big">{{ Lang[Type].big }}</span>
            <span>1:0.5</span>
          </div>
          <div class="money">{{ bet_amount_msg.big_amount || 0 }}</div>
        </div>
      </div>
      <div class="list bottom">
        <!-- 闲 -->
        <div class="item palyer">
          <confirmBet
            @confirm="confirmChip"
            @cancel="cancelChip"
            :data="{
              money: downChip.player_amount,
              show: touch == 'player_amount'
            }"
          ></confirmBet>
          <chipView
            @click="downBet($event, 'player_amount')"
            :list="chipArray.player_amount"
            :win="winArray.includes('player')"
          ></chipView>
          <div class="text">
            <span class="big">{{ Lang[Type].player }}</span>
            <span>1:1</span>
          </div>
          <div class="money">{{ bet_amount_msg.player_amount }}</div>
        </div>
        <!-- 和 -->
        <div class="item tie">
          <confirmBet
            @confirm="confirmChip"
            @cancel="cancelChip"
            :data="{ money: downChip.tie_amount, show: touch == 'tie_amount' }"
          ></confirmBet>
          <chipView
            @click="downBet($event, 'tie_amount')"
            :list="chipArray.tie_amount"
            :win="winArray.includes('tie')"
          ></chipView>
          <div class="text">
            <span class="big">{{ Lang[Type].tie }}</span>
            <span>1:8</span>
          </div>
          <div class="money">{{ bet_amount_msg.tie_amount }}</div>
        </div>
        <!-- 庄 -->
        <div class="item banker">
          <confirmBet
            @confirm="confirmChip"
            @cancel="cancelChip"
            :data="{
              money: downChip.banker_amount,
              show: touch == 'banker_amount'
            }"
          ></confirmBet>
          <chipView
            @click="downBet($event, 'banker_amount')"
            :list="chipArray.banker_amount"
            :win="winArray.includes('banker')"
          ></chipView>
          <div class="text">
            <span class="big">{{ Lang[Type].banker }}</span>
            <span>{{ baccarat_type == 0 ? "1:0.95" : "1:1" }}</span>
          </div>
          <div class="money">{{ bet_amount_msg.banker_amount }}</div>
        </div>
      </div>
    </div>
    <!-- 龙虎 -->
    <div class="view longhu" v-if="game_id == 2">
      <div class="list">
        <!-- 龙 -->
        <div class="item banker">
          <confirmBet
            @confirm="confirmChip"
            @cancel="cancelChip"
            :data="{
              money: downChip.banker_amount,
              show: touch == 'banker_amount'
            }"
          ></confirmBet>
          <chipView
            @click="downBet($event, 'banker_amount')"
            :list="chipArray.banker_amount"
            :win="winArray.includes('banker')"
          ></chipView>
          <div class="text">
            <span class="big">{{ Lang[Type].dragon }}</span>
            <span>1:1</span>
          </div>
          <div class="money">{{ bet_amount_msg.banker_amount }}</div>
        </div>
        <!-- 和 -->
        <div class="item tie">
          <confirmBet
            @confirm="confirmChip"
            @cancel="cancelChip"
            :data="{ money: downChip.tie_amount, show: touch == 'tie_amount' }"
          ></confirmBet>
          <chipView
            @click="downBet($event, 'tie_amount')"
            :list="chipArray.tie_amount"
            :win="winArray.includes('tie')"
          ></chipView>
          <div class="text">
            <span class="big">{{ Lang[Type].tie }}</span>
            <span>1:8</span>
          </div>
          <div class="money">{{ bet_amount_msg.tie_amount }}</div>
        </div>
        <!-- 虎 -->
        <div class="item palyer">
          <confirmBet
            @confirm="confirmChip"
            @cancel="cancelChip"
            :data="{
              money: downChip.player_amount,
              show: touch == 'player_amount'
            }"
          ></confirmBet>
          <chipView
            @click="downBet($event, 'player_amount')"
            :list="chipArray.player_amount"
            :win="winArray.includes('player')"
          ></chipView>
          <div class="text">
            <span class="big">{{ Lang[Type].tiger }}</span>
            <span>1:1</span>
          </div>
          <div class="money">{{ bet_amount_msg.player_amount }}</div>
        </div>
      </div>
    </div>
    <!-- 牛牛 -->
    <div class="view nn" v-if="game_id == 4 || game_id == 5">
      <div class="list">
        <!-- 闲1 -->
        <span class="tab">{{ Lang[Type].player }}1</span>
        <!-- 庄翻倍 -->
        <div class="item banker">
          <confirmBet
            @confirm="confirmChip"
            @cancel="cancelChip"
            :data="{
              money: downChip.amount_player_1_banker_times,
              show: touch == 'amount_player_1_banker_times',
              times: true,
              game_id: game_id
            }"
          ></confirmBet>
          <chipView
            @click="downBet($event, 'amount_player_1_banker_times')"
            :list="chipArray.amount_player_1_banker_times"
            :win="winArray.includes('player_1_banker')"
          ></chipView>
          <div class="text">
            <span class="big">
              {{ Type != "cn" && Type != "tw" ? "B" : Lang[Type].banker }}
            </span>
            <span>{{ Lang[Type].double }}</span>
          </div>
          <div class="money">
            {{ bet_amount_msg.amount_player_1_banker_times }}
          </div>
        </div>
        <!-- 庄平倍 -->
        <div class="item banker">
          <confirmBet
            @confirm="confirmChip"
            @cancel="cancelChip"
            :data="{
              money: downChip.amount_player_1_banker,
              show: touch == 'amount_player_1_banker'
            }"
          ></confirmBet>
          <chipView
            @click="downBet($event, 'amount_player_1_banker')"
            :list="chipArray.amount_player_1_banker"
            :win="winArray.includes('player_1_banker')"
          ></chipView>
          <div class="text">
            <span class="big">
              {{ Type != "cn" && Type != "tw" ? "B" : Lang[Type].banker }}
            </span>
            <span>{{ Lang[Type].equal }}</span>
          </div>
          <div class="money">{{ bet_amount_msg.amount_player_1_banker }}</div>
        </div>
        <!-- 闲翻倍 -->
        <div class="item palyer">
          <confirmBet
            @confirm="confirmChip"
            @cancel="cancelChip"
            :data="{
              money: downChip.amount_player_1_times,
              show: touch == 'amount_player_1_times',
              times: true,
              game_id: game_id
            }"
          ></confirmBet>
          <chipView
            @click="downBet($event, 'amount_player_1_times')"
            :list="chipArray.amount_player_1_times"
            :win="winArray.includes('player_1')"
          ></chipView>
          <div class="text">
            <span class="big">
              {{ Type != "cn" && Type != "tw" ? "P" : Lang[Type].player }}
            </span>
            <span>{{ Lang[Type].double }}</span>
          </div>
          <div class="money">{{ bet_amount_msg.amount_player_1_times }}</div>
        </div>
        <!-- 闲平倍 -->
        <div class="item palyer">
          <confirmBet
            @confirm="confirmChip"
            @cancel="cancelChip"
            :data="{
              money: downChip.amount_player_1,
              show: touch == 'amount_player_1'
            }"
          ></confirmBet>
          <chipView
            @click="downBet($event, 'amount_player_1')"
            :list="chipArray.amount_player_1"
            :win="winArray.includes('player_1')"
          ></chipView>
          <div class="text">
            <span class="big">
              {{ Type != "cn" && Type != "tw" ? "P" : Lang[Type].player }}
            </span>
            <span>{{ Lang[Type].equal }}</span>
          </div>
          <div class="money">{{ bet_amount_msg.amount_player_1 }}</div>
        </div>
      </div>
      <!-- 闲2 -->
      <div class="list">
        <span class="tab">{{ Lang[Type].player }}2</span>
        <!-- 庄翻倍 -->
        <div class="item banker">
          <confirmBet
            @confirm="confirmChip"
            @cancel="cancelChip"
            :data="{
              money: downChip.amount_player_2_banker_times,
              show: touch == 'amount_player_2_banker_times',
              times: true,
              game_id: game_id
            }"
          ></confirmBet>
          <chipView
            @click="downBet($event, 'amount_player_2_banker_times')"
            :list="chipArray.amount_player_2_banker_times"
            :win="winArray.includes('player_2_banker')"
          ></chipView>
          <div class="text">
            <span class="big">
              {{ Type != "cn" && Type != "tw" ? "B" : Lang[Type].banker }}
            </span>
            <span>{{ Lang[Type].double }}</span>
          </div>
          <div class="money">
            {{ bet_amount_msg.amount_player_2_banker_times }}
          </div>
        </div>
        <!-- 庄平倍 -->
        <div class="item banker">
          <confirmBet
            @confirm="confirmChip"
            @cancel="cancelChip"
            :data="{
              money: downChip.amount_player_2_banker,
              show: touch == 'amount_player_2_banker'
            }"
          ></confirmBet>
          <chipView
            @click="downBet($event, 'amount_player_2_banker')"
            :list="chipArray.amount_player_2_banker"
            :win="winArray.includes('player_2_banker')"
          ></chipView>
          <div class="text">
            <span class="big">
              {{ Type != "cn" && Type != "tw" ? "B" : Lang[Type].banker }}
            </span>
            <span>{{ Lang[Type].equal }}</span>
          </div>
          <div class="money">
            {{ bet_amount_msg.amount_player_2_banker }}
          </div>
        </div>
        <!-- 闲翻倍 -->
        <div class="item palyer">
          <confirmBet
            @confirm="confirmChip"
            @cancel="cancelChip"
            :data="{
              money: downChip.amount_player_2_times,
              show: touch == 'amount_player_2_times',
              times: true,
              game_id: game_id
            }"
          ></confirmBet>
          <chipView
            @click="downBet($event, 'amount_player_2_times')"
            :list="chipArray.amount_player_2_times"
            :win="winArray.includes('player_2')"
          ></chipView>
          <div class="text">
            <span class="big">
              {{ Type != "cn" && Type != "tw" ? "P" : Lang[Type].player }}
            </span>
            <span>{{ Lang[Type].double }}</span>
          </div>
          <div class="money">{{ bet_amount_msg.amount_player_2_times }}</div>
        </div>
        <!-- 闲平倍 -->
        <div class="item palyer">
          <confirmBet
            @confirm="confirmChip"
            @cancel="cancelChip"
            :data="{
              money: downChip.amount_player_2,
              show: touch == 'amount_player_2'
            }"
          ></confirmBet>
          <chipView
            @click="downBet($event, 'amount_player_2')"
            :list="chipArray.amount_player_2"
            :win="winArray.includes('player_2')"
          ></chipView>
          <div class="text">
            <span class="big">
              {{ Type != "cn" && Type != "tw" ? "P" : Lang[Type].player }}
            </span>
            <span>{{ Lang[Type].equal }}</span>
          </div>
          <div class="money">{{ bet_amount_msg.amount_player_2 }}</div>
        </div>
      </div>
      <!-- 闲3 -->
      <div class="list">
        <span class="tab">{{ Lang[Type].player }}3</span>
        <!-- 庄翻倍 -->
        <div class="item banker">
          <confirmBet
            @confirm="confirmChip"
            @cancel="cancelChip"
            :data="{
              money: downChip.amount_player_3_banker_times,
              show: touch == 'amount_player_3_banker_times',
              times: true,
              game_id: game_id
            }"
          ></confirmBet>
          <chipView
            @click="downBet($event, 'amount_player_3_banker_times')"
            :list="chipArray.amount_player_3_banker_times"
            :win="winArray.includes('player_3_banker')"
          ></chipView>
          <div class="text">
            <span class="big">
              {{ Type != "cn" && Type != "tw" ? "B" : Lang[Type].banker }}
            </span>
            <span>{{ Lang[Type].double }}</span>
          </div>

          <div class="money">
            {{ bet_amount_msg.amount_player_3_banker_times }}
          </div>
        </div>
        <!-- 庄平倍 -->
        <div class="item banker">
          <confirmBet
            @confirm="confirmChip"
            @cancel="cancelChip"
            :data="{
              money: downChip.amount_player_3_banker,
              show: touch == 'amount_player_3_banker'
            }"
          ></confirmBet>
          <chipView
            @click="downBet($event, 'amount_player_3_banker')"
            :list="chipArray.amount_player_3_banker"
            :win="winArray.includes('player_3_banker')"
          ></chipView>
          <div class="text">
            <span class="big">
              {{ Type != "cn" && Type != "tw" ? "B" : Lang[Type].banker }}
            </span>
            <span>{{ Lang[Type].equal }}</span>
          </div>
          <div class="money">{{ bet_amount_msg.amount_player_3_banker }}</div>
        </div>
        <!-- 闲翻倍 -->
        <div class="item palyer">
          <confirmBet
            @confirm="confirmChip"
            @cancel="cancelChip"
            :data="{
              money: downChip.amount_player_3_times,
              show: touch == 'amount_player_3_times',
              times: true,
              game_id: game_id
            }"
          ></confirmBet>
          <chipView
            @click="downBet($event, 'amount_player_3_times')"
            :list="chipArray.amount_player_3_times"
            :win="winArray.includes('player_3')"
          ></chipView>
          <div class="text">
            <span class="big">
              {{ Type != "cn" && Type != "tw" ? "P" : Lang[Type].player }}
            </span>
            <span>{{ Lang[Type].double }}</span>
          </div>
          <div class="money">{{ bet_amount_msg.amount_player_3_times }}</div>
        </div>
        <!-- 闲平倍 -->
        <div class="item palyer">
          <confirmBet
            @confirm="confirmChip"
            @cancel="cancelChip"
            :data="{
              money: downChip.amount_player_3,
              show: touch == 'amount_player_3'
            }"
          ></confirmBet>
          <chipView
            @click="downBet($event, 'amount_player_3')"
            :list="chipArray.amount_player_3"
            :win="winArray.includes('player_3')"
          ></chipView>
          <div class="text">
            <span class="big">
              {{ Type != "cn" && Type != "tw" ? "P" : Lang[Type].player }}
            </span>
            <span>{{ Lang[Type].equal }}</span>
          </div>
          <div class="money">{{ bet_amount_msg.amount_player_3 }}</div>
        </div>
      </div>
    </div>
    <!-- 色碟 -->
    <div class="view toning" v-if="game_id == 6">
      <div class="list">
        <!-- 0 -->
        <div class="item">
          <confirmBet
            @confirm="confirmChip"
            @cancel="cancelChip"
            :data="{
              money: downChip.toning_zero,
              show: touch == 'toning_zero'
            }"
          ></confirmBet>
          <chipView
            @click="downBet($event, 'toning_zero')"
            :list="chipArray.toning_zero"
            :win="winArray.includes('toning_zero')"
          ></chipView>
          <div class="round-box">
            <span class="span"></span>
            <span class="span"></span>
            <span class="span"></span>
            <span class="span">0</span>
          </div>
          <div class="proportion">
            <span>1:12</span>
          </div>
          <div class="money">{{ bet_amount_msg.toning_zero }}</div>
        </div>
        <!-- 双 -->
        <div class="item">
          <confirmBet
            @confirm="confirmChip"
            @cancel="cancelChip"
            :data="{
              money: downChip.toning_plural,
              show: touch == 'toning_plural'
            }"
          ></confirmBet>
          <chipView
            @click="downBet($event, 'toning_plural')"
            :list="chipArray.toning_plural"
            :win="winArray.includes('toning_plural')"
          ></chipView>
          <div class="text banker">
            <span class="big">{{ Lang[Type].even }}</span>
            <span>1:0.96</span>
          </div>
          <div class="money">{{ bet_amount_msg.toning_plural }}</div>
        </div>
        <!-- 单 -->
        <div class="item">
          <confirmBet
            @confirm="confirmChip"
            @cancel="cancelChip"
            :data="{
              money: downChip.toning_singular,
              show: touch == 'toning_singular'
            }"
          ></confirmBet>
          <chipView
            @click="downBet($event, 'toning_singular')"
            :list="chipArray.toning_singular"
            :win="winArray.includes('toning_singular')"
          ></chipView>
          <div class="text palyer">
            <span class="big">{{ Lang[Type].odd }}</span>
            <span>1:0.96</span>
          </div>
          <div class="money">{{ bet_amount_msg.toning_singular }}</div>
        </div>
        <!-- 4 -->
        <div class="item">
          <confirmBet
            @confirm="confirmChip"
            @cancel="cancelChip"
            :data="{
              money: downChip.toning_four,
              show: touch == 'toning_four'
            }"
          ></confirmBet>
          <chipView
            @click="downBet($event, 'toning_four')"
            :list="chipArray.toning_four"
            :win="winArray.includes('toning_four')"
          ></chipView>
          <div class="round-box">
            <span class="span red"></span>
            <span class="span red"></span>
            <span class="span red"></span>
            <span class="span red">4</span>
          </div>
          <div class="proportion">
            <span>1:12</span>
          </div>
          <div class="money">{{ bet_amount_msg.toning_four }}</div>
        </div>
      </div>
      <div class="list">
        <!-- 1 -->
        <div class="item">
          <confirmBet
            @confirm="confirmChip"
            @cancel="cancelChip"
            :data="{
              money: downChip.toning_one,
              show: touch == 'toning_one'
            }"
          ></confirmBet>
          <chipView
            @click="downBet($event, 'toning_one')"
            :list="chipArray.toning_one"
            :win="winArray.includes('toning_one')"
          ></chipView>
          <div class="round-box">
            <span class="span"></span>
            <span class="span"></span>
            <span class="span"></span>
            <span class="span red">1</span>
          </div>
          <div class="proportion">
            <span>1:2.6</span>
          </div>
          <div class="money">{{ bet_amount_msg.toning_one }}</div>
        </div>
        <!-- 小 -->
        <div class="item">
          <confirmBet
            @confirm="confirmChip"
            @cancel="cancelChip"
            :data="{
              money: downChip.toning_small,
              show: touch == 'toning_small'
            }"
          ></confirmBet>
          <chipView
            @click="downBet($event, 'toning_small')"
            :list="chipArray.toning_small"
            :win="winArray.includes('toning_small')"
          ></chipView>
          <div class="text palyer">
            <span class="big">{{ Lang[Type].small }}</span>
            <span>1:0.96</span>
          </div>
          <div class="money">{{ bet_amount_msg.toning_small }}</div>
        </div>
        <!-- 大 -->
        <div class="item">
          <confirmBet
            @confirm="confirmChip"
            @cancel="cancelChip"
            :data="{
              money: downChip.toning_big,
              show: touch == 'toning_big'
            }"
          ></confirmBet>
          <chipView
            @click="downBet($event, 'toning_big')"
            :list="chipArray.toning_big"
            :win="winArray.includes('toning_big')"
          ></chipView>
          <div class="text banker">
            <span class="big">{{ Lang[Type].big }}</span>
            <span>1:0.96</span>
          </div>
          <div class="money">{{ bet_amount_msg.toning_big }}</div>
        </div>
        <!-- 3 -->
        <div class="item">
          <confirmBet
            @confirm="confirmChip"
            @cancel="cancelChip"
            :data="{
              money: downChip.toning_three,
              show: touch == 'toning_three'
            }"
          ></confirmBet>
          <chipView
            @click="downBet($event, 'toning_three')"
            :list="chipArray.toning_three"
            :win="winArray.includes('toning_three')"
          ></chipView>
          <div class="round-box">
            <span class="span red"></span>
            <span class="span red"></span>
            <span class="span red"></span>
            <span class="span">3</span>
          </div>
          <div class="proportion">
            <span>1:2.6</span>
          </div>
          <div class="money">{{ bet_amount_msg.toning_three }}</div>
        </div>
      </div>
    </div>
    <!-- 骰宝 -->
    <div class="dice" v-if="game_id == 7">
      <div class="list first">
        <!-- small -->
        <div class="cols item small">
          <confirmBet
            @confirm="confirmChip"
            @cancel="cancelChip"
            :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"
              :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"
              :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"
              :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"
              :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"
              :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"
              :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"
              :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"
              :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"
              :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"
              :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"
              :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"
              :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"
              :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"
            :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"
            :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"
            :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"
            :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"
            :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"
            :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"
            :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"
            :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"
            :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"
            :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"
            :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"
            :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"
            :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"
            :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"
            :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"
            :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"
            :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"
            :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"
            :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"
            :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"
            :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"
            :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"
            :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"
            :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"
            :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"
            :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"
            :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"
            :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"
            :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"
            :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"
            :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"
                :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"
                :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"
                :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"
                :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"
                :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"
                :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"
            :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>
  </div>
</template>

<script>
import { baccaratData, nnData, toningData, diceData } from "@/utils/common"
import { ref, computed, reactive, watch, onUnmounted } from "vue"
import { useStore } from "vuex"
import { useRouter, useRoute } from "vue-router"
import confirmBet from "@/components/confirmBet.vue"
import chipView from "@/components/chipView.vue"
import { showToast } from "vant"
import { audioMp3 } from "@/assets/js/sound.js"
export default {
  name: "PlayTable",
  components: { confirmBet, chipView },
  props: {
    game_id: {
      type: [String, Number],
      default: 1
    },
    table_id: {
      type: [String, Number],
      default: null
    },
    number_tab_id: {
      type: [String, Number],
      default: null
    },
    sendMode: {
      type: String,
      default: ""
    },
    is_scavenging: {
      type: [String, Number],
      default: 0
    },
    winArray: {
      type: Array,
      default: () => []
    },
    bet_amount_msg: {
      type: Object,
      default: () => ({
        // 百家乐&龙虎
        ...baccaratData.amount,
        // 牛牛
        ...nnData.amount,
        // 色碟
        ...toningData.amount,
        // 骰宝
        ...diceData.amount
      })
    },
    can_bet_big_small: {
      type: [String, Number],
      default: 1
    },
    can_bet_luck_six: {
      type: [String, Number],
      default: 1
    }
  },
  setup(props) {
    let virtuallyTimer = null //虚假下注定循环时器
    const store = useStore()
    const route = useRoute()
    const router = useRouter()
    const touch = ref(null)
    const openGameTimes = ref(0)
    const Type = computed(() => store.state.config.$Type)
    const Lang = computed(() => store.state.config.$lang)
    const online = computed(() => store.state.config.online)
    const betInfo = computed(() => store.state.socket.betInfo)
    const chooseChip = computed(() => store.state.app.chooseChip)
    const chipArry = computed(() => store.state.config.chipArry)
    const userInfo = computed(() => store.state.app.userInfo)
    const showOtherChip = computed(() => store.state.config.showOtherChip)
    const baccarat_type = computed(() => store.state.config.baccaratType)
    const breakOff = (data) => {
      let new_data
      try {
        new_data = JSON.parse(JSON.stringify(data))
      } catch (err) {
        new_data = data
        console.log(err)
      }
      return new_data
    }
    const downChip = reactive({
      // 百家乐&龙虎
      ...breakOff(baccaratData.amount),
      // 牛牛
      ...breakOff(nnData.amount),
      // 色碟
      ...breakOff(toningData.amount),
      // 骰宝
      ...breakOff(diceData.amount)
    })
    const sendChip = reactive({
      // 百家乐&龙虎
      ...breakOff(baccaratData.amount),
      // 牛牛
      ...breakOff(nnData.amount),
      // 色碟
      ...breakOff(toningData.amount),
      // 骰宝
      ...breakOff(diceData.amount)
    })
    const chipArray = reactive({
      // 百家乐&龙虎
      ...breakOff(baccaratData.array),
      // 牛牛
      ...breakOff(nnData.array),
      // 色碟
      ...breakOff(toningData.array),
      // 骰宝
      ...breakOff(diceData.array)
    })
    // 随机数生成
    const getRndInteger = (min, max) => {
      return Math.floor(Math.random() * (max - min)) + min
    }
    const downBet = (e, type) => {
      const { value: chip, key } = chooseChip.value
      if (props.sendMode == "startBetCountDown") {
        if (type == "luck_six_amount" && props.can_bet_luck_six != 1) {
          showToast(Lang.value[Type.value].to_bet_fail_7)
        } else if (
          (type == "big_amount" || type == "small_amount") &&
          props.can_bet_big_small != 1
        ) {
          showToast(Lang.value[Type.value].to_bet_fail_8)
        } else {
          touch.value = type
          sendChip[type] = chip + (sendChip[type] || 0)
          downChip[type] = chip + (downChip[type] || 0)
          chipArray[type].push({
            x: `calc(${getRndInteger(30, 90)}% - 0.69rem)`,
            y: `calc(${getRndInteger(50, 90)}% - 0.55rem)`,
            key: `chip_${key}`,
            type: "self",
            uid: userInfo.value.id,
            value: chip
          })
          audioMp3(["push"]).Play()
        }
      }
    }
    const nameArray = [
      // 百家乐&龙虎
      ...baccaratData.key,
      // 牛牛
      ...nnData.key,
      // 色碟
      ...toningData.key,
      // 骰宝
      ...diceData.key
    ]

    // 取消下注
    const cancelChip = () => {
      nameArray.forEach((key) => {
        chipArray[key] = chipArray[key].filter((v) => v.type != "self")
        downChip[key] = 0
        sendChip[key] = 0
        const socketChipArray = chipArray[key].filter((v) => v.type == "socket")
        if (socketChipArray.length > 0) {
          socketChipArray.forEach((v) => {
            downChip[key] = downChip[key] + v.value
          })
        }
        touch.value = null
      })
    }

    // 确认下注
    const confirmChip = () => {
      if (props.sendMode == "startBetCountDown") {
        touch.value = null
        const betName = nameArray.filter((key) => downChip[key] > 0)
        const downBet = {}
        if (betName.length > 0) {
          betName.forEach((v) => {
            downBet[v] = sendChip[v]
          })
        }
        const sendData = {
          mode: "toBet",
          table_id: props.table_id,
          number_tab_id: props.number_tab_id
        }
        // 是否免佣
        if (props.game_id == 1) {
          sendData.baccarat_type = baccarat_type.value
        }
        if (props.game_id == 7) {
          sendData.amount = downBet
        }
        store.dispatch("socket/sendMsg", {
          ...sendData,
          ...downBet
        })
        nameArray.forEach((key) => {
          sendChip[key] = 0
        })
      } else {
        showToast(Lang.value[Type.value].msg_game_not_start)
        cancelChip()
        audioMp3(["alert"]).Play()
      }
    }
    // 清空下注区筹码
    const resetChip = (state) => {
      let isHave = false
      nameArray.forEach((key) => {
        if (downChip[key] > 0) {
          isHave = true
        }
        chipArray[key] = []
        downChip[key] = 0
        sendChip[key] = 0
        touch.value = null
      })
      if (isHave && !state) {
        audioMp3(["push"]).Play()
      }
    }
    // 洗牌排序
    const disorder = (arr) => {
      let clonrArr = arr.concat(),
        len = clonrArr.length,
        index = null
      for (let i = 0; i < len; i++) {
        index = Math.floor(Math.random() * clonrArr.length)
        ;[clonrArr[index], clonrArr[i]] = [clonrArr[i], clonrArr[index]]
      }
      // 返回结果
      return clonrArr
    }
    // 虚拟下注
    const virtuallyDownBet = () => {
      let typeArray = []
      if (props.game_id == 1) {
        typeArray = [
          "banker_amount",
          "player_amount",
          "tie_amount",
          "banker_pair_amount",
          "player_pair_amount"
        ]
        if (props.can_bet_luck_six == 1) {
          typeArray = [...typeArray, "luck_six_amount"]
        }
        if (props.can_bet_big_small == 1) {
          typeArray = [...typeArray, "big_amount", "small_amount"]
        }
      } else if (props.game_id == 2) {
        typeArray = ["banker_amount", "player_amount", "tie_amount"]
      } else if (props.game_id == 4 || props.game_id == 5) {
        typeArray = [...nnData.key]
      } else if (props.game_id == 6) {
        typeArray = [...toningData.key]
      } else if (props.game_id == 7) {
        typeArray = [...diceData.key]
      }
      const cut = getRndInteger(1, 9)
      const virtuallyChipArry = disorder(chipArry.value.slice(0, cut))
      typeArray = disorder(typeArray)
      const people = getRndInteger(1, 8)
      for (let i = people; i--; i > 0) {
        const { value: chip, key } =
          virtuallyChipArry[getRndInteger(0, virtuallyChipArry.length - 1)]
        const type = typeArray[getRndInteger(0, typeArray.length)]
        chipArray[type].push({
          x: `calc(${getRndInteger(30, 90)}% - 0.69rem)`,
          y: `calc(${getRndInteger(50, 90)}% - 0.55rem)`,
          key: `chip_${key}`,
          type: "virtually",
          uid: 0,
          value: chip
        })
        const virtuallyData = {
          table_id: props.table_id,
          sendMode: "toBet",
          betAmountMsg: { [type]: chip }
        }
        store.dispatch("socket/updateVirtually", virtuallyData)
      }
    }
    // 离开销毁
    onUnmounted(() => {
      // console.log("离开页面", virtuallyTimer)
      store.commit("socket/updateBetInfo", [])
      clearInterval(virtuallyTimer)
      virtuallyTimer = null
      nameArray.forEach((key) => {
        downChip[key] = 0
      })
    })
    // 监听路由切换
    watch(
      () => [route.query],
      () => {
        openGameTimes.value = 0
        resetChip()
        clearInterval(virtuallyTimer)
        virtuallyTimer = null
      },
      { immediate: true, deep: true }
    )
    // 过滤虚拟下注筹码
    watch(
      () => [showOtherChip.value],
      ([val]) => {
        if (val) {
          nameArray.forEach((key) => {
            chipArray[key] = chipArray[key].filter((v) => v.type != "virtually")
            downChip[key] = 0
            sendChip[key] = 0
            const socketChipArray = chipArray[key].filter(
              (v) => v.type == "socket"
            )
            if (socketChipArray.length > 0) {
              socketChipArray.forEach((v) => {
                downChip[key] = downChip[key] + v.value
              })
            }
          })
        }
      },
      { immediate: true, deep: true }
    )
    watch(
      () => [props.sendMode],
      ([mode]) => {
        if (mode == "startBetCountDown") {
          if (showOtherChip.value) {
            if (virtuallyTimer == null) {
              virtuallyTimer = setInterval(() => {
                virtuallyDownBet()
              }, 1000)
            }
          } else {
            clearInterval(virtuallyTimer)
          }
        } else if (mode == "toBet") {
          openGameTimes.value = 0
          nameArray.forEach((key) => {
            chipArray[key].forEach((v) => {
              if (v.type == "self") {
                v.type = "socket"
              }
            })
          })
        } else if (mode == "endBet") {
          cancelChip()
          clearInterval(virtuallyTimer)
          virtuallyTimer = null
        } else if (mode == "startBet") {
          const outRoomTimes = store.state.config.outRoomTimes
          // 记录开局次数 操过N次不下注退出房间
          if (openGameTimes.value >= outRoomTimes) {
            router.replace({ name: store.state.app.routerStack })
          } else {
            openGameTimes.value += 1
          }
        }
      }
    )
    watch(
      () => [online.value, betInfo.value],
      ([onlineValue, betInfoValue]) => {
        if (onlineValue) {
          if (betInfoValue.length > 0) {
            betInfoValue.forEach((v) => {
              if (v.table_id == props.table_id) {
                nameArray.forEach((key) => {
                  if (v.game_id == 6) {
                    downChip[key] = parseInt(v.toning_amount[key] || 0)
                  } else if (v.game_id == 7) {
                    downChip[key] = parseInt(v.dice_amount[key] || 0)
                  } else {
                    downChip[key] = parseInt(v[key] || 0)
                  }
                })
              }
            })
          }
        }
      },
      { immediate: true, deep: true }
    )
    return {
      Type,
      Lang,
      downChip,
      touch,
      chipArray,
      baccarat_type,
      downBet,
      resetChip,
      cancelChip,
      confirmChip
    }
  }
}
</script>
<style lang="scss" scoped>
.playtable {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 8;
  .view {
    // width: 17.35rem;
    height: 2.7rem;
    position: absolute;
    // bottom: 0.25rem;
    // left: 50%;
    // margin-left: -8.675rem;

    left: 3rem;
    right: 3rem;
    bottom: 0.25rem;

    border-radius: 10px;
    transform: perspective(400px) rotateX(24deg);
    border: 1px solid #898a91;
    box-sizing: border-box;
    &.baccarat {
      .banker .chip-view {
        border-bottom-right-radius: 10px;
      }
      .palyer .chip-view {
        border-bottom-left-radius: 10px;
      }
      .max .chip-view {
        border-top-right-radius: 10px;
      }
      .min .chip-view {
        border-top-left-radius: 10px;
      }
    }
    &.longhu {
      .list {
        height: 100%;
        width: 100%;
        border: none;
        .item {
          flex: 1;
          &:first-child {
            .chip-view {
              border-top-left-radius: 10px;
            }
          }
          &:last-child {
            .chip-view {
              border-top-right-radius: 10px;
            }
          }
          .text {
            font-size: 0.65rem;
            text-shadow: 1px 1px #050505;
          }
        }
        .banker .chip-view {
          border-bottom-left-radius: 10px;
        }
        .palyer .chip-view {
          border-bottom-right-radius: 10px;
        }
      }
    }
    &.nn {
      display: flex;
      .list {
        width: 33.33%;
        height: 100%;
        flex-wrap: wrap;
        border: none;
        position: relative;
        &:first-child {
          .item:nth-of-type(1) {
            .chip-view {
              border-top-left-radius: 10px;
            }
          }
          .item:nth-of-type(3) {
            .chip-view {
              border-bottom-left-radius: 10px;
            }
          }
        }
        &:last-child {
          .item:nth-of-type(2) {
            border-right: none;
            .chip-view {
              border-top-right-radius: 10px;
            }
          }
          .item:nth-of-type(4) {
            border-right: none;
            .chip-view {
              border-bottom-right-radius: 10px;
            }
          }
        }
        .tab {
          position: absolute;
          top: -2px;
          color: #fff;
          font-size: 0.42rem;
          border: 1px solid #fff;
          padding: 1px 0.18rem;
          transform: scale(0.8) translateX(-50%);
          left: 50%;
          z-index: 2;
          background: #463ca8;
          border-radius: 2px;
          font-weight: 500;
        }
        .item {
          width: 50%;
          height: 50%;
          box-sizing: border-box;
          border-right: 1px solid #898a91;
          border-radius: 0;
          border-bottom: 1px solid #898a91;
          &:nth-of-type(3),
          &:nth-of-type(4) {
            border-bottom: 0;
          }
          .text {
            font-size: 0.58rem;
            text-shadow: 1px 1px #050505;
            span {
              padding-bottom: 0.2rem;
            }
          }
        }
      }
    }
    &.toning {
      .list {
        height: 50%;
        width: 100%;
        &:first-child {
          .item:nth-of-type(1) {
            .chip-view {
              border-top-left-radius: 10px;
            }
          }
          .item:nth-of-type(4) {
            .chip-view {
              border-top-right-radius: 10px;
            }
          }
        }
        &:last-child {
          .item:nth-of-type(1) {
            .chip-view {
              border-bottom-left-radius: 10px;
            }
          }
          .item:nth-of-type(4) {
            .chip-view {
              border-bottom-right-radius: 10px;
            }
          }
        }
        .item {
          flex: 1;
          max-width: 25%;
          .text {
            font-size: 0.5rem;
            text-shadow: 1px 1px #050505;
            .big {
              font-size: 0.58rem;
            }
          }
          .round-box,
          .proportion {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.4rem;
            color: #ddd;
            .span {
              width: 0.65rem;
              height: 0.65rem;
              border-radius: 0.7rem;
              background: #ddd;
              margin: 0.1rem;
              text-align: center;
              line-height: 0.7rem;
              font-size: 0.48rem;
              font-weight: 600;
              color: #222;
              &.red {
                background: #fe8365;
              }
            }
          }
        }
      }
    }
  }
  .list {
    display: flex;
    box-sizing: border-box;
    &:first-child {
      border-bottom: 1px solid #898a91;
    }
    &.top {
      height: 50%;
      .item {
        flex: 1;
        height: 100%;
        &:nth-child(3) {
          min-width: 4.86rem;
        }
        .text {
          margin-top: -2px;
          text-shadow: 1px 1px #050505;
        }
      }
    }
    &.bottom {
      height: 50%;
      .item {
        width: 33.33%;
        height: 100%;
        .text {
          font-size: 0.65rem;
          text-shadow: 1px 1px #050505;
        }
      }
    }
    .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;
        left: 0px;
        bottom: -2px;
        font-size: 0.24rem;
        font-weight: normal;
        transform: scale(0.7);
        color: #ddd;
        vertical-align: bottom;
        pointer-events: none;
        &::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);
        }
      }
    }
  }
  .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;
      .item .money {
        left: -3px;
        bottom: -3px;
        transform: scale(0.5);
        pointer-events: none;
      }
    }
    .first {
      height: 35%;
      .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;
    }
  }
  .banker {
    color: #fe8365;
  }
  .palyer {
    color: #12a2e6;
  }
  .bpair {
    color: #fe8365;
  }
  .ppair {
    color: #12a2e6;
  }
  .tie {
    color: #75e7af;
  }
  .min {
    border-top-left-radius: 10px;
    color: #f3c866;
  }
  .max {
    border-top-right-radius: 10px;
    color: #f3c866;
  }
  .luck .text {
    text-shadow: none !important;
    background-image: linear-gradient(
      90deg,
      #ffcc7d 0%,
      #93dd96 20%,
      #6078d4 50%,
      #f7e96f 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
.unclick {
  .list .item .chip-view {
    background: rgb(98 74 4 / 40%);
  }

  .dice {
    .ratio {
      background: rgb(98 74 4 / 40%);
    }
    .fourth {
      background: rgb(98 74 4 / 40%);
    }
    .fifth .center .bottom {
      background: rgb(98 74 4 / 40%);
    }
  }
}
</style>
