<template>
  <div>
    <!-- 百家乐 -->
    <section class="poker-box baccarat" v-if="game_id == 1 && isPoker == true">
      <transition
        name="custom-classes-transition"
        enter-active-class="animate__animated animate__bounceInLeft"
        leave-active-class="animate__animated animate__bounceOutLeft"
      >
        <div class="list player" v-if="show" :class="{ win: playerIsWin }">
          <div class="item" ref="position_13">
            <span class="card" ref="pocker_13"></span>
          </div>
          <div class="item" ref="position_11">
            <span class="card" ref="pocker_11"></span>
          </div>
          <div class="item" ref="position_12">
            <span class="card" ref="pocker_12"></span>
          </div>
          <p class="font">
            {{ $lang[$Type].player }}
            <br />
            {{ playernum }}
          </p>
        </div>
      </transition>
      <transition
        name="custom-classes-transition"
        enter-active-class="animate__animated animate__bounceInRight"
        leave-active-class="animate__animated animate__bounceOutRight"
      >
        <div class="list banker" v-if="show" :class="{ win: bankerIsWin }">
          <p class="font">
            {{ $lang[$Type].banker }}
            <br />
            {{ bankernum }}
          </p>
          <div class="item" ref="position_21">
            <span class="card" ref="pocker_21"></span>
          </div>
          <div class="item" ref="position_22">
            <span class="card" ref="pocker_22"></span>
          </div>
          <div class="item" ref="position_23">
            <span class="card" ref="pocker_23"></span>
          </div>
        </div>
      </transition>
    </section>
    <!-- 龙虎 -->
    <section class="poker-box longhu" v-if="game_id == 2 && isPoker == true">
      <transition
        name="custom-classes-transition"
        enter-active-class="animate__animated animate__bounceInLeft"
        leave-active-class="animate__animated animate__bounceOutLeft"
      >
        <div class="list banker" v-if="show" :class="{ win: bankerIsWin }">
          <div class="item" ref="position_21">
            <span class="card" ref="pocker_21"></span>
          </div>
          <p class="font">
            {{ $lang[$Type].dragon }}
            <br />
            {{ bankernum }}
          </p>
        </div>
      </transition>
      <transition
        name="custom-classes-transition"
        enter-active-class="animate__animated animate__bounceInRight"
        leave-active-class="animate__animated animate__bounceOutRight"
      >
        <div class="list player" v-if="show" :class="{ win: playerIsWin }">
          <p class="font">
            {{ $lang[$Type].tiger }}
            <br />
            {{ playernum }}
          </p>
          <div class="item" ref="position_11">
            <span class="card" ref="pocker_11"></span>
          </div>
        </div>
      </transition>
    </section>
    <!-- 牛牛 -->
    <div class="nn_position" v-if="game_id == 4 && routeName == 'multiple'">
      <strong>{{ $lang[$Type].position }}</strong>
      <div class="item" ref="position_0">
        <span class="card" ref="pocker_0"></span>
      </div>
    </div>
    <div
      class="nn_position"
      name="custom-classes-transition"
      enter-active-class="animate__animated bounceInUp"
      leave-active-class="animate__animated bounceOutDown"
      v-if="game_id == 4 && routeName == 'play' && isPoker == true"
    >
      <strong>{{ $lang[$Type].position }}</strong>
      <div class="item" ref="position_0">
        <span class="card" ref="pocker_0"></span>
      </div>
    </div>
    <transition
      name="custom-classes-transition"
      enter-active-class="animate__animated animate__bounceInUp"
      leave-active-class="animate__animated animate__bounceOutDown"
    >
      <section
        class="poker-box nn pt_nn"
        v-if="game_id == 4 && isPoker == true"
      >
        <div
          class="list"
          :class="{
            win: win_player_1 == 0 && win_player_2 == 0 && win_player_3 == 0
          }"
        >
          <p class="title red">
            <template v-if="$Type == 'en'">&nbsp;</template>
            {{ $lang[$Type].banker }}
            <template v-if="$Type != 'en'">家</template>
            <template v-if="$Type == 'en'">&nbsp;</template>
          </p>
          <span class="role" v-show="role4">{{ role4 }}</span>
          <div class="item" ref="position_41">
            <span class="card" ref="pocker_41"></span>
          </div>
          <div class="item" ref="position_42">
            <span class="card" ref="pocker_42"></span>
          </div>
          <div class="item" ref="position_43">
            <span class="card" ref="pocker_43"></span>
          </div>
          <div class="item" ref="position_44">
            <span class="card" ref="pocker_44"></span>
          </div>
          <div class="item" ref="position_45">
            <span class="card" ref="pocker_45"></span>
          </div>
        </div>
        <div class="list" :class="{ win: win_player_1 == 1 }">
          <p class="title blue">
            {{ $lang[$Type].player1 }}
          </p>
          <span class="role" v-show="role1">{{ role1 }}</span>

          <div class="item" ref="position_11">
            <span class="card" ref="pocker_11"></span>
          </div>
          <div class="item" ref="position_12">
            <span class="card" ref="pocker_12"></span>
          </div>
          <div class="item" ref="position_13">
            <span class="card" ref="pocker_13"></span>
          </div>
          <div class="item" ref="position_14">
            <span class="card" ref="pocker_14"></span>
          </div>
          <div class="item" ref="position_15">
            <span class="card" ref="pocker_15"></span>
          </div>
        </div>
        <div class="list" :class="{ win: win_player_2 == 1 }">
          <p class="title blue">
            {{ $lang[$Type].player2 }}
          </p>
          <span class="role" v-show="role2">{{ role2 }}</span>
          <div class="item" ref="position_21">
            <span class="card" ref="pocker_21"></span>
          </div>
          <div class="item" ref="position_22">
            <span class="card" ref="pocker_22"></span>
          </div>
          <div class="item" ref="position_23">
            <span class="card" ref="pocker_23"></span>
          </div>
          <div class="item" ref="position_24">
            <span class="card" ref="pocker_24"></span>
          </div>
          <div class="item" ref="position_25">
            <span class="card" ref="pocker_25"></span>
          </div>
        </div>
        <div class="list" :class="{ win: win_player_3 == 1 }">
          <p class="title blue">
            {{ $lang[$Type].player3 }}
          </p>
          <span class="role" v-show="role3">{{ role3 }}</span>
          <div class="item" ref="position_31">
            <span class="card" ref="pocker_31"></span>
          </div>
          <div class="item" ref="position_32">
            <span class="card" ref="pocker_32"></span>
          </div>
          <div class="item" ref="position_33">
            <span class="card" ref="pocker_33"></span>
          </div>
          <div class="item" ref="position_34">
            <span class="card" ref="pocker_34"></span>
          </div>
          <div class="item" ref="position_35">
            <span class="card" ref="pocker_35"></span>
          </div>
        </div>
      </section>
    </transition>
    <!-- 三卡牛牛 -->
    <div class="nn_position" v-if="game_id == 5 && routeName == 'multiple'">
      <strong>{{ $lang[$Type].position }}</strong>
      <div class="item" ref="position_0">
        <span class="card" ref="pocker_0"></span>
      </div>
    </div>

    <transition
      name="custom-classes-transition"
      enter-active-class="animate__animated animate__bounceInUp"
      leave-active-class="animate__animated animate__bounceOutDown"
    >
      <section
        class="poker-box nn sanka tr_nn"
        v-if="game_id == 5 && isPoker == true"
      >
        <div
          class="nn_position"
          v-if="game_id == 5 && routeName == 'play' && isPoker == true"
        >
          <strong>{{ $lang[$Type].position }}</strong>
          <div class="item" ref="position_0">
            <span class="card" ref="pocker_0"></span>
          </div>
        </div>
        <div
          class="list"
          :class="{
            win: win_player_1 == 0 && win_player_2 == 0 && win_player_3 == 0
          }"
        >
          <p class="title red">
            <template v-if="$Type == 'en'">&nbsp;</template>
            {{ $lang[$Type].banker }}
            <template v-if="$Type != 'en'">家</template>
            <template v-if="$Type == 'en'">&nbsp;</template>
          </p>
          <span class="role" v-show="role4">{{ role4 }}</span>
          <div class="item" ref="position_41">
            <span class="card" ref="pocker_41"></span>
          </div>
          <div class="item" ref="position_42">
            <span class="card" ref="pocker_42"></span>
          </div>
          <div class="item" ref="position_43">
            <span class="card" ref="pocker_43"></span>
          </div>
        </div>
        <div class="list" :class="{ win: win_player_1 == 1 }">
          <p class="title blue">
            {{ $lang[$Type].player1 }}
          </p>
          <span class="role" v-show="role1">{{ role1 }}</span>
          <div class="item" ref="position_11">
            <span class="card" ref="pocker_11"></span>
          </div>
          <div class="item" ref="position_12">
            <span class="card" ref="pocker_12"></span>
          </div>
          <div class="item" ref="position_13">
            <span class="card" ref="pocker_13"></span>
          </div>
        </div>
        <div class="list" :class="{ win: win_player_2 == 1 }">
          <p class="title blue">
            {{ $lang[$Type].player2 }}
          </p>
          <span class="role" v-show="role2">
            {{ role2 }}
          </span>
          <div class="item" ref="position_21">
            <span class="card" ref="pocker_21"></span>
          </div>
          <div class="item" ref="position_22">
            <span class="card" ref="pocker_22"></span>
          </div>
          <div class="item" ref="position_23">
            <span class="card" ref="pocker_23"></span>
          </div>
        </div>
        <div class="list" :class="{ win: win_player_3 == 1 }">
          <p class="title blue">
            {{ $lang[$Type].player3 }}
          </p>
          <span class="role" v-show="role3">{{ role3 }}</span>
          <div class="item" ref="position_31">
            <span class="card" ref="pocker_31"></span>
          </div>
          <div class="item" ref="position_32">
            <span class="card" ref="pocker_32"></span>
          </div>
          <div class="item" ref="position_33">
            <span class="card" ref="pocker_33"></span>
          </div>
        </div>
      </section>
    </transition>
  </div>
</template>

<script>
import { mapState } from "vuex"
export default {
  name: "PokerView",
  data() {
    return {
      routeName: null,
      isfrist: true,
      show: false, //false
      game_id: "",
      isPoker: false, //false
      bankerIsWin: false,
      playerIsWin: false,
      win_player_1: null,
      win_player_2: null,
      win_player_3: null,
      bankernum: "",
      playernum: "",
      role4: "",
      role1: "",
      role2: "",
      role3: "",
      timeResult1: null,
      timeResult2: null
    }
  },
  created: function () {
    this.routeName = this.$route.name
  },
  methods: {
    showCard(data) {
      var game_id = this.game_id
      var card = data.card_info
      if (game_id == 1) {
        if (card.banker_1 != 0) {
          this.cardreform(21, card.banker_1)
        }
        if (card.banker_2 != 0) {
          this.cardreform(22, card.banker_2)
        }
        if (card.banker_3 != 0) {
          this.cardreform(23, card.banker_3)
        }
        if (card.player_1 != 0) {
          this.cardreform(11, card.player_1)
        }
        if (card.player_2 != 0) {
          this.cardreform(12, card.player_2)
        }
        if (card.player_3 != 0) {
          this.cardreform(13, card.player_3)
        }
      } else if (game_id == 2) {
        if (card.player_1 != 0) {
          this.cardreform(11, card.player_1)
        }
        if (card.banker_1 != 0) {
          this.cardreform(21, card.banker_1)
        }
      } else if (game_id == 4 || game_id == 5) {
        if (card.card_first != 0) {
          this.cardreform(0, card.card_first)
        }
        if (card.banker_card_1 != 0) {
          this.cardreform(41, card.banker_card_1)
        }
        if (card.banker_card_2 != 0) {
          this.cardreform(42, card.banker_card_2)
        }
        if (card.banker_card_3 != 0) {
          if (game_id == 5) {
            this.cardreform(
              43,
              card.banker_card_3,
              data.tc_result.banker_result
            )
          } else {
            this.cardreform(43, card.banker_card_3)
          }
        }
        if (card.banker_card_4 != 0 && game_id == 4) {
          this.cardreform(44, card.banker_card_4)
        }
        if (card.banker_card_5 != 0 && game_id == 4) {
          this.cardreform(45, card.banker_card_5, data.nn_result.banker_result)
        }

        if (card.player_1_card_1 != 0) {
          this.cardreform(11, card.player_1_card_1)
        }
        if (card.player_1_card_2 != 0) {
          this.cardreform(12, card.player_1_card_2)
        }
        if (card.player_1_card_3 != 0) {
          if (game_id == 5) {
            this.cardreform(
              13,
              card.player_1_card_3,
              data.tc_result.player_1_result
            )
          } else {
            this.cardreform(13, card.player_1_card_3)
          }
        }
        if (card.player_1_card_4 != 0 && game_id == 4) {
          this.cardreform(14, card.player_1_card_4)
        }
        if (card.player_1_card_5 != 0 && game_id == 4) {
          this.cardreform(
            15,
            card.player_1_card_5,
            data.nn_result.player_1_result
          )
        }

        if (card.player_2_card_1 != 0) {
          this.cardreform(21, card.player_2_card_1)
        }
        if (card.player_2_card_2 != 0) {
          this.cardreform(22, card.player_2_card_2)
        }
        if (card.player_2_card_3 != 0) {
          if (game_id == 5) {
            this.cardreform(
              23,
              card.player_2_card_3,
              data.tc_result.player_2_result
            )
          } else {
            this.cardreform(23, card.player_2_card_3)
          }
        }
        if (card.player_2_card_4 != 0 && game_id == 4) {
          this.cardreform(24, card.player_2_card_4)
        }
        if (card.player_2_card_5 != 0 && game_id == 4) {
          this.cardreform(
            25,
            card.player_2_card_5,
            data.nn_result.player_2_result
          )
        }

        if (card.player_3_card_1 != 0) {
          this.cardreform(31, card.player_3_card_1)
        }
        if (card.player_3_card_2 != 0) {
          this.cardreform(32, card.player_3_card_2)
        }
        if (card.player_3_card_3 != 0) {
          if (game_id == 5) {
            this.cardreform(
              33,
              card.player_3_card_3,
              data.tc_result.player_3_result
            )
          } else {
            this.cardreform(33, card.player_3_card_3)
          }
        }
        if (card.player_3_card_4 != 0 && game_id == 4) {
          this.cardreform(34, card.player_3_card_4)
        }
        if (card.player_3_card_5 != 0 && game_id == 4) {
          this.cardreform(
            35,
            card.player_3_card_5,
            data.nn_result.player_3_result
          )
        }
      }
    },
    cardreform(position, num, result) {
      this.card = {}
      this.card.status = true
      this.card.round = {}
      this.card.round.card = num
      if (this.game_id == 1 || this.game_id == 2) {
        this.card.round.position = position
      } else if (this.game_id == 4 || this.game_id == 5) {
        if (result != undefined) {
          this.card.round.result = result
          console.log(result)
        }
        this.card.round.order_num = position
      }
      this.Flop(this.card)
    },

    Flop(data) {
      let which, position, pokerindex
      if (data.status == true) {
        if (this.game_id == 1 || this.game_id == 2) {
          which = data.round.position.toString()
        } else if (this.game_id == 4) {
          which = data.round.order_num.toString()
          position = parseInt(which / 10)
          pokerindex = which % 10
          if (pokerindex == 5) {
            this["role" + position] = data.round.result
          }
        } else if (this.game_id == 5) {
          which = data.round.order_num.toString()
          position = parseInt(which / 10)
          pokerindex = which % 10
          if (pokerindex == 3) {
            this["role" + position] = data.round.result
          }
        }

        var pokercard = data.round.card
        var pokersrc = require("../assets/images/poker/" + pokercard + ".png")
        setTimeout(() => {
          var $position = this.$refs["position_" + which]
          var $poker = this.$refs["pocker_" + which]
          if (this.game_id == 1) {
            if (which == 13) {
              if (this.$refs.position_13) {
                this.$refs.position_13.style.display = "inline-block"
              }
            }
            if (which == 23) {
              if (this.$refs.position_23) {
                this.$refs.position_23.style.display = "inline-block"
              }
            }
          }
          if ($position) {
            $position.classList.add("active")
            $poker.style.backgroundImage = "url('" + pokersrc + "')"
          }
        }, 100)
      }
    },
    openResult(data) {
      // console.log("openResult", data)
      if (this.game_id == 1 || this.game_id == 2) {
        if (data.round.opening == 1) {
          this.bankerIsWin = true
        } else if (data.round.opening == 2) {
          this.playerIsWin = true
        }
        this.bankernum = data.round.banker
        this.playernum = data.round.player
      } else if (this.game_id == 4 || this.game_id == 5) {
        this.win_player_1 = data.round.win_player_1
        this.win_player_2 = data.round.win_player_2
        this.win_player_3 = data.round.win_player_3
      }

      var that = this
      this.timeResult1 = setTimeout(() => {
        that.show = false
        that.bankerIsWin = false
        that.playerIsWin = false
        that.win_player_1 = null
        that.win_player_2 = null
        that.win_player_3 = null
        that.bankernum = ""
        that.playernum = ""
        that.role4 = ""
        that.role1 = ""
        that.role2 = ""
        that.role3 = ""
        if (that.game_id == 4 || that.game_id == 5) {
          var firstfaces = require("../assets/images/poker/faces.png")
          if (that.$refs.pocker_0) {
            that.$refs.pocker_0.style.backgroundImage =
              "url(" + firstfaces + ")"
          }
        }
      }, 7000)
      this.timeResult2 = setTimeout(() => {
        that.isPoker = false
      }, 7500)
    },
    resetPock() {
      this.bankerIsWin = false
      this.playerIsWin = false
      this.win_player_1 = null
      this.win_player_2 = null
      this.win_player_3 = null
      this.bankernum = ""
      this.playernum = ""
      this.role4 = ""
      this.role1 = ""
      this.role2 = ""
      this.role3 = ""
      if (this.game_id == 4 || this.game_id == 5) {
        var firstfaces = require("../assets/images/poker/faces.png")
        if (this.$refs.pocker_0) {
          this.$refs.pocker_0.style.backgroundImage = "url(" + firstfaces + ")"
        }
      }
      this.show = false
      this.isPoker = false
    }
  },
  computed: {
    ...mapState({
      $Type: (state) => state.config.$Type,
      $lang: (state) => state.config.$lang,
      online: (state) => state.config.online
    })
  },
  watch: {
    $route: {
      handler() {
        clearTimeout(this.timeResult1)
        clearTimeout(this.timeResult2)
        this.timeResult1 = null
        this.timeResult2 = null
        this.bankerIsWin = false
        this.playerIsWin = false
      },
      deep: true,
      immediate: true
    },
    online: {
      handler(online) {
        if (online == true) {
          if (this.thisData.bet_status == 2) {
            var that = this
            setTimeout(() => {
              that.show = true
            }, 100)
            // 已翻牌
            this.$nextTick(() => {
              this.showCard(this.thisData)
            })
          } else {
            this.resetPock()
          }
        }
      },
      deep: true,
      immediate: true
    },
    thisData: {
      handler(newData) {
        if (newData && newData.game_id) {
          const that = this
          // 第一次赋值判断
          if (this.isfrist == true || newData.sendMode == "getState") {
            this.isfrist = false
            this.game_id = newData.game_id
            if (newData.bet_status == 2) {
              that.isPoker = true
              setTimeout(() => {
                that.show = true
              }, 100)
              // 已翻牌
              this.$nextTick(() => {
                this.showCard(newData)
              })
            } else if (newData.bet_status == 0) {
              this.isPoker = false
            }
            if (newData.sendMode == "startBetCountDown") {
              if (this.show == true) {
                this.resetPock()
              }
            }
          }
          // 翻牌 开结果
          if (newData.sendMode != "" && newData.sendMode != undefined) {
            if (newData.sendMode == "endBet") {
              const that = this
              that.isPoker = true
              setTimeout(() => {
                that.show = true
              }, 100)
            } else if (newData.sendMode == "sendScanResult") {
              this.Flop(newData)
            } else if (newData.sendMode == "openingBaccaratResult") {
              this.openResult(newData)
            } else if (newData.sendMode == "openingDtResult") {
              this.openResult(newData)
            } else if (newData.sendMode == "openingNnResult") {
              this.openResult(newData)
            } else if (newData.sendMode == "openingTcResult") {
              this.openResult(newData)
            } else if (newData.sendMode == "resetNumberTab") {
              this.bankerIsWin = false
              this.playerIsWin = false
              this.win_player_1 = null
              this.win_player_2 = null
              this.win_player_3 = null
              this.bankernum = ""
              this.playernum = ""
              this.role4 = ""
              this.role1 = ""
              this.role2 = ""
              this.role3 = ""
              if (this.game_id == 4 || this.game_id == 5) {
                var firstfaces = require("../assets/images/poker/faces.png")
                if (this.$refs.pocker_0) {
                  this.$refs.pocker_0.style.backgroundImage =
                    "url(" + firstfaces + ")"
                }
              }
              this.show = false
              this.isPoker = false
            } else if (
              newData.sendMode == "startBet" ||
              newData.sendMode == "startBetCountDown"
            ) {
              if (this.show == true) {
                this.resetPock()
              }
            }
          }
        }
      },
      deep: true,
      immediate: true
    }
  },
  props: {
    thisData: Object
  }
}
</script>

<style lang="scss" scoped>
.poker-box {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  display: flex;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10;
  align-items: center;
  transform: rotateX(0deg);
}

.poker-box .list {
  width: 50%;
  height: 100%;
  -webkit-background-size: 100% 100%;
  background-size: 100% 100%;
  align-items: center;
  flex: 1;
  text-align: center;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}
.baccarat .banker {
  background-image: url("~@/assets/images/card_banker_bg.png");
  margin-left: -0.6rem;
}
.baccarat .player {
  background-image: url("~@/assets/images/cards_player_bg.png");
  margin-right: -0.6rem;
}

.longhu .banker {
  background-image: url("~@/assets/images/card_long_bg.png");
  margin-right: -0.6rem;
}
.longhu .player {
  background-image: url("~@/assets/images/cards_hu_bg.png");
  margin-left: -0.6rem;
}

.poker-box .font {
  // display: inline-block;
  // vertical-align: middle;
  font-size: 0.8rem;
  font-weight: 600;
  text-align: center;
}
.baccarat .banker .font {
  padding-right: 0.2rem;
  color: #fff9f9;
}
.baccarat .player .font {
  padding-left: 0.2rem;
  color: #fff9f9;
}

.longhu .banker .font {
  padding-left: 0.2rem;
  color: #fff9f9;
}
.longhu .player .font {
  padding-right: 0.2rem;
  color: #fff9f9;
}

.poker-box .item {
  width: 1.45rem;
  height: 2rem;
  padding: 0 0.1rem;
  transform: rotateX(0deg);
}

.poker-box .item .card {
  display: block;
  width: 100%;
  height: 100%;
  background: url("~@/assets/images/poker/faces.png") no-repeat;
  -webkit-background-size: 100% 100%;
  background-size: 100% 100%;
  position: relative;
  z-index: 1;
}

.baccarat .player .item:first-child {
  transform: rotate(90deg);
  margin-right: 0.15rem;
  display: none;
}

.baccarat .banker .item:last-child {
  transform: rotate(90deg);
  margin-left: 0.15rem;
  display: none;
}

.poker-box .list .item.active span {
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-animation-name: flipIn_Y;
  animation-name: flipIn_Y;
  -webkit-animation-iteration-count: initial;
  animation-iteration-count: initial;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.poker-box .list.win span:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: rgba(255, 235, 59, 0.1);
  animation-timing-function: ease-in-out;
  animation-name: breathe;
  animation-duration: 500ms;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  z-index: -1;
}
.poker-box.nn {
  height: 3.1rem;
}
.poker-box.nn .list:first-child {
  border: none;
}
.poker-box.nn .list {
  border-left: 1px solid #565555;
  position: relative;
}
.poker-box.nn .list .title {
  font-size: 0.48rem;
  font-weight: bold;
  display: block;
  text-shadow: 0px 0px 0px #2d2d2d;
  padding-top: 0.1rem;
}

.nn_position {
  font-size: 0.28rem;
  font-weight: bold;
  height: 0.55rem;
}
.nn_position strong {
  padding-right: 0.4rem;
  color: #fff;
  transform: rotateX(1deg);
}

.nn_position .item {
  width: 0.55 * 1.7rem;
  height: 0.75 * 1.7rem;
  transform: rotate(90deg);
}
.nn_position .item .card {
  background: url("~@/assets/images/poker/faces.png") no-repeat;
  display: block;
  width: 100%;
  height: 100%;
  -webkit-background-size: 100% 100%;
  background-size: 100% 100%;
}

.nn_position .item.active span {
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-animation-name: flipIn_Y;
  animation-name: flipIn_Y;
  -webkit-animation-iteration-count: initial;
  animation-iteration-count: initial;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.blue {
  color: #00a8ff;
}
.red {
  color: #ff494b;
}
</style>
<style type="text/css">
.play .nn_position {
  z-index: 1000;
  font-size: 0.45rem;
  padding: 0 0.4rem;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -8.5rem;
  left: 0.5rem;
  transform: rotateX(0deg);
}

.play .poker-box.nn {
  width: 100%;
  height: 100%;
  white-space: nowrap;
}

.play .poker-box.nn.sanka {
  min-width: 4.5rem;
}
.play .poker-box.nn .list {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.play .poker-box.nn .list .title {
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.2rem;
}
.play .poker-box.nn .list .title span {
  display: block;
  font-size: 0.5rem;
}

.play .nn.poker-box .list .top,
.play .nn.poker-box .list .bottom {
  /* display: inline-block; */
  /* vertical-align: middle; */
  display: flex;
  align-items: center;
}

.multiple .nn.poker-box .list {
  height: 3.65rem;
  width: 25%;
}
.multiple .nn.poker-box .list .top,
.multiple .nn.poker-box .list .bottom {
  overflow: hidden;
  height: 1.2rem;
}
.multiple .nn.poker-box .list .item {
  vertical-align: top;
  margin-top: 0.1rem;
}
</style>
<style lang="scss" scoped>
.poker-box.pt_nn,
.poker-box.tr_nn {
  .list {
    position: relative;
    height: 100%;
    padding-left: 0.3rem;
    border: none;
    .title {
      position: absolute;
      top: -0.4rem;
      font-size: 0.4rem;
      padding: 0.03rem 0.2rem;
      border-radius: 0.05rem;
      &.blue {
        background: #00a8ff;
        color: #fff;
      }
      &.red {
        background: #ff494b;
        color: #fff;
      }
    }
    .role {
      position: absolute;
      width: 85%;
      left: 50%;
      top: 50%;
      z-index: 10;
      font-size: 0.6rem;
      color: #fff;
      padding: 0.1rem 0;
      margin-left: -2.35rem;
      margin-top: -0.2rem;
      background: -webkit-linear-gradient(
        left,
        rgba(38, 38, 38, 0.1) 0%,
        rgba(38, 38, 38, 0.35) 22%,
        rgba(38, 38, 38, 0.6) 43%,
        rgba(38, 38, 38, 0.6) 62%,
        rgba(38, 38, 38, 0.35) 80%,
        rgba(38, 38, 38, 0.1) 100%
      );
    }
    .item {
      width: 0.75 * 1.6rem;
      height: 1 * 1.6rem;
      margin-left: -0.45rem;
      margin-top: 0.55rem;
      &:nth-of-type(1) {
        z-index: 1;
      }
      &:nth-of-type(2) {
        z-index: 2;
      }
      &:nth-of-type(3) {
        z-index: 3;
      }
      &:nth-of-type(4) {
        z-index: 4;
      }
      &:nth-of-type(5) {
        z-index: 5;
      }
    }
  }
}
.poker-box.tr_nn .list .role {
  width: 52%;
  margin-left: -1.7rem;
  transform: rotateX(0deg);
}
.poker-box.pt_nn .list .role {
  transform: rotateX(0deg);
}

</style>
