<template>
  <div class="baccarat">
    <!-- 第一行: 小 | 闲对 | 庄对 | 大 -->
    <div class="list top">
      <!-- 小 -->
      <div class="item grid-item" :class="{ unclick: can_bet_big_small != 1 }">
        <confirmBet
          @confirm="confirmChip"
          @cancel="cancelChip"
          @undo="undoChip"
          :data="{
            money: downChip.small_amount,
            show: touch == 'small_amount'
          }"
        ></confirmBet>
        <chipView
          @click="downBet($event, 'small_amount')"
          :list="chipArray.small_amount"
          :win="winArray.includes('small')"
        ></chipView>
        <div class="text">
          <span class="label text-blue">{{ Lang[Type].small }}</span>
          <span class="odds">1:1.5</span>
        </div>
        <div class="money" v-if="bet_amount_msg.small_amount">
          <i class="coin-icon"></i>
          {{ bet_amount_msg.small_amount }}
        </div>
      </div>

      <!-- 闲对 -->
      <div class="item grid-item">
        <confirmBet
          @confirm="confirmChip"
          @cancel="cancelChip"
          @undo="undoChip"
          :data="{
            money: downChip.player_pair_amount,
            show: touch == 'player_pair_amount'
          }"
        ></confirmBet>
        <chipView
          @click="downBet($event, 'player_pair_amount')"
          :list="chipArray.player_pair_amount"
          :win="winArray.includes('player_pair')"
        ></chipView>
        <div class="text">
          <span class="label text-blue">{{ Lang[Type].msg_player_pair }}</span>
          <span class="odds">1:11</span>
        </div>
        <div class="money" v-if="bet_amount_msg.player_pair_amount">
          <i class="coin-icon"></i>
          {{ bet_amount_msg.player_pair_amount }}
        </div>
      </div>

      <!-- 庄对 -->
      <div class="item grid-item">
        <confirmBet
          @confirm="confirmChip"
          @cancel="cancelChip"
          @undo="undoChip"
          :data="{
            money: downChip.banker_pair_amount,
            show: touch == 'banker_pair_amount'
          }"
        ></confirmBet>
        <chipView
          @click="downBet($event, 'banker_pair_amount')"
          :list="chipArray.banker_pair_amount"
          :win="winArray.includes('banker_pair')"
        ></chipView>
        <div class="text">
          <span class="label text-red">{{ Lang[Type].msg_banker_pair }}</span>
          <span class="odds">1:11</span>
        </div>
        <div class="money" v-if="bet_amount_msg.banker_pair_amount">
          <i class="coin-icon"></i>
          {{ bet_amount_msg.banker_pair_amount }}
        </div>
      </div>

      <!-- 大 -->
      <div class="item grid-item" :class="{ unclick: can_bet_big_small != 1 }">
        <confirmBet
          @confirm="confirmChip"
          @cancel="cancelChip"
          @undo="undoChip"
          :data="{ money: downChip.big_amount, show: touch == 'big_amount' }"
        ></confirmBet>
        <chipView
          @click="downBet($event, 'big_amount')"
          :list="chipArray.big_amount"
          :win="winArray.includes('big')"
        ></chipView>
        <div class="text">
          <span class="label text-red">{{ Lang[Type].big }}</span>
          <span class="odds">1:0.5</span>
        </div>
        <div class="money" v-if="bet_amount_msg.big_amount">
          <i class="coin-icon"></i>
          {{ bet_amount_msg.big_amount }}
        </div>
      </div>
    </div>

    <!-- 第二行: 闲 | 和 | 庄 -->
    <div class="list bottom">
      <!-- 闲 -->
      <div class="item grid-item">
        <confirmBet
          @confirm="confirmChip"
          @cancel="cancelChip"
          @undo="undoChip"
          :data="{
            money: downChip.player_amount,
            show: touch == 'player_amount'
          }"
        ></confirmBet>
        <chipView
          @click="downBet($event, 'player_amount')"
          :list="chipArray.player_amount"
          :win="winArray.includes('player')"
        ></chipView>
        <div class="text">
          <span class="label-large text-blue">{{ Lang[Type].player }}</span>
          <span class="odds">1:{{ tableData.price_player }}</span>
        </div>
        <div class="money" v-if="bet_amount_msg.player_amount">
          <i class="coin-icon"></i>
          {{ bet_amount_msg.player_amount }}
        </div>
      </div>

      <!-- 和 -->
      <div class="item grid-item">
        <confirmBet
          @confirm="confirmChip"
          @cancel="cancelChip"
          @undo="undoChip"
          :data="{ money: downChip.tie_amount, show: touch == 'tie_amount' }"
        ></confirmBet>
        <chipView
          @click="downBet($event, 'tie_amount')"
          :list="chipArray.tie_amount"
          :win="winArray.includes('tie')"
        ></chipView>
        <div class="text">
          <span class="label-large text-green">{{ Lang[Type].tie }}</span>
          <span class="odds">1:{{ tableData.price_tie_baccarat }}</span>
        </div>
        <div class="money" v-if="bet_amount_msg.tie_amount">
          <i class="coin-icon"></i>
          {{ bet_amount_msg.tie_amount }}
        </div>
      </div>

      <!-- 庄 -->
      <div class="item grid-item">
        <confirmBet
          @confirm="confirmChip"
          @cancel="cancelChip"
          @undo="undoChip"
          :data="{
            money: downChip.banker_amount,
            show: touch == 'banker_amount'
          }"
        ></confirmBet>
        <chipView
          @click="downBet($event, 'banker_amount')"
          :list="chipArray.banker_amount"
          :win="winArray.includes('banker')"
        ></chipView>
        <div class="text">
          <span class="label-large text-red">{{ Lang[Type].banker }}</span>
          <span class="odds">
            {{ baccarat_type == 0 ? `1:${tableData.price_banker}` : "1:1" }}
          </span>
        </div>
        <div class="money" v-if="bet_amount_msg.banker_amount">
          <i class="coin-icon"></i>
          {{ bet_amount_msg.banker_amount }}
        </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 { baccaratData } from "@/utils/common"
export default {
  name: "TableBaccarat",
  components: { confirmBet, chipView },
  props: {
    touch: {
      type: String,
      default: ""
    },
    can_bet_big_small: {
      type: [String, Number],
      default: 1
    },
    can_bet_luck_six: {
      type: [String, Number],
      default: 1
    },
    baccarat_type: {
      type: [String, Number],
      default: 0
    },
    bet_amount_msg: {
      type: Object,
      default: () => ({
        ...baccaratData.amount
      })
    },
    winArray: {
      type: Array,
      default: () => []
    },
    downChip: {
      type: Object,
      default: () => ({
        ...baccaratData.amount
      })
    },
    chipArray: {
      type: Object,
      default: () => ({ ...baccaratData.array })
    },
    tableData: {
      type: [Object],
      default: () => {}
    }
  },
  setup(prop, context) {
    const store = useStore()
    const Type = computed(() => store.state.config.$Type)
    const Lang = computed(() => store.state.config.$lang)
    const downBet = (e, type) => {
      context.emit("downBet", e, type)
    }
    const confirmChip = () => {
      context.emit("confirmChip")
    }
    const cancelChip = () => {
      context.emit("cancelChip")
    }
    const undoChip = () => {
      context.emit("undoChip")
    }
    return { Type, Lang, downBet, confirmChip, cancelChip, undoChip }
  }
}
</script>
<style lang="scss" scoped>
.baccarat {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  box-sizing: border-box;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;

  .list {
    display: flex;
    gap: 8px;

    &.top {
      flex: 3; // Top row height ratio
      .item {
        flex: 1;
      }
    }

    &.bottom {
      flex: 5; // Bottom row height ratio
      .item {
        flex: 1;
      }
      // Removed specific flex for green-main as per instruction, assuming it's not needed for the new look.
    }

    .item {
      position: relative;
      border-radius: 8px;
      // Removed border and box-shadow, now handled by .grid-item
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      transition: all 0.2s;
      overflow: hidden;

      // Unclick state
      &.unclick {
        opacity: 0.5;
        cursor: not-allowed;
        filter: grayscale(0.8);
      }

      // Text Styles
      .text {
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        pointer-events: none;

        .label {
          font-size: 16px;
          font-weight: 600;
          margin-bottom: 2px;
        }
        .label-large {
          font-size: 24px; /* Reduced from 32px */
          font-weight: 800;
          margin-bottom: 2px; /* Reduced margin */
        }

        .odds {
          font-size: 14px; /* Increased from 12px */
          color: #FFD700; /* Gold */
          font-weight: 600;
          display: block; /* Ensure formatting */
          text-shadow: 0 1px 2px rgba(0,0,0,0.8);
        }
        
        .text-blue { color: #29abe2; }
        .text-red { color: #ed1c24; }
        .text-green { color: #22ac38; }
      }

      // Money display
      .money {
        position: absolute;
        bottom: 6px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        align-items: center;
        gap: 2px;
        color: #ffd700;
        font-size: 12px;
        z-index: 3;
        white-space: nowrap;
        pointer-events: none;
        // Removed background, padding, border-radius, border
        
        .coin-icon {
          width: 14px;
          height: 14px;
          background: #ffd700;
          border-radius: 50%;
          border: 1px solid #fff;
          box-shadow: 0 0 2px rgba(0,0,0,0.5);
        }
      }
    }

    // Grid Item Style (Digital Table Look)
    .grid-item {
      background: rgba(9, 60, 50, 0.7); // Deep Teal Transparent
      border: 1px solid #59cfa8; // Cyan/Green Border
      box-shadow: inset 0 0 10px rgba(0,0,0,0.3);
      
      &:active {
         background: rgba(9, 60, 50, 0.9);
         border-color: #7fffd4;
      }
    }
  }
}
</style>
