<template>
  <div class="playchip">
    <div
      class="chip"
      :class="[`chip_${item.key}`, { active: chooseChip.key == item.key }]"
      v-for="item in chipArry"
      :key="item.key"
      @click="chooseFn(item)"
    >
      <span class="chip-value">{{ item.value }}</span>
    </div>
  </div>
</template>

<script>
import { computed } from "vue"
import { useStore } from "vuex"
import { audioMp3 } from "@/assets/js/sound.js"
export default {
  name: "PlayChip",
  components: {},
  setup() {
    const store = useStore()
    const chipArry = computed(() =>
      store.state.config.chipArry.filter((v) => v.show == true && v.value != 20)
    )
    const chooseChip = computed(() => store.state.app.chooseChip)
    const chooseFn = (item) => {
      store.commit("app/updateChooseChip", item)
      audioMp3(["check"]).Play()
    }
    return {
      chipArry,
      chooseChip,
      chooseFn
    }
  }
}
</script>
<style lang="scss" scoped>
.playchip {
  position: relative;
  width: 100%;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: flex-start; /* Left align for scroll */
  gap: 12px;
  padding: 0 16px;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(5px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  overflow-x: auto;
  z-index: 10;
  
  /* Hide scrollbar */
  &::-webkit-scrollbar {
    display: none;
  }

  .chip {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    position: relative;
    cursor: pointer;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    
    &.active {
      transform: scale(1.1); /* Slight scale for emphasis, consistent with modern UI */
      box-shadow: 0 0 10px 2px #fceabb; /* Gold Glow */
      border-radius: 50%; /* Ensure glow is circular */
      background-color: transparent;
      
      /* Remove the misaligned image overlay */
      &:after {
        display: none;
      }
    }

    .chip-value {
      display: none; /* Hide text, use image text */
    }

    /* Map classes to images */
    &.chip_1s, &.chip_10 { background-image: url("~@/assets/images/chip/1s.png"); }

    &.chip_5s, &.chip_50 { background-image: url("~@/assets/images/chip/5s.png"); }
    &.chip_1b, &.chip_100 { background-image: url("~@/assets/images/chip/1b.png"); }
    &.chip_2b, &.chip_200 { background-image: url("~@/assets/images/chip/2b.png"); }
    &.chip_5b, &.chip_500 { background-image: url("~@/assets/images/chip/5b.png"); }
    &.chip_1k, &.chip_1000 { background-image: url("~@/assets/images/chip/1k.png"); }
    &.chip_2k, &.chip_2000 { background-image: url("~@/assets/images/chip/2k.png"); }
    &.chip_5k, &.chip_5000 { background-image: url("~@/assets/images/chip/5k.png"); }
    &.chip_1w, &.chip_10000 { background-image: url("~@/assets/images/chip/1w.png"); }
    &.chip_2w { background-image: url("~@/assets/images/chip/2w.png"); }
    &.chip_5w { background-image: url("~@/assets/images/chip/5w.png"); }
    &.chip_10w { background-image: url("~@/assets/images/chip/10w.png"); }
  }
}
</style>
