<template>
  <div class="roulette">
    <!-- 欧式 -->
    <div class="european">
      <div class="left">
        <div class="item green-bg">
          <confirmBet
            @confirm="confirmChip"
            @cancel="cancelChip"
          @undo="undoChip"
            :data="{
              money: downChip.straight_0,
              show: touch == 'straight_0'
            }"
          ></confirmBet>
          <chipView
            @click="downBet($event, 'straight_0')"
            :list="chipArray.straight_0"
            :win="winArray.includes('straight_0')"
          ></chipView>
          <div class="text">
            <span class="points">0</span>
          </div>
        </div>
      </div>
      <div class="center">
        <div class="list">
          <!-- 3 -->
          <div class="item red-bg">
            <confirmBet
              @confirm="confirmChip"
              @cancel="cancelChip"
          @undo="undoChip"
              :data="{
                money: downChip.straight_3,
                show: touch == 'straight_3'
              }"
            ></confirmBet>
            <chipView
              @click="downBet($event, 'straight_3')"
              :list="chipArray.straight_3"
              :win="winArray.includes('straight_3')"
            ></chipView>
            <div class="text">
              <span class="points">3</span>
            </div>
          </div>
          <!-- 6 -->
          <div class="item black-bg">
            <confirmBet
              @confirm="confirmChip"
              @cancel="cancelChip"
          @undo="undoChip"
              :data="{
                money: downChip.straight_6,
                show: touch == 'straight_6'
              }"
            ></confirmBet>
            <chipView
              @click="downBet($event, 'straight_6')"
              :list="chipArray.straight_6"
              :win="winArray.includes('straight_6')"
            ></chipView>
            <div class="text">
              <span class="points">6</span>
            </div>
          </div>
          <!-- 9 -->
          <div class="item red-bg">
            <confirmBet
              @confirm="confirmChip"
              @cancel="cancelChip"
          @undo="undoChip"
              :data="{
                money: downChip.straight_9,
                show: touch == 'straight_9'
              }"
            ></confirmBet>
            <chipView
              @click="downBet($event, 'straight_9')"
              :list="chipArray.straight_9"
              :win="winArray.includes('straight_9')"
            ></chipView>
            <div class="text">
              <span class="points">9</span>
            </div>
          </div>
          <!-- 12 -->
          <div class="item red-bg">
            <confirmBet
              @confirm="confirmChip"
              @cancel="cancelChip"
          @undo="undoChip"
              :data="{
                money: downChip.straight_12,
                show: touch == 'straight_12'
              }"
            ></confirmBet>
            <chipView
              @click="downBet($event, 'straight_12')"
              :list="chipArray.straight_12"
              :win="winArray.includes('straight_12')"
            ></chipView>
            <div class="text">
              <span class="points">12</span>
            </div>
          </div>
          <!-- 15 -->
          <div class="item black-bg">
            <confirmBet
              @confirm="confirmChip"
              @cancel="cancelChip"
          @undo="undoChip"
              :data="{
                money: downChip.straight_15,
                show: touch == 'straight_15'
              }"
            ></confirmBet>
            <chipView
              @click="downBet($event, 'straight_15')"
              :list="chipArray.straight_15"
              :win="winArray.includes('straight_15')"
            ></chipView>
            <div class="text">
              <span class="points">15</span>
            </div>
          </div>
          <!-- 18 -->
          <div class="item red-bg">
            <confirmBet
              @confirm="confirmChip"
              @cancel="cancelChip"
          @undo="undoChip"
              :data="{
                money: downChip.straight_18,
                show: touch == 'straight_18'
              }"
            ></confirmBet>
            <chipView
              @click="downBet($event, 'straight_18')"
              :list="chipArray.straight_18"
              :win="winArray.includes('straight_18')"
            ></chipView>
            <div class="text">
              <span class="points">18</span>
            </div>
          </div>
          <!-- 21 -->
          <div class="item red-bg">
            <confirmBet
              @confirm="confirmChip"
              @cancel="cancelChip"
          @undo="undoChip"
              :data="{
                money: downChip.straight_21,
                show: touch == 'straight_21'
              }"
            ></confirmBet>
            <chipView
              @click="downBet($event, 'straight_21')"
              :list="chipArray.straight_21"
              :win="winArray.includes('straight_21')"
            ></chipView>
            <div class="text">
              <span class="points">21</span>
            </div>
          </div>
          <!-- 24 -->
          <div class="item black-bg">
            <confirmBet
              @confirm="confirmChip"
              @cancel="cancelChip"
          @undo="undoChip"
              :data="{
                money: downChip.straight_24,
                show: touch == 'straight_24'
              }"
            ></confirmBet>
            <chipView
              @click="downBet($event, 'straight_24')"
              :list="chipArray.straight_24"
              :win="winArray.includes('straight_24')"
            ></chipView>
            <div class="text">
              <span class="points">24</span>
            </div>
          </div>
          <!-- 27 -->
          <div class="item red-bg">
            <confirmBet
              @confirm="confirmChip"
              @cancel="cancelChip"
          @undo="undoChip"
              :data="{
                money: downChip.straight_27,
                show: touch == 'straight_27'
              }"
            ></confirmBet>
            <chipView
              @click="downBet($event, 'straight_27')"
              :list="chipArray.straight_27"
              :win="winArray.includes('straight_27')"
            ></chipView>
            <div class="text">
              <span class="points">27</span>
            </div>
          </div>
          <!-- 30 -->
          <div class="item red-bg">
            <confirmBet
              @confirm="confirmChip"
              @cancel="cancelChip"
          @undo="undoChip"
              :data="{
                money: downChip.straight_30,
                show: touch == 'straight_30'
              }"
            ></confirmBet>
            <chipView
              @click="downBet($event, 'straight_30')"
              :list="chipArray.straight_30"
              :win="winArray.includes('straight_30')"
            ></chipView>
            <div class="text">
              <span class="points">30</span>
            </div>
          </div>
          <!-- 33 -->
          <div class="item black-bg">
            <confirmBet
              @confirm="confirmChip"
              @cancel="cancelChip"
          @undo="undoChip"
              :data="{
                money: downChip.straight_33,
                show: touch == 'straight_33'
              }"
            ></confirmBet>
            <chipView
              @click="downBet($event, 'straight_33')"
              :list="chipArray.straight_33"
              :win="winArray.includes('straight_33')"
            ></chipView>
            <div class="text">
              <span class="points">33</span>
            </div>
          </div>
          <!-- 36 -->
          <div class="item red-bg">
            <confirmBet
              @confirm="confirmChip"
              @cancel="cancelChip"
          @undo="undoChip"
              :data="{
                money: downChip.straight_36,
                show: touch == 'straight_36'
              }"
            ></confirmBet>
            <chipView
              @click="downBet($event, 'straight_36')"
              :list="chipArray.straight_36"
              :win="winArray.includes('straight_36')"
            ></chipView>
            <div class="text">
              <span class="points">36</span>
            </div>
          </div>
        </div>
        <div class="list">
          <!-- 2 -->
          <div class="item black-bg">
            <confirmBet
              @confirm="confirmChip"
              @cancel="cancelChip"
          @undo="undoChip"
              :data="{
                money: downChip.straight_2,
                show: touch == 'straight_2'
              }"
            ></confirmBet>
            <chipView
              @click="downBet($event, 'straight_2')"
              :list="chipArray.straight_2"
              :win="winArray.includes('straight_2')"
            ></chipView>
            <div class="text">
              <span class="points">2</span>
            </div>
          </div>
          <!-- 5 -->
          <div class="item red-bg">
            <confirmBet
              @confirm="confirmChip"
              @cancel="cancelChip"
          @undo="undoChip"
              :data="{
                money: downChip.straight_5,
                show: touch == 'straight_5'
              }"
            ></confirmBet>
            <chipView
              @click="downBet($event, 'straight_5')"
              :list="chipArray.straight_5"
              :win="winArray.includes('straight_5')"
            ></chipView>
            <div class="text">
              <span class="points">5</span>
            </div>
          </div>
          <!-- 8 -->
          <div class="item black-bg">
            <confirmBet
              @confirm="confirmChip"
              @cancel="cancelChip"
          @undo="undoChip"
              :data="{
                money: downChip.straight_8,
                show: touch == 'straight_8'
              }"
            ></confirmBet>
            <chipView
              @click="downBet($event, 'straight_8')"
              :list="chipArray.straight_8"
              :win="winArray.includes('straight_8')"
            ></chipView>
            <div class="text">
              <span class="points">8</span>
            </div>
          </div>
          <!-- 11 -->
          <div class="item black-bg">
            <confirmBet
              @confirm="confirmChip"
              @cancel="cancelChip"
          @undo="undoChip"
              :data="{
                money: downChip.straight_11,
                show: touch == 'straight_11'
              }"
            ></confirmBet>
            <chipView
              @click="downBet($event, 'straight_11')"
              :list="chipArray.straight_11"
              :win="winArray.includes('straight_11')"
            ></chipView>
            <div class="text">
              <span class="points">11</span>
            </div>
          </div>
          <!-- 14 -->
          <div class="item red-bg">
            <confirmBet
              @confirm="confirmChip"
              @cancel="cancelChip"
          @undo="undoChip"
              :data="{
                money: downChip.straight_14,
                show: touch == 'straight_14'
              }"
            ></confirmBet>
            <chipView
              @click="downBet($event, 'straight_14')"
              :list="chipArray.straight_14"
              :win="winArray.includes('straight_14')"
            ></chipView>
            <div class="text">
              <span class="points">14</span>
            </div>
          </div>
          <!-- 17 -->
          <div class="item black-bg">
            <confirmBet
              @confirm="confirmChip"
              @cancel="cancelChip"
          @undo="undoChip"
              :data="{
                money: downChip.straight_17,
                show: touch == 'straight_17'
              }"
            ></confirmBet>
            <chipView
              @click="downBet($event, 'straight_17')"
              :list="chipArray.straight_17"
              :win="winArray.includes('straight_17')"
            ></chipView>
            <div class="text">
              <span class="points">17</span>
            </div>
          </div>
          <!-- 20 -->
          <div class="item black-bg">
            <confirmBet
              @confirm="confirmChip"
              @cancel="cancelChip"
          @undo="undoChip"
              :data="{
                money: downChip.straight_20,
                show: touch == 'straight_20'
              }"
            ></confirmBet>
            <chipView
              @click="downBet($event, 'straight_20')"
              :list="chipArray.straight_20"
              :win="winArray.includes('straight_20')"
            ></chipView>
            <div class="text">
              <span class="points">20</span>
            </div>
          </div>
          <!-- 23 -->
          <div class="item red-bg">
            <confirmBet
              @confirm="confirmChip"
              @cancel="cancelChip"
          @undo="undoChip"
              :data="{
                money: downChip.straight_23,
                show: touch == 'straight_23'
              }"
            ></confirmBet>
            <chipView
              @click="downBet($event, 'straight_23')"
              :list="chipArray.straight_23"
              :win="winArray.includes('straight_23')"
            ></chipView>
            <div class="text">
              <span class="points">23</span>
            </div>
          </div>
          <!-- 26 -->
          <div class="item black-bg">
            <confirmBet
              @confirm="confirmChip"
              @cancel="cancelChip"
          @undo="undoChip"
              :data="{
                money: downChip.straight_26,
                show: touch == 'straight_26'
              }"
            ></confirmBet>
            <chipView
              @click="downBet($event, 'straight_26')"
              :list="chipArray.straight_26"
              :win="winArray.includes('straight_26')"
            ></chipView>
            <div class="text">
              <span class="points">26</span>
            </div>
          </div>
          <!-- 29 -->
          <div class="item black-bg">
            <confirmBet
              @confirm="confirmChip"
              @cancel="cancelChip"
          @undo="undoChip"
              :data="{
                money: downChip.straight_29,
                show: touch == 'straight_29'
              }"
            ></confirmBet>
            <chipView
              @click="downBet($event, 'straight_29')"
              :list="chipArray.straight_29"
              :win="winArray.includes('straight_29')"
            ></chipView>
            <div class="text">
              <span class="points">29</span>
            </div>
          </div>
          <!-- 32 -->
          <div class="item red-bg">
            <confirmBet
              @confirm="confirmChip"
              @cancel="cancelChip"
          @undo="undoChip"
              :data="{
                money: downChip.straight_32,
                show: touch == 'straight_32'
              }"
            ></confirmBet>
            <chipView
              @click="downBet($event, 'straight_32')"
              :list="chipArray.straight_32"
              :win="winArray.includes('straight_32')"
            ></chipView>
            <div class="text">
              <span class="points">32</span>
            </div>
          </div>
          <!-- 35 -->
          <div class="item black-bg">
            <confirmBet
              @confirm="confirmChip"
              @cancel="cancelChip"
          @undo="undoChip"
              :data="{
                money: downChip.straight_35,
                show: touch == 'straight_35'
              }"
            ></confirmBet>
            <chipView
              @click="downBet($event, 'straight_35')"
              :list="chipArray.straight_35"
              :win="winArray.includes('straight_35')"
            ></chipView>
            <div class="text">
              <span class="points">35</span>
            </div>
          </div>
        </div>
        <div class="list">
          <!-- 1 -->
          <div class="item red-bg">
            <confirmBet
              @confirm="confirmChip"
              @cancel="cancelChip"
          @undo="undoChip"
              :data="{
                money: downChip.straight_1,
                show: touch == 'straight_1'
              }"
            ></confirmBet>
            <chipView
              @click="downBet($event, 'straight_1')"
              :list="chipArray.straight_1"
              :win="winArray.includes('straight_1')"
            ></chipView>
            <div class="text">
              <span class="points">1</span>
            </div>
          </div>
          <!-- 4 -->
          <div class="item black-bg">
            <confirmBet
              @confirm="confirmChip"
              @cancel="cancelChip"
          @undo="undoChip"
              :data="{
                money: downChip.straight_4,
                show: touch == 'straight_4'
              }"
            ></confirmBet>
            <chipView
              @click="downBet($event, 'straight_4')"
              :list="chipArray.straight_4"
              :win="winArray.includes('straight_4')"
            ></chipView>
            <div class="text">
              <span class="points">4</span>
            </div>
          </div>
          <!-- 7 -->
          <div class="item red-bg">
            <confirmBet
              @confirm="confirmChip"
              @cancel="cancelChip"
          @undo="undoChip"
              :data="{
                money: downChip.straight_7,
                show: touch == 'straight_7'
              }"
            ></confirmBet>
            <chipView
              @click="downBet($event, 'straight_7')"
              :list="chipArray.straight_7"
              :win="winArray.includes('straight_7')"
            ></chipView>
            <div class="text">
              <span class="points">7</span>
            </div>
          </div>
          <!-- 10 -->
          <div class="item black-bg">
            <confirmBet
              @confirm="confirmChip"
              @cancel="cancelChip"
          @undo="undoChip"
              :data="{
                money: downChip.straight_10,
                show: touch == 'straight_10'
              }"
            ></confirmBet>
            <chipView
              @click="downBet($event, 'straight_10')"
              :list="chipArray.straight_10"
              :win="winArray.includes('straight_10')"
            ></chipView>
            <div class="text">
              <span class="points">10</span>
            </div>
          </div>
          <!-- 13 -->
          <div class="item black-bg">
            <confirmBet
              @confirm="confirmChip"
              @cancel="cancelChip"
          @undo="undoChip"
              :data="{
                money: downChip.straight_13,
                show: touch == 'straight_13'
              }"
            ></confirmBet>
            <chipView
              @click="downBet($event, 'straight_13')"
              :list="chipArray.straight_13"
              :win="winArray.includes('straight_13')"
            ></chipView>
            <div class="text">
              <span class="points">13</span>
            </div>
          </div>
          <!-- 16 -->
          <div class="item red-bg">
            <confirmBet
              @confirm="confirmChip"
              @cancel="cancelChip"
          @undo="undoChip"
              :data="{
                money: downChip.straight_16,
                show: touch == 'straight_16'
              }"
            ></confirmBet>
            <chipView
              @click="downBet($event, 'straight_16')"
              :list="chipArray.straight_16"
              :win="winArray.includes('straight_16')"
            ></chipView>
            <div class="text">
              <span class="points">16</span>
            </div>
          </div>
          <!-- 19 -->
          <div class="item red-bg">
            <confirmBet
              @confirm="confirmChip"
              @cancel="cancelChip"
          @undo="undoChip"
              :data="{
                money: downChip.straight_19,
                show: touch == 'straight_19'
              }"
            ></confirmBet>
            <chipView
              @click="downBet($event, 'straight_19')"
              :list="chipArray.straight_19"
              :win="winArray.includes('straight_19')"
            ></chipView>
            <div class="text">
              <span class="points">19</span>
            </div>
          </div>
          <!-- 22 -->
          <div class="item black-bg">
            <confirmBet
              @confirm="confirmChip"
              @cancel="cancelChip"
          @undo="undoChip"
              :data="{
                money: downChip.straight_22,
                show: touch == 'straight_22'
              }"
            ></confirmBet>
            <chipView
              @click="downBet($event, 'straight_22')"
              :list="chipArray.straight_22"
              :win="winArray.includes('straight_22')"
            ></chipView>
            <div class="text">
              <span class="points">22</span>
            </div>
          </div>
          <!-- 25 -->
          <div class="item red-bg">
            <confirmBet
              @confirm="confirmChip"
              @cancel="cancelChip"
          @undo="undoChip"
              :data="{
                money: downChip.straight_25,
                show: touch == 'straight_25'
              }"
            ></confirmBet>
            <chipView
              @click="downBet($event, 'straight_25')"
              :list="chipArray.straight_25"
              :win="winArray.includes('straight_25')"
            ></chipView>
            <div class="text">
              <span class="points">25</span>
            </div>
          </div>
          <!-- 28 -->
          <div class="item black-bg">
            <confirmBet
              @confirm="confirmChip"
              @cancel="cancelChip"
          @undo="undoChip"
              :data="{
                money: downChip.straight_28,
                show: touch == 'straight_28'
              }"
            ></confirmBet>
            <chipView
              @click="downBet($event, 'straight_28')"
              :list="chipArray.straight_28"
              :win="winArray.includes('straight_28')"
            ></chipView>
            <div class="text">
              <span class="points">28</span>
            </div>
          </div>
          <!-- 31 -->
          <div class="item black-bg">
            <confirmBet
              @confirm="confirmChip"
              @cancel="cancelChip"
          @undo="undoChip"
              :data="{
                money: downChip.straight_31,
                show: touch == 'straight_31'
              }"
            ></confirmBet>
            <chipView
              @click="downBet($event, 'straight_31')"
              :list="chipArray.straight_31"
              :win="winArray.includes('straight_31')"
            ></chipView>
            <div class="text">
              <span class="points">31</span>
            </div>
          </div>
          <!-- 34 -->
          <div class="item red-bg">
            <confirmBet
              @confirm="confirmChip"
              @cancel="cancelChip"
          @undo="undoChip"
              :data="{
                money: downChip.straight_34,
                show: touch == 'straight_34'
              }"
            ></confirmBet>
            <chipView
              @click="downBet($event, 'straight_34')"
              :list="chipArray.straight_34"
              :win="winArray.includes('straight_34')"
            ></chipView>
            <div class="text">
              <span class="points">34</span>
            </div>
          </div>
        </div>
        <div class="list">
          <!-- 第一打 -->
          <div class="item">
            <confirmBet
              @confirm="confirmChip"
              @cancel="cancelChip"
          @undo="undoChip"
              :data="{
                money: downChip.dozen_1,
                show: touch == 'dozen_1'
              }"
            ></confirmBet>
            <chipView
              @click="downBet($event, 'dozen_1')"
              :list="chipArray.dozen_1"
              :win="winArray.includes('dozen_1')"
            ></chipView>
            <div class="text">
              <span class="points">{{ Lang[Type].first_dozen }}</span>
              <span class="small">1-12</span>
            </div>
          </div>
          <!-- 第二打 -->
          <div class="item">
            <confirmBet
              @confirm="confirmChip"
              @cancel="cancelChip"
          @undo="undoChip"
              :data="{
                money: downChip.dozen_2,
                show: touch == 'dozen_2'
              }"
            ></confirmBet>
            <chipView
              @click="downBet($event, 'dozen_2')"
              :list="chipArray.dozen_2"
              :win="winArray.includes('dozen_2')"
            ></chipView>
            <div class="text">
              <span class="points">{{ Lang[Type].second_dozen }}</span>
              <span class="small">13-24</span>
            </div>
          </div>
          <!-- 第三打 -->
          <div class="item">
            <confirmBet
              @confirm="confirmChip"
              @cancel="cancelChip"
          @undo="undoChip"
              :data="{
                money: downChip.dozen_3,
                show: touch == 'dozen_3'
              }"
            ></confirmBet>
            <chipView
              @click="downBet($event, 'dozen_3')"
              :list="chipArray.dozen_3"
              :win="winArray.includes('dozen_3')"
            ></chipView>
            <div class="text">
              <span class="points">{{ Lang[Type].third_dozen }}</span>
              <span class="small">25-36</span>
            </div>
          </div>
        </div>
        <div class="list">
          <!-- 小 -->
          <div class="item left-radius">
            <confirmBet
              @confirm="confirmChip"
              @cancel="cancelChip"
          @undo="undoChip"
              :data="{
                money: downChip.low,
                show: touch == 'low'
              }"
            ></confirmBet>
            <chipView
              @click="downBet($event, 'low')"
              :list="chipArray.low"
              :win="winArray.includes('low')"
            ></chipView>
            <div class="text">
              <span class="small">1-18</span>
              <span class="points">{{ Lang[Type].small }}</span>
            </div>
          </div>
          <!-- 双 -->
          <div class="item">
            <confirmBet
              @confirm="confirmChip"
              @cancel="cancelChip"
          @undo="undoChip"
              :data="{
                money: downChip.even,
                show: touch == 'even'
              }"
            ></confirmBet>
            <chipView
              @click="downBet($event, 'even')"
              :list="chipArray.even"
              :win="winArray.includes('even')"
            ></chipView>
            <div class="text">
              <span class="points">{{ Lang[Type].even }}</span>
            </div>
          </div>
          <!-- 红 -->
          <div class="item">
            <confirmBet
              @confirm="confirmChip"
              @cancel="cancelChip"
          @undo="undoChip"
              :data="{
                money: downChip.red,
                show: touch == 'red'
              }"
            ></confirmBet>
            <chipView
              @click="downBet($event, 'red')"
              :list="chipArray.red"
              :win="winArray.includes('red')"
            ></chipView>
            <div class="text">
              <span class="points">{{ Lang[Type].red }}</span>
            </div>
          </div>
          <!-- 黑 -->
          <div class="item">
            <confirmBet
              @confirm="confirmChip"
              @cancel="cancelChip"
          @undo="undoChip"
              :data="{
                money: downChip.black,
                show: touch == 'black'
              }"
            ></confirmBet>
            <chipView
              @click="downBet($event, 'black')"
              :list="chipArray.black"
              :win="winArray.includes('black')"
            ></chipView>
            <div class="text">
              <span class="points">{{ Lang[Type].black }}</span>
            </div>
          </div>
          <!-- 单 -->
          <div class="item">
            <confirmBet
              @confirm="confirmChip"
              @cancel="cancelChip"
          @undo="undoChip"
              :data="{
                money: downChip.odd,
                show: touch == 'odd'
              }"
            ></confirmBet>
            <chipView
              @click="downBet($event, 'odd')"
              :list="chipArray.odd"
              :win="winArray.includes('odd')"
            ></chipView>
            <div class="text">
              <span class="points">{{ Lang[Type].odd }}</span>
            </div>
          </div>
          <!-- 大 -->
          <div class="item right-radius">
            <confirmBet
              @confirm="confirmChip"
              @cancel="cancelChip"
          @undo="undoChip"
              :data="{
                money: downChip.high,
                show: touch == 'high'
              }"
            ></confirmBet>
            <chipView
              @click="downBet($event, 'high')"
              :list="chipArray.high"
              :win="winArray.includes('high')"
            ></chipView>
            <div class="text">
              <span class="points">{{ Lang[Type].big }}</span>
              <span class="small">19-36</span>
            </div>
          </div>
        </div>
      </div>
      <div class="right">
        <!-- 第三列 -->
        <div class="item">
          <confirmBet
            @confirm="confirmChip"
            @cancel="cancelChip"
          @undo="undoChip"
            :data="{
              money: downChip.column_3,
              show: touch == 'column_3'
            }"
          ></confirmBet>
          <chipView
            @click="downBet($event, 'column_3')"
            :list="chipArray.column_3"
            :win="winArray.includes('column_3')"
          ></chipView>
          <div class="text">
            <span class="points">{{ Lang[Type].third_column }}</span>
          </div>
        </div>
        <!-- 第二列 -->
        <div class="item">
          <confirmBet
            @confirm="confirmChip"
            @cancel="cancelChip"
          @undo="undoChip"
            :data="{
              money: downChip.column_2,
              show: touch == 'column_2'
            }"
          ></confirmBet>
          <chipView
            @click="downBet($event, 'column_2')"
            :list="chipArray.column_2"
            :win="winArray.includes('column_2')"
          ></chipView>
          <div class="text">
            <span class="points">{{ Lang[Type].second_column }}</span>
          </div>
        </div>
        <!-- 第一列 -->
        <div class="item">
          <confirmBet
            @confirm="confirmChip"
            @cancel="cancelChip"
          @undo="undoChip"
            :data="{
              money: downChip.column_1,
              show: touch == 'column_1'
            }"
          ></confirmBet>
          <chipView
            @click="downBet($event, 'column_1')"
            :list="chipArray.column_1"
            :win="winArray.includes('column_1')"
          ></chipView>
          <div class="text">
            <span class="points">{{ Lang[Type].first_column }}</span>
          </div>
        </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 { rouletteData } from "@/utils/common"
export default {
  name: "TableRoulette",
  components: { confirmBet, chipView },
  props: {
    touch: {
      type: String,
      default: ""
    },
    bet_amount_msg: {
      type: Object,
      default: () => ({
        ...rouletteData.amount
      })
    },
    winArray: {
      type: Array,
      default: () => []
    },
    downChip: {
      type: Object,
      default: () => ({
        ...rouletteData.amount
      })
    },
    chipArray: {
      type: Object,
      default: () => ({ ...rouletteData.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) => {
      // console.log(type)
      context.emit("downBet", e, type)
    }
    const confirmChip = () => {
      context.emit("confirmChip")
    }
    const cancelChip = () => {
      context.emit("cancelChip")
    }
    const undoChip = () => {
      context.emit("undoChip")
    }

    const testClick = () => {
      console.log("点击有效")
    }
    return { Type, Lang, downBet, confirmChip, cancelChip, undoChip, testClick }
  }
}
</script>
<style lang="scss" scoped>
.roulette {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  // 欧式
  .european {
    position: absolute;
    top: 1.8rem;
    left: 2.8rem;
    right: 3.8rem;
    bottom: 0.25rem;
    box-sizing: border-box;
    display: flex;
    transform: rotateX(0deg);
    .left {
      width: 7.14%;
      height: 60%;
      border: 1px solid #898a91;
      border-right: none;
      border-top-left-radius: 0.95rem;
      border-bottom-left-radius: 0.95rem;
      display: flex;
      .item {
        width: 100%;
        height: 100%;
        border-top-left-radius: 0.95rem;
        border-bottom-left-radius: 0.95rem;
        .chip-view {
          border-top-left-radius: 0.95rem;
          border-bottom-left-radius: 0.95rem;
        }
      }
    }
    .center {
      width: 85.72%;
      .list {
        width: 100%;
        height: 20%;
        display: flex;
        border-top: 1px solid #898a91;
        border-right: 1px solid #898a91;
        border-left: 1px solid #898a91;
        box-sizing: border-box;
        &:first-child {
          height: calc(20% + 1px);
        }
        &:last-child {
          border-bottom: 1px solid #898a91;
          border-bottom-left-radius: 0.95rem;
          border-bottom-right-radius: 0.95rem;
          .item {
            &:first-child .chip-view {
              border-bottom-left-radius: 0.95rem;
            }
            &:nth-child(3) {
              position: relative;
              &::after {
                content: "";
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                background: #f65857;
                clip-path: polygon(50% 15%, 80% 50%, 50% 85%, 20% 50%);
                pointer-events: none;
              }
            }
            &:nth-child(4) {
              position: relative;
              &::after {
                content: "";
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                background: #333;
                clip-path: polygon(50% 15%, 80% 50%, 50% 85%, 20% 50%);
                pointer-events: none;
              }
            }
            &:last-child .chip-view {
              border-bottom-right-radius: 0.95rem;
            }
          }
        }
        .item {
          flex: 1;
          border-left: 1px solid #898a91;
          &:first-child {
            border-left: none;
          }
        }
      }
    }
    .right {
      width: 7.14%;
      height: 60%;
      border: 1px solid #898a91;
      border-top-right-radius: 0.95rem;
      border-bottom-right-radius: 0.95rem;
      border-left: none;
      display: flex;
      flex-direction: column;
      .item {
        width: 100%;
        height: 33.33%;
        border-top: 1px solid #898a91;
        &:first-child {
          border: none;
          height: calc(33.33% + 1px);
          .chip-view {
            border-top-right-radius: 0.95rem;
          }
        }
        &:last-child {
          .chip-view {
            border-bottom-right-radius: 0.95rem;
          }
        }
        .text {
          font-size: 0.38rem;
          .points {
            writing-mode: vertical-lr;
          }
        }
      }
    }
  }
  .item {
    position: relative;
    &.red-bg {
      background: #f65857;
    }
    &.black-bg {
      background: #333333;
    }
    &.green-bg {
      background: #5cb645;
    }
    .left-radius {
    }
    .right-radius {
    }
    .text {
      .small {
        padding: 0 0.2rem;
        font-size: 0.45rem;
      }
    }
    &.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;
      font-size: 0.5rem;
      color: #eee;
    }
    .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);
      }
    }
  }
}
</style>
