<template>
  <div
    class="play"
    :class="[
      { offcamera: !switchVideo },
      { no_bg: tableData && (tableData.game_id == 7 || tableData.game_id == 8) }
    ]"
  >
    <!-- Top Navigation Bar -->
    <!-- Main View Container: Vertical Flex Stack -->
    <div class="view">
      
      <!-- 1. Video & Game Area (Top Section, Flex Grow to fill space) -->
      <div class="video-container" ref="videoDom" @click.stop="closeSwitchView(false)">


        <!-- Video Iframe -->
        <iframe
          v-if="switchVideo && tableData"
          class="iframe"
          :class="[
            {
              scale:
                videoConfig.zoom &&
                tableData.sendMode &&
                (tableData.sendMode == 'endBet' ||
                  tableData.sendMode == 'sendScanResult')
            }
          ]"
          :src="videoUrl"
        ></iframe>



        <!-- Overlays inside Top Section -->

        
        <SwitchTableButton v-if="!switchtabshow" @click="showSwitchtab(true)" />

        <!-- Status/Countdown Overlay (Moved to absolute end for visibility) -->
        <div class="status-overlay" v-if="tableData">
             <!-- Dealing Status -->
             <div class="status-circle dealing" v-if="['endBet', 'sendScanResult', 'openingBaccaratResult', 'openingDtResult', 'openingNnResult', 'openingTcResult', 'openingToningResult', 'openingDiceResult', 'openingRouletteResult'].includes(tableData.sendMode)">
                 <span>发牌中</span>
             </div>
             <!-- Countdown -->
             <div class="status-circle countdown" v-else-if="tableData.sendMode === 'startBetCountDown' || tableData.sendMode === 'toBet'">
                 <span>{{ circle.num }}</span>
             </div>
             <!-- Wait/Shuffle/Other -->
             <div class="status-circle wait" v-else-if="!tableData.sendMode || tableData.sendMode === 'changeBoot'">
                  <span style="font-size: 12px;">洗牌中</span>
             </div>
        </div>



        <!-- Back Button (Top Left) -->
        <div class="video-btn-back" @click="handleBack"></div>

      </div>

      <!-- Top Navigation Bar (Moved below video) -->
      <div class="nav">
        <!-- 1. User Info -->
        <div class="nav-item user-info">
          <div class="icon user-icon"></div>
          <div class="text">{{ userInfo.username }}</div>
        </div>
        
        <!-- 2. Balance -->
        <div class="nav-item balance-info">
          <div class="icon money-icon"></div>
          <div class="text">{{ userInfo.money }}</div>
        </div>

        <!-- 3. Table Limit -->
        <div class="nav-item limit-info">
          <div class="icon limit-icon"></div>
          <div class="text">{{ tableData && tableData.limit_money }}</div> 
        </div>

        <!-- 4. Right Controls (Camera, etc.) -->
        <div class="nav-item right-controls">
             <!-- Camera moved to video overlay -->
            <!-- <div class="btn muise" @click="toggleAplayer"></div> -->
            <div class="btn menu" @click="showMenu"></div>
        </div>
      </div>

      <!-- Game Betting Area (Moved below Nav) -->
      <div class="game-area-block" :class="{ 'nn-mode': tableData && (tableData.game_id == 4 || tableData.game_id == 5) }">
          <div class="game-area-content">
              <template
                v-if="tableData && (tableData.game_id == 7 || tableData.game_id == 8)"
              >
                <Transition
                  name="custom-classes"
                  enter-active-class="animate__animated animate__faster animate__fadeInRight"
                  leave-active-class="animate__animated animate__faster animate__fadeOutRight"
                >
                  <PlayTable
                    v-if="hideVideo"
                    class="dice-table"
                    ref="chipTable"
                    :game_id="tableData?.game_id"
                    :sendMode="tableData?.sendMode"
                    :table_id="tableData?.id"
                    :number_tab_id="tableData?.number_tab_id"
                    :is_scavenging="tableData?.is_scavenging"
                    :winArray="winArray"
                    :bet_amount_msg="tableData?.bet_amount_msg"
                    :can_bet_big_small="tableData?.can_bet_big_small"
                    :can_bet_luck_six="tableData?.can_bet_luck_six"
                    :limit_money="tableData?.limit_money"
                    :limit_money_pair="tableData?.limit_money_pair"
                    :limit_money_tie="tableData?.limit_money_tie"
                    :tableData="tableData"
                  ></PlayTable>
                </Transition>
              </template>
              <template v-else>
                <PlayTable
                  ref="chipTable"
                  :game_id="tableData?.game_id"
                  :sendMode="tableData?.sendMode"
                  :table_id="tableData?.id"
                  :number_tab_id="tableData?.number_tab_id"
                  :is_scavenging="tableData?.is_scavenging"
                  :winArray="winArray"
                  :bet_amount_msg="tableData?.bet_amount_msg"
                  :can_bet_big_small="tableData?.can_bet_big_small"
                  :can_bet_luck_six="tableData?.can_bet_luck_six"
                  :limit_money="tableData?.limit_money"
                  :limit_money_pair="tableData?.limit_money_pair"
                  :limit_money_tie="tableData?.limit_money_tie"
                  :tableData="tableData"
                  :class="[
                    {
                      hideTable:
                        tableData &&
                        (tableData.sendMode == 'sendScanResult' ||
                          tableData.sendMode == 'endBet') &&
                        (tableData.game_id == 4 || tableData.game_id == 5)
                    }
                  ]"
                ></PlayTable>
              </template>
              <RushVillage
                v-if="tableData && tableData.is_rob == 1"
                :thisData="tableData"
              ></RushVillage>
          </div>
      </div>

      <!-- 2. Chip Control Bar (Middle Section, Fixed Height) -->
      <PlayChip class="bet-chip-bar"></PlayChip>

      <!-- 3. Poker Cards for NN/TC (Separate section above roadmap) -->
      <div
        class="poker-section"
        v-if="tableData && (tableData.game_id == 4 || tableData.game_id == 5) && tableData.is_scavenging == 1"
      >
        <Poker
          class="pokerView nn-compact"
          :thisData="tableData"
        ></Poker>
      </div>

      <!-- 4. Roadmap (Bottom Section, Fixed Height or Flex Basis) -->
      <div class="roadmap-container" :class="{ 'nn-mode': tableData && (tableData.game_id == 4 || tableData.game_id == 5) }" @click.stop="closeSwitchView(false)">
        <PlayWay :tableData="tableData"></PlayWay>
        <!-- Poker for Baccarat/Dragon Tiger (overlay style) -->
        <Poker
          class="pokerView"
          :thisData="tableData"
          v-if="tableData && tableData.is_scavenging == 1 && tableData.game_id != 4 && tableData.game_id != 5"
        ></Poker>
        <ToningResult
          v-if="showToningResult"
          :result="tableData.round && tableData.round.result"
          :sendMode="tableData.sendMode"
        ></ToningResult>
        <DiceResult
          v-if="showDiceResult"
          :result="tableData.round && tableData.round.result"
          :sendMode="tableData.sendMode"
        ></DiceResult>
        <RouletteResult
          v-if="showRouletteResult"
          :resultInfo="tableData.round"
          :sendMode="tableData.sendMode"
        ></RouletteResult>
      </div>

    </div>

    <!-- Moved Switch Views to Root View Level for Full Height Overlay -->
    <van-popup
      v-model:show="switchtabshow"
      position="bottom"
      :style="{ height: '100%' }"
      :overlay="true"
      :close-on-click-overlay="false"
      @click.stop
    >
      <SwitchTab
        @showSwitchtab="showSwitchtab"
        :tabInfo="{
          game_id: tableData && tableData.game_id,
          table_id: tableData && tableData.id
        }"
      ></SwitchTab>
    </van-popup>
    <div
      class="switchView camera animate__fadeIn animated0"
      v-if="switchCameraShow"
    >
      <setCamera @showSwitchCamera="showSwitchCamera"></setCamera>
    </div>


    <!-- Popups -->
    <PlayTypePop class="play-type-pop"></PlayTypePop>
    <TableInfoPop class="table-info-pop" :tableData="tableData"></TableInfoPop>
    <OnLinePop class="online-pop"></OnLinePop>
  </div>
</template>

<script>
import { ref, computed, watch, nextTick, onUnmounted } from "vue"
import { useRouter, useRoute } from "vue-router"
import { useStore } from "vuex"
import { showToast, showDialog, closeDialog, closeToast } from "vant"
import PlayTable from "@/components/PlayTable/Index.vue"
import PlayWay from "@/components/PlayWay.vue"
import PlayChip from "@/components/PlayChip.vue"
import Poker from "@/components/Poker"
import RushVillage from "@/components/RushVillage"
import ToningResult from "@/components/ToningResult"
import DiceResult from "@/components/DiceResult"
import RouletteResult from "@/components/RouletteResult"
import SwitchTab from "@/components/SwitchTab2"
import SwitchTableButton from "@/components/SwitchTableButton"
import setCamera from "@/components/setCamera"
import PlayTypePop from "@/components/PlayTypePop"
import TableInfoPop from "@/components/TableInfoPop"
import OnLinePop from "@/components/OnLinePop"
import { audioMp3 } from "@/assets/js/sound.js"
import {
  getUserBetBaccarat,
  getUserBetDt,
  getUserBetNn,
  getUserBetTc,
  getUserBetToning,
  getUserBetDice,
  getUserBetRoulette
} from "@/utils/api"

export default {
  name: "playView",
  components: {
    PlayTable,
    PlayWay,
    PlayChip,
    Poker,
    SwitchTab,
    SwitchTableButton,
    setCamera,
    PlayTypePop,
    TableInfoPop,
    OnLinePop,
    RushVillage,
    ToningResult,
    DiceResult,
    RouletteResult
  },
  setup() {
    const audio = ref(null)
    const videoDom = ref(null)
    const foxVideo = ref({ w: 0, h: 0, mt: 0, ml: 0 })
    const hideVideo = ref(true)
    const table_id = ref(null)
    const chipTable = ref(null)
    const currentRate = ref(0)
    const switchtabshow = ref(false)
    const isSwitchtab = ref(false)
    const switchCameraShow = ref(false)
    const isSwitchCamera = ref(false)
    const showToningResult = ref(false)
    const showDiceResult = ref(false)
    const showRouletteResult = ref(false)
    const winArray = ref([])
    const router = useRouter()
    const route = useRoute()
    const store = useStore()
    const baccaratType = computed(() => store.state.config.baccaratType)
    const rouletteType = computed(() => store.state.config.roulette_type)
    const rouletteLockTable = computed(
      () => store.state.config.rouletteLockTable
    )
    const tableData = computed(() => store.getters.getTableById(table_id.value))
    const circle = computed(() => {
      const data = { num: 0, rate: 0 }
      if (tableData.value) {
        const { count_down, wait_time, sendMode } = tableData.value
        if (!sendMode) {
          data.num = wait_time
          data.rate = (data.num / wait_time) * 100
        } else {
          data.num = count_down || 0
          data.rate = (data.num / wait_time) * 100
        }
      }
      return data
    })
    const Type = computed(() => store.state.config.$Type)
    const Lang = computed(() => store.state.config.$lang)
    const routerStack = computed(() => store.state.app.routerStack)
    const phoneModel = computed(() => store.state.config.phoneModel)
    const phoneScreen = computed(() => store.state.config.phoneScreen)
    const switchVideo = computed(() => store.state.config.switchVideo)
    const videoConfig = computed(() => store.state.config.video)
    const videoUrl = computed(() => {
      let src = "",
        media_url = ""
      if (tableData.value && videoConfig.value) {
        // line决定使用近景(near)还是远景(far)，definition决定使用flv还是ws
        if (videoConfig.value.line == 1) {
          // 使用近景
          if (videoConfig.value.definition == 1) {
            media_url = tableData.value.media_near_flv
          } else {
            media_url = tableData.value.media_near_ws
          }
        } else {
          // 使用远景
          if (videoConfig.value.definition == 1) {
            media_url = tableData.value.media_far_flv
          } else {
            media_url = tableData.value.media_far_ws
          }
        }
        src = `${videoConfig.value.player}?url=${media_url}`
      } else {
        src = `static/video.html?url=${media_url}`
      }
      // const src = `static/video.html?url=https://al2-flv.live.huajiao.com/live_huajiao_h265/_LC_AL2_non_h265_SD_26820950716932293510114149_OX.flv`
      return src
    })
    const closeSwitchView = () => {
      showSwitchtab(false)
      showSwitchCamera(false)
    }

    // 处理返回按钮
    const handleBack = () => {
      // 检查是否从 Portal 跳转过来
      const urlParams = new URLSearchParams(window.location.search)
      const from = urlParams.get('from')
      const returnUrl = urlParams.get('returnUrl')
      const language = urlParams.get('language')

      if (from === 'portal' && returnUrl) {
        // 返回到 Portal，保留语言设置
        let finalUrl = decodeURIComponent(returnUrl)
        if (language) {
          // 如果 URL 中已有参数，用 & 连接，否则用 ?
          const separator = finalUrl.includes('?') ? '&' : '?'
          finalUrl = `${finalUrl}${separator}language=${language}`
        }
        window.location.href = finalUrl
      } else {
        // 返回到游戏大厅
        router.replace({ name: routerStack.value })
      }
    }

    // 显示快捷换台列表
    const showSwitchtab = (type) => {
      store.commit("app/standbyTime")
      if (type == false) {
        switchtabshow.value = false
      } else {
        switchtabshow.value = true
      }
    }
    // 切换视频线路
    const showSwitchCamera = (type) => {
      store.commit("app/standbyTime")
      // isSwitchCamera.value = type
      if (type == false) {
        switchCameraShow.value = false
      } else {
        switchCameraShow.value = true
      }
    }

    const userInfo = computed(() => store.state.app.userInfo)
    // 视频开关
    const offCamera = () => {
      store.commit("config/switchVideo", !switchVideo.value)
    }
    // 显示音乐播放器
    const toggleAplayer = () => {
      store.commit("config/showAplayer")
    }

    // 显示隐藏视频
    const toggleVide = () => {
      hideVideo.value = !hideVideo.value
    }

    // 获取单台数据
    let getSingletableTimer = null,
      getSingletableNun = 0
    const getSingletable = (id) => {
      getSingletableNun++
      clearTimeout(getSingletableTimer)
      if (tableData.value && tableData.value.id) {
        store.dispatch("socket/updateSingletable", {
          type: "update",
          table_id: id
        })
        let num = Math.floor(Math.random() * 6) + 1
        if (num == 4) {
          num = 1
        }
        let name = ""
        switch (tableData.value.game_id) {
          case 1:
            name = "baccarat"
            break
          case 2:
            name = "lh"
            break
          case 3:
            break
          case 4:
            name = "nn"
            break
          case 5:
            name = "tc"
            break
          case 6:
            name = "toning"
            break
          case 7:
            name = "dice"
            break
          case 8:
            name = "lp"
            break
        }
        audioMp3([`${name}_w_p${num}`]).Play()
      } else {
        if (getSingletableNun < 10) {
          getSingletableTimer = setTimeout(() => {
            getSingletable(id)
          }, 1000)
        }
      }
    }
    const clearChip = (state) => {
      nextTick(() => {
        chipTable.value.resetChip(state)
      })
    }
    const cancelChip = () => {
      nextTick(() => {
        chipTable.value.cancelChip()
      })
    }
    // 显示菜单
    const showMenu = () => {
      store.commit("config/showMenu", true)
    }
    // 显示免佣设置
    const showSetFree = () => {
      store.commit("config/showSetFree")
    }
    // 显示玩法
    const showBaccaratPlayType = () => {
      store.commit("config/showBaccaratPlayType")
    }
    // 显示桌台信息
    const showTableInfo = () => {
      store.commit("config/showTableInfo", true)
    }
    // 显示在线人数
    const showOnLine = () => {
      store.commit("config/showOnLine")
    }
    // 切换轮盘 玩法
    const switchRouletteType = () => {
      if (rouletteLockTable.value) {
        showToast("已下注")
      } else {
        store.commit("config/switchRouletteType")
      }
    }

    // 百家乐结果
    const baccaratResult = (data) => {
      store.dispatch("socket/getGoodTabData")
      getwinResult(1)
      let mp3list = [],
        win = [],
        text = ""
      mp3list.push(
        "baccarat_banker",
        `${data.round.banker}_point`,
        "baccarat_player",
        `${data.round.player}_point`
      )
      if (data.round.opening == 1) {
        text = Lang.value[Type.value].msg_banker_win
        win.push("banker")
        mp3list.push("baccarat_b_win")
      } else if (data.round.opening == 2) {
        text = Lang.value[Type.value].msg_player_win
        win.push("player")
        mp3list.push("baccarat_p_win")
      } else if (data.round.opening == 3) {
        text = Lang.value[Type.value].msg_tie_win
        win.push("tie")
        mp3list.push("baccarat_tie")
      }
      // 大小
      if (data.can_bet_big_small == 1) {
        if (data.round.big_small == 1) {
          text = text + "、" + Lang.value[Type.value].big
          win.push("big")
        } else if (data.round.big_small == 2) {
          text = text + "、" + Lang.value[Type.value].small
          win.push("small")
        }
      }

      // 幸运6
      if (data.can_bet_luck_six == 1) {
        if (data.round.luck_six == 2) {
          text = text + "、" + Lang.value[Type.value].luckSix + "X2"
          win.push("luck_six")
        } else if (data.round.luck_six == 3) {
          text = text + "、" + Lang.value[Type.value].luckSix + "X3"
          win.push("luck_six")
        }
      }
      // 对子
      if (data.round.pair == 1) {
        text = text + "、" + Lang.value[Type.value].msg_banker_pair
        win.push("banker_pair")
        mp3list.push("baccarat_b_pair")
      } else if (data.round.pair == 2) {
        text = text + "、" + Lang.value[Type.value].msg_player_pair
        win.push("player_pair")
        mp3list.push("baccarat_p_pair")
      } else if (data.round.pair == 3) {
        text =
          text +
          "、" +
          Lang.value[Type.value].msg_banker_pair +
          "、" +
          Lang.value[Type.value].msg_player_pair
        win.push("banker_pair", "player_pair")
        mp3list.push("baccarat_b_pair", "baccarat_p_pair")
      }
      showToast(text)
      winArray.value = win
      audioMp3(mp3list).Play()
      setTimeout(() => {
        winArray.value = []
        clearChip()
      }, 7000)
    }
    // 龙虎结果
    const longhuResult = (data) => {
      getwinResult(2)
      let mp3list = [],
        win = [],
        text = ""
      mp3list.push(
        "lh_dragon",
        `${data.round.banker}_point`,
        "lh_tiger",
        `${data.round.player}_point`
      )
      if (data.round.opening == 1) {
        text = Lang.value[Type.value].msg_dragon_win
        win.push("banker")
        mp3list.push("lh_dragon_win")
      } else if (data.round.opening == 2) {
        text = Lang.value[Type.value].msg_tiger_win
        win.push("player")
        mp3list.push("lh_tiger_win")
      } else if (data.round.opening == 3) {
        text = Lang.value[Type.value].msg_tie_win
        win.push("tie")
        mp3list.push("lh_tie")
      }
      audioMp3(mp3list).Play()
      showToast(text)
      winArray.value = win
      setTimeout(() => {
        winArray.value = []
        clearChip()
      }, 7000)
    }

    // 牛牛
    const nnResult = (data) => {
      if (data.game_id == 4) {
        getwinResult(4)
      } else {
        getwinResult(5)
      }
      let mp3list = [],
        win = [],
        text = ""
      if (
        data.round.win_player_1 == 0 &&
        data.round.win_player_2 == 0 &&
        data.round.win_player_3 == 0
      ) {
        text = Lang.value[Type.value].msg_banker_win
        mp3list.push("nn_banker")
        win.push("player_1_banker", "player_2_banker", "player_3_banker")
        win
      } else {
        if (data.round.win_player_1 == 1) {
          text = text + Lang.value[Type.value].player1
          mp3list.push("nn_player_1")
          win.push("player_1")
        } else {
          win.push("player_1_banker")
        }
        if (data.round.win_player_2 == 1) {
          text = text + Lang.value[Type.value].player2
          mp3list.push("nn_player_2")
          win.push("player_2")
        } else {
          win.push("player_2_banker")
        }
        if (data.round.win_player_3 == 1) {
          text = text + Lang.value[Type.value].player3
          mp3list.push("nn_player_3")
          win.push("player_3")
        } else {
          win.push("player_3_banker")
        }
      }
      audioMp3(mp3list).Play()
      showToast(text)
      winArray.value = win
      setTimeout(() => {
        winArray.value = []
        clearChip()
      }, 5000)
    }
    // 色碟
    const toningResult = (data) => {
      const language = Lang.value[Type.value]
      getwinResult(6)
      showToningResult.value = true
      let mp3list = [],
        win = [],
        text = ""
      switch (data.round.result) {
        case 0:
          win.push("toning_zero", "toning_plural", "toning_small")
          mp3list.push("toning_4_white", "toning_even", "toning_small")
          // text = "四白，双，小"
          text = `${language.four} ${language.white}，${language.even}，${language.small}`
          break
        case 1:
          win.push("toning_one", "toning_singular", "toning_small")
          mp3list.push("toning_3_w_1_r", "toning_odd", "toning_small")
          // text = "三白一红，单，小"
          text = `${language.three} ${language.white} ${language.one} ${language.red}，${language.odd}，${language.small}`
          break
        case 2:
          win.push("toning_plural")
          mp3list.push("toning_2_w_2_r", "toning_even")
          // text = "二红二白，双"
          text = `${language.two} ${language.red}  ${language.two} ${language.white}，${language.even}`
          break
        case 3:
          win.push("toning_three", "toning_singular", "toning_big")
          mp3list.push("toning_1_w_3_r", "toning_odd", "toning_big")
          // text = "三红一白，单，大"
          text = `${language.three} ${language.red}  ${language.one} ${language.white}，${language.odd}，${language.big}`
          break
        case 4:
          win.push("toning_four", "toning_plural", "toning_big")
          mp3list.push("toning_4_red", "toning_even", "toning_big")
          // text = "四红，双，大"
          text = `${language.four} ${language.red}，${language.odd}，${language.big}`
          break
      }
      audioMp3(mp3list).Play()
      showToast(text)
      winArray.value = win
      setTimeout(() => {
        winArray.value = []
        showToningResult.value = false
        clearChip()
      }, 5000)
    }
    // 骰宝
    const diceResult = (data) => {
      showDiceResult.value = true
      getwinResult(7)
      let mp3list = [],
        text = ""
      const result = data.round.result
      const first = parseInt(result[0])
      const second = parseInt(result[1])
      const third = parseInt(result[2])
      mp3list.push(
        `dice_num_${first}`,
        `dice_num_${second}`,
        `dice_num_${third}`
      )
      if (first == second && second == third) {
        text = "豹子,"
        mp3list.push("dice_any_triple")
      }
      const totle = first + second + third
      text = `${text}${totle}点`
      mp3list.push(`${totle}_point`)

      audioMp3(mp3list).Play()
      showToast(text)
      winArray.value = data.round.result_parse
      setTimeout(() => {
        winArray.value = []
        showDiceResult.value = false
        clearChip()
      }, 5000)
    }
    // 轮盘
    const rouletteResult = (data) => {
      showRouletteResult.value = true
      getwinResult(7)
      let mp3list = [],
        text = ""
      const result = data.round.result
      text = result
      mp3list.push(`${result}_point`)
      // console.log(result, mp3list)
      showToast(text)
      winArray.value = data.round.result_parse
      setTimeout(() => {
        winArray.value = []
        showRouletteResult.value = false
        clearChip()
      }, 3000)
    }
    const getwinResult = (game) => {
      let Api = ""
      if (game == 1) {
        Api = getUserBetBaccarat
      } else if (game == 2) {
        Api = getUserBetDt
      } else if (game == 4) {
        Api = getUserBetNn
      } else if (game == 5) {
        Api = getUserBetTc
      } else if (game == 6) {
        Api = getUserBetToning
      } else if (game == 7) {
        Api = getUserBetDice
      } else if (game == 8) {
        Api = getUserBetRoulette
      }
      const params = {
        user_id: userInfo.value.id,
        api_token: userInfo.value.api_token,
        number_tab_id: tableData.value?.previous_number_tab_id,
        table_id: tableData.value.id
      }
      Api(params)
        .then((response) => {
          setTimeout(() => {
            if (response.Success == 1) {
              const data = response.Data
              // console.log("输赢金额", data)
              if (
                game == 4 ||
                game == 5 ||
                game == 6 ||
                game == 7 ||
                game == 8
              ) {
                showDialog({
                  allowHtml: true,
                  title: Lang.value[Type.value].msg_win_lose,
                  message:
                    '<div class="item title"><span>' +
                    Lang.value[Type.value].msg_bet_total +
                    "</span><span>" +
                    Lang.value[Type.value].msg_win_lose +
                    "</span><span>" +
                    Lang.value[Type.value].msg_balance +
                    "</span></div>" +
                    '<div class="item"><span>' +
                    data.amount +
                    "</span><span>" +
                    returnFloat(data.win_total) +
                    "</span><span>" +
                    data.end_money +
                    "</span></div>",
                  className: "alert",
                  confirmButtonText: Lang.value[Type.value].Confirm
                })
              } else {
                popResult(data)
              }
            } else {
              // console.log(response)
            }
            tableData.value.sendMode = ""
          }, 3500)
        })
        .catch((error) => {
          console.log(error)
        })
    }
    const popResult = (data) => {
      let html = ""
      let text = ""
      data.returnData.forEach((v) => {
        if (v.amount > 0) {
          if (v.win_amount > 0) {
            text = Lang.value[Type.value].win
          } else if (v.win_amount < 0) {
            text = Lang.value[Type.value].lose
          } else {
            text = Lang.value[Type.value].tie
          }
          html =
            html +
            '<div class="item"><span>' +
            v.name +
            "</span><span>" +
            v.amount +
            "</span><span>" +
            text +
            "</span><span>" +
            v.win_amount +
            "</span></div>"
        }
      })

      html =
        '<div class="item title"><span>' +
        Lang.value[Type.value].bet_type +
        "</span><span>" +
        Lang.value[Type.value].bet_amount +
        "</span><span>" +
        Lang.value[Type.value].note_result +
        "</span><span>" +
        Lang.value[Type.value].note_win_lose +
        "</span></div>" +
        html
      showDialog({
        allowHtml: true,
        title:
          Lang.value[Type.value].msg_win_lose +
          "：" +
          returnFloat(data.win_total),
        message: html,
        className: "alert",
        confirmButtonText: Lang.value[Type.value].Confirm
      })
    }
    const returnFloat = (num) => {
      let value = Math.round(parseFloat(num) * 100) / 100
      let xsd = value.toString().split(".")
      if (xsd.length == 1) {
        value = value.toString() + ".00"
        return value
      }
      if (xsd.length > 1) {
        if (xsd[1].length < 2) {
          value = value.toString() + "0"
        }
        return value
      }
    }
    const foxVideoFn = () => {
      nextTick(() => {
        if (!videoDom.value) return;
        const containerH = videoDom.value.clientHeight;
        const containerW = videoDom.value.clientWidth;
        
        // Default to 16:9 if missing
        const proportion = videoConfig.value.proportion || [16, 9];
        const videoRatio = proportion[0] / proportion[1];
        const screenRatio = containerW / containerH; // Inverse for calculation check
        
        let w, h, ml = 0, mt = 0;

        if (screenRatio > videoRatio) {
          // Screen is wider than video (or video is taller than screen) -> Height constrained
          // e.g. Landscape or wide container
          h = containerH;
          w = h * videoRatio;
          ml = (containerW - w) / 2;
        } else {
           // Screen is narrower than video (Standard Mobile Portrait) -> Width constrained
           w = containerW;
           h = w / videoRatio;
           mt = (containerH - h) / 2;
        }

        // Apply specific offsets if needed, though usually centering is best for 'contain'
        if (phoneModel.value == "ios") {
           if (phoneScreen.value == "landscape") {
             mt += videoConfig.value.offset.iosLandscape || 0;
           } else {
             mt += videoConfig.value.offset.iosPortrait || 0;
           }
        } else if (phoneModel.value == "android") {
           mt += videoConfig.value.offset.android || 0;
        } else {
           mt += videoConfig.value.offset.pc || 0;
        }
        
        // Ensure values are safe
        if (isNaN(w)) w = containerW;
        if (isNaN(h)) h = containerW * 0.56; // Fallback 16:9

        foxVideo.value.w = `${w}px`
        foxVideo.value.h = `${h}px`
        foxVideo.value.mt = `${mt}px`
        foxVideo.value.ml = `${ml}px`
        foxVideo.value.model = phoneModel.value
        foxVideo.value.screen = phoneScreen.value
      })
    }
    // 牛牛点数声音
    const playNNsound = (data) => {
      const position = parseInt(data.round.order_num)
      if (data.game_id == 4) {
        if ([15, 25, 35, 45].includes(position)) {
          soundType(data.round.result)
        } else {
          audioMp3(["show_card"]).Play()
        }
      } else if (data.game_id == 5) {
        if ([13, 23, 33, 43].includes(position)) {
          soundType(data.round.result)
        } else {
          audioMp3(["show_card"]).Play()
        }
      }
      function soundType(result) {
        let name = ""
        switch (result) {
          case "无牛":
          case "N0":
            name = "no_bull"
            break
          case "牛1":
          case "N1":
            name = "bull_1"
            break
          case "牛2":
          case "N2":
            name = "bull_2"
            break
          case "牛3":
          case "N3":
            name = "bull_3"
            break
          case "牛4":
          case "N4":
            name = "bull_4"
            break
          case "牛5":
          case "N5":
            name = "bull_5"
            break
          case "牛6":
          case "N6":
            name = "bull_6"
            break
          case "牛7":
          case "N7":
            name = "bull_7"
            break
          case "牛8":
          case "N8":
            name = "bull_8"
            break
          case "牛9":
          case "N9":
            name = "bull_9"
            break
          case "牛牛":
          case "NN":
            name = "bull_bull"
            break
          case "五公":
            name = "five_pictur_bull"
            break
          case "豹子":
            name = "any_triple"
            break
          case "同花顺":
            name = "straight_flush"
            break
          case "皇家同花順":
            name = "royal_flush"
            break
        }
        audioMp3([`${data.game_id == 4 ? "nn" : "tc"}_${name}`]).Play()
      }
    }
    // 离开销毁
    onUnmounted(() => {
      closeDialog()
      closeToast()
      audioMp3().Pause()
    })
    // 监听机型和横竖屏
    watch(
      () => [phoneModel, phoneScreen],
      () => {
        foxVideoFn()
      },
      { immediate: true, deep: true }
    )
    // switchVideo
    watch(
      () => [switchVideo.value],
      ([state]) => {
        if (state == false) {
          hideVideo.value = true
        }
      },
      { immediate: true, deep: true }
    )
    // 监听路由切换
    watch(
      () => [route.query],
      ([query]) => {
        winArray.value = []
        table_id.value = query.id
        getSingletable(query.id)
        const { game_id = 1 } = tableData.value
        store.commit("app/updateGameId", game_id)
      },
      { immediate: true, deep: true }
    )
    watch(
      () => [tableData.value],
      ([data]) => {
        const sendMode = (data && data.sendMode) || null
        switch (sendMode) {
          case "startBet": //开始游戏
            if (data.game_id == 6) {
              showToningResult.value = false
            }
            if (data.game_id == 7) {
              hideVideo.value = true
            }
            if (data.game_id == 8) {
              hideVideo.value = true
              store.commit("config/rouletteLockTable", false)
            }
            closeDialog()
            showToast(Lang.value[Type.value].msg_start_bet)
            if (data.game_id != 5) {
              audioMp3(["start_betting"]).Play()
            } else {
              audioMp3(["tc_banker_stop", "start_betting"]).Play()
            }
            break
          case "startRob": //开始抢庄
            showToast(Lang.value[Type.value].msg_accept_grab)
            audioMp3(["tc_start_banker"]).Play()
            break
          case "toRobResult": //抢庄后通知
            if (data.RobMsg.rob_banker_id == userInfo.value.id) {
              audioMp3(["tc_banker_success"]).Play()
            }
            break
          case "startRobCountDown":
            break
          case "startBetCountDown": //倒计时
            if (data.count_down == 10) {
              audioMp3(["last_10_seconds"]).Play()
            } else if (data.count_down < 9) {
              audioMp3(["time"]).Play()
            }
            break
          case "toBet":
            showToast({
              message: Lang.value[Type.value].msg_bet_success,
              position: "top"
            })
            if (data.game_id == 8) {
              store.commit("config/rouletteLockTable", true)
            }
            break
          case "toBetFlase":
            audioMp3(["alert"]).Play()
            cancelChip()
            break
          case "sendScanResult":
            if (data.game_id == 1) {
              const position = parseInt(data.round.position)
              if (position == 23) {
                audioMp3(["baccarat_b_draw"]).Play()
              } else if (position == 13) {
                audioMp3(["baccarat_p_draw"]).Play()
              } else {
                audioMp3(["show_card"]).Play()
              }
            } else if (data.game_id == 2) {
              audioMp3(["show_card"]).Play()
            } else if (data.game_id == 4 || data.game_id == 5) {
              playNNsound(data)
            } else {
              audioMp3(["show_card"]).Play()
            }

            break
          case "cancelBet":
            showToast(Lang.value[Type.value].msg_cancel_success)
            break
          case "endBet":
            if (data.game_id == 6) {
              showToningResult.value = true
            } else if (data.game_id == 7) {
              showDiceResult.value = true
            } else if (data.game_id == 8) {
              showRouletteResult.value = true
            }
            if (
              (data.game_id == 7 || data.game_id == 8) &&
              switchVideo.value == true
            ) {
              hideVideo.value = false
            }
            showToast(Lang.value[Type.value].endBet)
            audioMp3(["stop_betting"]).Play()
            break
          case "openingBaccaratResult":
            baccaratResult(data)
            break
          case "openingDtResult":
            longhuResult(data)
            break
          case "openingNnResult":
            nnResult(data)
            break
          case "openingTcResult":
            nnResult(data)
            break
          case "openingToningResult":
            toningResult(data)
            break
          case "openingDiceResult":
            diceResult(data)
            if (data.game_id == 7) {
              hideVideo.value = true
            }
            break
          case "openingRouletteResult":
            rouletteResult(data)
            if (data.game_id == 8) {
              hideVideo.value = true
            }
            break
          case "retreated":
            break
          case "changeBoot":
            showToast(Lang.value[Type.value].changeBoot)
            clearChip()
            break
          case "resetBoot":
            showToast(Lang.value[Type.value].resetBoot)
            clearChip()
            break
          case "resetNumberTab":
            showToast(Lang.value[Type.value].msg_council)
            clearChip()
            break
        }
      },
      { immediate: true, deep: true }
    )
    return {
      Type,
      audio,
      videoConfig,
      hideVideo,
      userInfo,
      tableData,
      switchVideo,
      router,
      circle,
      currentRate,
      switchtabshow,
      isSwitchtab,
      switchCameraShow,
      isSwitchCamera,
      chipTable,
      baccaratType,
      rouletteType,
      foxVideo,
      videoDom,
      phoneModel,
      routerStack,
      winArray,
      showToningResult,
      showDiceResult,
      showRouletteResult,
      showSwitchtab,
      showSwitchCamera,
      offCamera,
      toggleAplayer,
      clearChip,
      handleBack,
      cancelChip,
      showMenu,
      showSetFree,
      showBaccaratPlayType,
      showTableInfo,
      showOnLine,
      closeSwitchView,
      toggleVide,
      switchRouletteType,
      videoUrl
    }
  }
}
</script>
<style lang="scss" scoped>
/* 深色豪华主题配色 */
$dark-bg: #0d0d0d;
$dark-bg-secondary: #000;
$card-bg: #000;
$border-color: #333;
$gold: #c5a059;

.play {
  width: 100%;
  height: 100%;
  background: $dark-bg;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  box-sizing: border-box;
  overflow: hidden;


  
  /* Navigation Bar - Redesigned */
  .nav {
    position: relative; 
    z-index: 100;
    width: 100%;
    height: 36px; /* Slightly compact */
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #000; /* Pure black as per ref */
    border-bottom: 1px solid #222;
    flex-shrink: 0;
    padding: 0 10px;
    box-sizing: border-box;

    .nav-item {
        display: flex;
        align-items: center;
        height: 100%;
        color: #fff;
        font-size: 13px;
        
        .icon {
            width: 16px;
            height: 16px;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            margin-right: 6px;
        }
        
        &.user-info {
            .user-icon { background-image: url("~@/assets/images/icon/user.png"); }
            .text { font-weight: bold; }
        }
        
        &.balance-info {
            .money-icon { background-image: url("~@/assets/images/icon/money.png"); }
            .text { color: $gold; font-family: monospace; font-size: 14px; }
        }
        
        &.limit-info {
             /* Use switch_tab icon as placeholder for limit arrows if specific icon invalid, 
                or styling css borders for arrows */
             .limit-icon { 
                 width: 12px; height: 12px;
                 background-image: url("~@/assets/images/icon/switch_tab.png"); /* Placeholder */
                 transform: rotate(90deg); /* Make it look like up/down sort */
                 opacity: 0.7;
             }
             .text { color: #aaa; font-size: 12px; }
        }
        
        &.right-controls {
            display: flex;
            gap: 15px;
            
            .btn {
               width: 24px;
               height: 24px;
               background-size: contain;
               background-repeat: no-repeat;
               background-position: center;
               
               &.camera {
                 background-image: url("~@/assets/images/icon/camera.png");
                 &.off { background-image: url("~@/assets/images/icon/camera_off.png"); }
               }
               &.muise { background-image: url("~@/assets/images/icon/musie.png"); }
               &.menu { background-image: url("~@/assets/images/icon/meun.png"); }
            }
        }
    }
  }

  /* Main View Container - Vertical Flex */
  .view {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%; /* Full height, Nav is now inside */
    position: relative;
    overflow: hidden;

    /* 1. Video Container (Top) - Flex Grow */
    .video-container {
      flex: 1; /* Grow to fill available space */
      position: relative;
      width: 100%;
      background: #000;
      overflow: hidden;
      
      .iframe {
        border: none;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        object-fit: cover; /* This won't affect iframe content but is good for semantics if it were a video tag. */
      }
      
      .game-area {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 10;
        pointer-events: none;
        
        /* Enable clicks on children */
        ::v-deep .playtable, ::v-deep .rushvillage {
          pointer-events: auto;
        }
      }
      
      /* Switch Views (Camera/Tables)Overlay */
      .switchView {
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 2010;
        background: $dark-bg-secondary;
        &.camera { width: 40%; position: absolute; bottom: 0; right: 0; border-top-left-radius: 0.3rem; }
      }

      /* Separated Video Controls */
      .video-btn-back {
          position: absolute;
          top: 10px;
          left: 10px;
          z-index: 2005; /* Highest priority */
          width: 30px;
          height: 30px;
          background-image: url("~@/assets/images/icon/back.png");
          background-size: contain;
          background-repeat: no-repeat;
          background-position: center;
      }

      /* Overlay Camera Icon */
      .video-overlay-camera {
          position: absolute;
          top: 10px;
          right: 60px; /* Switch is at 10px, so this is left of it */
          z-index: 2001;
          width: 30px;
          height: 30px;
          background-size: contain;
          background-repeat: no-repeat;
          background-position: center;
          background-image: url("~@/assets/images/icon/camera.png");
          
          &.off {
              background-image: url("~@/assets/images/icon/camera_off.png");
          }
      }

      /* Status Overlay Styles */
      .status-overlay {
          position: absolute;
          top: 10px;
          right: 50px; /* Left of switch button (10px + 30px + 10px gap) */
          z-index: 3000;
          display: flex;
          pointer-events: none;
          align-items: center;
          justify-content: center;

          .status-circle {
              width: 40px; /* Slightly smaller for corner */
              height: 40px;
              border-radius: 50%;
              background: rgba(0,0,0,0.6);
              display: flex;
              align-items: center;
              justify-content: center;
              color: #fff;
              font-weight: bold;
              font-size: 14px;
              border: 2px solid rgba(255, 255, 255, 0.2);
              backdrop-filter: blur(4px);

              &.dealing {
                  background: rgba(46, 204, 113, 0.8); /* Green */
                  border-color: #2ecc71;
                  font-size: 12px;
              }

              &.countdown {
                  background: rgba(231, 76, 60, 0.8); /* Red/Orange for countdown */
                  border-color: #e74c3c;
                  font-size: 20px;
              }

              &.wait {
                  background: rgba(52, 152, 219, 0.8);
                  border-color: #3498db;
              }
          }
      }
    }

    /* 4. Game Table Area (New Flex Item) */
    .game-area-block {
        width: 100%;
        height: 200px; /* Fixed height for table area */
        flex-shrink: 0;
        position: relative;
        background: transparent;
        z-index: 10;
        overflow: hidden;

        /* NN/TC mode - same as other games */
        &.nn-mode {
          height: 200px;
        }

        /* Content wrapper that mimics old absolute positioning for internal components */
        .game-area-content {
            width: 100%;
            height: 100%;
            position: relative;
            
             /* Ensure PlayTable fits inside this block */
             ::v-deep .playtable {
                 .view {
                     bottom: 0 !important; /* Anchor to bottom of this block */
                     top: auto !important;
                     height: 100% !important; /* Fill the block */
                     transform: none !important; /* Reset 3D transform for flat view if needed, or keep if 3D desired within this block */
                 }
                 
                 /* Adjust portrait mode specifically if needed */
                 @media screen and (orientation: portrait) {
                     .view {
                        height: 100% !important;
                        border-radius: 0 !important;
                     }
                 }
             }
        }
    }

    /* 2. Chip Control Bar (Middle) - Fixed Height */
    .bet-chip-bar {
      width: 100%;
      height: 60px;
      flex-shrink: 0;
      position: relative;
      z-index: 20;
      background: #111;
      border-top: 1px solid #333;
    }

    /* 3. Poker Section for NN/TC - Compact horizontal layout */
    .poker-section {
      width: 100%;
      height: 40px; /* 减小高度 */
      flex-shrink: 0;
      position: relative;
      z-index: 20;
      background: rgba(0, 0, 0, 0.85);
      border-top: 1px solid #333;
      overflow: hidden;

      ::v-deep .nn-compact {
        /* Override default poker-box styles for compact mode */
        .poker-box.nn {
          position: relative !important;
          height: 100% !important;
          width: 100% !important;
          display: flex !important;
          flex-direction: row !important;
          align-items: center !important;
          justify-content: space-around !important;
          padding: 2px 4px !important;
          box-sizing: border-box !important;
          background: transparent !important;

          .list {
            flex: 1 !important;
            height: 100% !important;
            min-width: 0 !important;
            padding: 0 2px !important;
            border-left: 1px solid #444 !important;
            display: flex !important;
            flex-direction: row !important;
            align-items: center !important;
            justify-content: center !important;
            position: relative !important;

            &:first-child {
              border-left: none !important;
            }

            .title {
              position: relative !important;
              display: block !important;
              font-size: 8px !important;
              padding: 2px 3px !important;
              border-radius: 2px !important;
              white-space: nowrap !important;
              margin-right: 2px !important;
              flex-shrink: 0 !important;
              /* 确保颜色样式正确应用 */
              &.red {
                background: #ff494b !important;
                color: #fff !important;
              }
              &.blue {
                background: #00a8ff !important;
                color: #fff !important;
              }
            }

            .role {
              position: absolute !important;
              width: auto !important;
              left: 50% !important;
              top: auto !important;
              bottom: 2px !important;
              transform: translateX(-50%) !important;
              font-size: 10px !important;
              padding: 1px 4px !important;
              margin: 0 !important;
              background: rgba(0, 0, 0, 0.7) !important;
              border-radius: 2px !important;
              color: #ffd700 !important;
            }

            .item {
              width: 16px !important;
              height: 22px !important;
              margin: 0 -3px !important;
              margin-top: 0 !important;
              padding: 0 !important;

              .card {
                background-size: 100% 100% !important;
              }
            }
          }
        }

        /* Position card (定位牌) - show on video area left side for NN/TC */
        .nn_position {
          display: flex !important;
          position: fixed !important;
          top: 15% !important; /* 在视频区域内 */
          left: 8px !important;
          transform: translateY(-50%) !important;
          z-index: 2000 !important;
          flex-direction: column !important;
          align-items: center !important;
          justify-content: center !important;
          background: transparent !important;
          padding: 0 !important;
          pointer-events: none !important; /* 让点击穿透到下注区域 */

          strong {
            font-size: 10px !important;
            color: #fff !important;
            margin-bottom: 4px !important;
            padding: 0 !important;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
          }

          .item {
            width: 36px !important;
            height: 52px !important;
            transform: none !important;
            margin: 0 !important;
            padding: 0 !important;

            .card {
              display: block !important;
              width: 100% !important;
              height: 100% !important;
              background-size: 100% 100% !important;
              border-radius: 3px !important;
              box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
            }
          }
        }

        /* 三卡牛牛的定位牌在 poker-box 内部，需要额外选择器 */
        .poker-box.nn .nn_position {
          display: flex !important;
          position: fixed !important;
          top: 15% !important; /* 在视频区域内 */
          left: 8px !important;
          transform: translateY(-50%) !important;
          z-index: 2000 !important;
          flex-direction: column !important;
          align-items: center !important;
          justify-content: center !important;
          background: transparent !important;
          padding: 0 !important;

          strong {
            font-size: 10px !important;
            color: #fff !important;
            margin-bottom: 4px !important;
            padding: 0 !important;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
          }

          .item {
            width: 36px !important;
            height: 52px !important;
            transform: none !important;
            margin: 0 !important;
            padding: 0 !important;

            .card {
              display: block !important;
              width: 100% !important;
              height: 100% !important;
              background-size: 100% 100% !important;
              border-radius: 3px !important;
              box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
            }
          }
        }
      }
    }

    /* 4. Roadmap Container (Bottom) - Auto Height for Aspect Ratio */
    .roadmap-container {
      width: 100%;
      height: 160px; 
      flex-shrink: 0;
      background: #fff;
      position: relative;
      z-index: 20;
      overflow: hidden;

      /* NN/TC mode - larger roadmap */
      &.nn-mode {
        height: 130px;
      }

      /* Deep overrides to ensure standard layout and white background support */
      ::v-deep .playway {
        height: 100% !important;
        background: transparent !important;
        
        &.white-theme {
           background: #fff !important;
        }
      }
      
      ::v-deep .baccarat-view {
        height: 100% !important;
      }

      ::v-deep .road-box {
        background: transparent !important;
      }
      
      ::v-deep .canvas {
        width: 100% !important;
        height: 100% !important;
        display: block !important;
      }
    }
  }
}
</style>
